Conditional component rendering react native

Question

Im trying to render conditional component. I have MapView with the location, what i want to achieve is: If the location is granted from the user or the location can not be found, instead of MapView I want to render a Textinput where users can type their location manually. This is my code

export default class GpsLocation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      region: null,
    };
    this._getLocationAsync();
  }

  _getLocationAsync = async () => {
    let { status } = await Permissions.askAsync(Permissions.LOCATION);
    let location = await Location.getCurrentPositionAsync({
      enableHighAccuracy: true,
    });

    let region = {
      latitude: location.coords.latitude,
      longitude: location.coords.longitude,
      latitudeDelta: 0.0045,
      longitudeDelta: 0.0045,
    };
    this.setState({ region: region });
  };

  render() {
    if (this.status === "granted") {
      return (
        <View style={styles.locationContainer}>
        <Text style={styles.note}>Adresa</Text>
        <MapView
          initialRegion={this.state.region}
          showUserLocation={true}
          showCompass={true}
          rotateEnabled={false}
          style={{ flex: 1, borderRadius: 10 }}
        ></MapView>
      </View>
      );
    } else {
      return (
        <TextInput/>
      );
    }
  }
}

Please explain the issue that you are facing?

Sarun UK
– Sarun UK

2020-11-19 17:52:50 +00:00
Commented Nov 19, 2020 at 17:52 — Sarun UK
– Sarun UK, Commented Nov 19, 2020 at 17:52

Nooruddin Lakhani · Accepted Answer · 2020-11-20 13:02:51Z

2

Try this way

constructor(props) {
    super(props);
    this.state = {
      region: null,
      status : undefined, // add initially `undefined`
    };
    this._getLocationAsync();
  }

_getLocationAsync = async () => {
    let { status } = await Permissions.askAsync(Permissions.LOCATION);
    .......
    this.setState({ ... , status }); // update status here
  };

render() {
  // change here also
  return this.state.status === "granted" ? (
        <View style={styles.locationContainer}>
          <Text style={styles.note}>Adresa</Text>
          <MapView
            initialRegion={this.state.region}
            showUserLocation={true}
            showCompass={true}
            rotateEnabled={false}
            style={{ flex: 1, borderRadius: 10 }}
          ></MapView>
      </View>
      ) : <TextInput/> ;       
  }

edited Nov 20, 2020 at 13:02

answered Nov 19, 2020 at 18:08

Nooruddin Lakhani

6,8413 gold badges22 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Emily Over a year ago

this.status is not recognized and its not connecting to the let { status } = await Permissions.askAsync(Permissions.LOCATION);

Emily Over a year ago

Sorry i tested it and is not working this.status === "granted" should be something else because the status is not recognized, can u help me

Emily Over a year ago

Sill the same is only showing the TextInput, not the MapView when im giving permissions for location

Nooruddin Lakhani Over a year ago

Change this.status to this.state.status then try. I have updated also

Emily Over a year ago

pastebin.com/eMkbwBex here is the code updated, but the same its not functional

|

Collectives™ on Stack Overflow

Conditional component rendering react native

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related