You input {this.state.zip}.

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  TextInput,
  Image,
  View
} from 'react-native';

class WeatherProject extends Component {
  // If you want to have a default zip code, you could add one here
  getInitialState() {
    return ({
      zip: ''
    });
  }
  // We'll pass this callback to the <TextInput>
  _handleTextChange(event) {
    // log statements are viewable in Xcode,
    // or the Chrome debug tools
    console.log(event.nativeEvent.text);

    this.setState({
      zip: event.nativeEvent.text
    });
  }
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          You input {this.state.zip}.
        </Text>
        <TextInput
          style={styles.input}
          onSubmitEditing={this._handleTextChange}/>
      </View>
    );
  }
}

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    borderWidth: 2,
    height: 40
  }
});

AppRegistry.registerComponent('WeatherProject', () => WeatherProject);
[enter image description here][1]

class WeatherProject extends Component {
  constructor(props){
    super(props);
    this.state = {
      zip: ""
    }
  }
}

getInitialState() {
    return ({
      zip: ''
    });
  }

constructor() {
  super();
  this.state = {
    zip: ''
  }
}

return (
  <Container>
    <Content style={styles.container}>
      <View>
        <ScrollView style={styles.scrollView}>
          <View style={styles.card}>
            <TouchableOpacity

              onPress={()=>{this.props.navigation.navigate("JoinDetailPage")}}
            >
              <View style={{ flexDirection: "row" }}>
                <View style={{ flex: 1 }}>
                  <Text style={{ fontWeight: "bold" }}>Pokers Event</Text>
                </View>
                <View
                  style={{
                    flex: 1,
                    alignItems: "flex-end",
                    marginRight: 3
                  }}>
                  <Text>Hosted By</Text>
                </View>
              </View>
              <View
                style={{
                  flex: 1,
                  alignContent: "flex-end",
                  alignItems: "flex-end",
                  marginRight: 3
                }}>
                <Text style={{ fontWeight: "bold" }}>John</Text>
              </View>

              <View style={{ flexDirection: "row" }}>
                <View
                  style={{ flex: 1, flexDirection: "row", marginRight: 3 }}>
                  <View>
                    <Image
                      style={{ width: 15, height: 15 }}
                      source={require("./../../../../assets/location.png")}
                    />
                  </View>
                  <View>
                    <Text style={{ marginLeft: 10, fontSize: 13 }}>
                      Divine Lahore
                    </Text>
                  </View>
                </View>
                <View
                  style={{
                    flexDirection: "row",
                    alignContent: "flex-end",
                    alignItems: "flex-end"
                  }}>
                  <Text
                    style={{
                      marginLeft: 10,
                      fontSize: 13,
                      fontWeight: "bold",
                      color: "#a78c52"
                    }}>
                    2.0
                  </Text>

                  <Image
                    style={{ width: 15, height: 15, marginLeft: 5 }}
                    source={require("./../../../../assets/star.png")}
                  />
                </View>
              </View>

              <View style={{ flexDirection: "row", marginTop: 5 }}>
                <View>
                  <Image
                    style={{ width: 15, height: 15 }}
                    source={require("./../../../../assets/calendar.png")}
                  />
                </View>
                <View>
                  <Text style={{ marginLeft: 10, fontSize: 13 }}>
                    12/10/2019
                  </Text>
                </View>
              </View>
              <View style={{ flexDirection: "row", marginTop: 5 }}>
                <View>
                  <Image
                    style={{ width: 15, height: 15 }}
                    source={require("./../../../../assets/gametype.png")}
                  />
                </View>
                <View>
                  <Text style={{ marginLeft: 10, fontSize: 13 }}>cash</Text>
                </View>
              </View>
            </TouchableOpacity>
          </View>
        </ScrollView>
      </View>
    </Content>
  </Container>
);   } }