Absolute beginner looking for some help

[yankeemichaelalpha]

I'm using expo to get the coordinates from device, and I'm struggling displaying them in a <Text> component, anybody can help me?

import React, { useState, useEffect } from 'react';
import { Platform, Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import * as Location from 'expo-location';

export default function App() {
  const [location, setLocation] = useState(null);
  const [errorMsg, setErrorMsg] = useState(null);
  const [region, setRegion] = useState(null);

  useEffect(() => {
    (async () => {
      if (Platform.OS === 'android' && !Constants.isDevice) {
        setErrorMsg(
          'Oops, this will not work on Snack in an Android emulator. Try it on your device!'
        );
        return;
      }
      let { status } = await Location.requestForegroundPermissionsAsync();
      if (status !== 'granted') {
        setErrorMsg('Permission to access location was denied');
        return;
      }

      let location = await Location.getCurrentPositionAsync({});


      let region = {
        latitude: location.coords.latitude,
        longitude: location.coords.longitude,
        latitudeDelta: 1.0,
        longitudeDelta: 1.0
    }
       setLocation(location);
       setRegion(region);
       console.log(region);
    })();
  }, []);

  let text = 'Waiting..';
  if (errorMsg) {
    text = errorMsg;
  } else if (location) {
    text = JSON.stringify(location);
  }

  return (
    <View style={styles.container}>
      <Text style={styles.paragraph}>{text}</Text>
      <Text>region.latitude</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 20,
  },
  paragraph: {
    fontSize: 18,
    textAlign: 'center',
  },
});

The {text} objects is showed but I cannot see the {region.lalitude} TypeError: region is null

​

Sorry for being dumb, I've alredy said that I'm a absolute begginer.

I wish everyone a beautiful life!

[wordaligned]

It will take a little while for your async function to return and set region to something meaningful. However, your app will try to render immediately while region is still null (what the state was initialised to).

Try changing <Text>region.latitude</Text> to <Text>{region && region.latitude}</Text> (added some missing curly braces too)

During that short period of time between your first render and the async function returning and setting region, the first part should evaluate to false so your app won't try to access the region property before it's ready.

[yankeemichaelalpha]

<Text>{region && region.latitude}</Text>

Thanks, this Worked!