Retrieve user's location and it's permission in React native via expo

Question

Good evening, I'm a newbie to React native and I have this problem and Im seeking for little help. Im using only Android platform, and I render my output in my physical device(android). So I have register page with some input field, one of them is the Address Input field with a Touchable Icon in the right. That when clicked a prompt will open asking user to on the phone's location.

My problem is right now is. Since I have a login screen with touchable "register" text in it. When I tap that, it will redirect to Register page but the prompt will popup directly.

While my expected output is, after tapping the "register" text in Login screen, the prompt will not show, it will show If I will click the touchable icon inside the Address input field.

So this is what I've done. //in this is my UI

 <View style={styles.container}>
      <View>
        <MaterialCommunityIcons
          name='map-marker-radius'
          size={23}
          color="black"
          style={styles.phoneNumberIcon} />
        {address && 
         <TextInput
          placeholder='Address'
         
          placeholderTextColor='black'
          keyboardType='default'
          editable={false} >{address}</TextInput>
         
        }
       

        <TouchableOpacity style={globalStyles.btnClickEye} >
          {/* onPress={(()=> getPermisions())} */}
          <FontAwesome
            name='map-pin'
            size={22}
            color="black"
          />
        </TouchableOpacity>

      </View>

      
      {/* just disregard this code, I just testing it if I locate */}
      <View style={{  justifyContent: 'center', alignItems: 'center' ,marginTop:100}}>
        {location && (
          <Text>
            Latitude: {location.coords.latitude}, Longitude:{' '}
            {location.coords.longitude}
          </Text>
        )}
        {address && <Text>{address}</Text>}
       <Text> testing /Text>
      </View>

    </View>

//this is my function

 const [location, setLocation] = useState(null);
  const [address, setAddress] = useState(null);
  const [addresstext, setAddresstext] = useState('');
  useEffect(() => {
    (async () => {
      let { status } = await Location.requestForegroundPermissionsAsync();
      if (status !== 'granted') {
        console.log('Permission to access location was denied');
        return;
      }

      let location = await Location.getCurrentPositionAsync({});
      setLocation(location);
      console.log(location);
      let address = await reverseGeocodeAsync({
        latitude: location.coords.latitude,
        longitude: location.coords.longitude,
      });
     setAddress(address[0].street+', '+ address[0].city);
     
    })();
  }, []);

Thank you in advance friend.

Answer 1

If I read your code correctly you have the asking of the location permission in useEffect hook which is run on when the screen mounts.

If you move the asking of the location permission from hook to a separate function that is called (as you call getPermissions in Btn) it should work:

const getPermission = async() => {
  let { status } = await Location.requestForegroundPermissionsAsync();
      if (status !== 'granted') {
        console.log('Permission to access location was denied');
        return;
      }

  let location = await Location.getCurrentPositionAsync({});
  setLocation(location);
  console.log(location);
  let address = await reverseGeocodeAsync({
    latitude: location.coords.latitude,
    longitude: location.coords.longitude,
  });
 setAddress(address[0].street+', '+ address[0].city);
}