Question 33011 in React native Question posted in
The official React Native documentation can be found here.

Several Interesting Problem on React Native

I want to share on of my react native project. Here I am getting some issues. I have tried to solve that many time, but failed. Can anyone fix that?

I have checked all the questions asked on stack overflow. I can assure that this a really new problem.

Errors: 1. In Location.Address it is showing that address module is not loaded.

2.Location.requestPermissionsAsync() not working. Showing a cross over the code.

  1. In let {status} it is showing an error.

Please Note I have written this code in a .tsx file.

import React, {useState, useReducer,useEffect} from "react"
import {View, Text, StyleSheet, Image, Dimensions, TouchableOpacity} from "react-native"



import * as Location from "expo-location"

const screenWidth = Dimensions.get("screen").width

export const LandingScreen = () => {

  const[errorMsg, setErrorMsg] = useState("")
  const [address, setAddress] = useState<Location.Address>()
  const [displayAddress, setDisplayAddress] = useState("Waiting for current location")
  
  useEffect(() =>{

      (async () =>{
          let { status } = await Location.requestPermissionsAsync()

          if(status !== "granted"){
           setErrorMsg(
              "permissions not granted ,Allow the app to use location service"
              
            )
          }

          let location: any = await Location.getCurrentPositionAsync()

        const {coords} = location

        if(coords){
          const{latitude, longitude} = coords;
          let addressResponse: any = await Location.reverseGeocodeAsync({
            latitude,
            longitude
          });

          for(let item of addressResponse){
            setAddress(item)
            let currentAddress = `${item.name}, ${item.street}, ${item.postalCode}, ${item.city}`
            setDisplayAddress(currentAddress)

            /*if(address.length > 0){
              setTimeout(()=>{
                navigate("HomeScreen")
              },1000)
          }*/
        }
      }

      


  })

},[])


  return(
    <View style={styles.container}>

     <View style={styles.navigation}/>



      <View style={styles.body}>
      <Image source={require("../images/delivery.png")} style={styles.deliveryIcon}/>
        <View style={styles.addressContainer}>
          <Text style={styles.addressTitle}>Your deliver address</Text>
        </View>

        

       <Text style={styles.addressText}>{displayAddress}</Text>
      </View>

      <View style={styles.footer}/>
      

     

    </View>
  )
}



const styles = StyleSheet.create({
  container:{
    flex:1,
    backgroundColor:'rgba(242,242,242,1)'
  },
  navigation:{
    flex:2,
    
  },
  body:{
    flex:9,
    justifyContent:"center",
    alignItems:"center",
    
  },
  footer:{
    flex:1,
    
  },
  deliveryIcon:{
    width:120,
    height:120
  },
  addressContainer:{
    width:screenWidth - 100,
    borderBottomColor:"red",
    borderBottomWidth:0.5,
    padding:5,
    marginBottom:10,
    alignItems:"center"
  },
  addressTitle:{
    fontSize:24,
    fontWeight:"700",
    color:"#7D7D7D"
  },
  addressText:{
    fontSize:20,
    fontWeight:"200",
    color:"#4F4F4F"
  }
})
Tags:

2

Answers


  1. 0

    1. Insted of
      let { status } = await Location.requestPermissionsAsync()
      use
      let { status } = await Location.requestForegroundPermissionsAsync();

    remove this <Location.Address> it should be const [address, setAddress] = useState()

    Login or Signup to reply.
  2. 0
    1. as @komal-harmale mentioned use the [address, setAddress] = useState()
    2. In Location.Address it is showing that address module is not loaded.

      Location.requestPermissionsAsync() has been deprecated. https://docs.expo.dev/versions/latest/sdk/location/#locationrequestpermissionsasync

      In that case you have to use In that case you have to use requestForegroundPermissionsAsync or requestBackgroundPermissionsAsync instead of that.

      Same scenario happened to me and I overcame that by using requestForegroundPermissionsAsync, requestBackgroundPermissionsAsync and with a help of Modal. will explain briefly what I did.

      1 . initialize these states variables where you wants to request permissions.

      const [foreground, requestForeground] = ExpoLocation.useForegroundPermissions();
  const [background, requestBackground] = ExpoLocation.useBackgroundPermissions();

    2 . Create a Modal with the use of earlier mentioned state objects. Here is a sample Modal to request permissions from user. 

    import { Button, Linking, Modal, StyleSheet, Text, View } from "react-native";

export const LocationRequestModal = ({ foreground, requestForeground, background, requestBackground }) => {
  return (
    <Modal visible={foreground && !foreground.granted && background && !background.granted}>
      <View style={Styles.backDrop}>
        <View style={Styles.middleView}>
          <View style={{ marginVertical: 16 }}>
            <Text style={{ fontSize: 20, fontWeight: "bold" }}>Pleae grant permission.</Text>
          </View>
          <View style={{ marginVertical: 16 }}>
            <Text style={{ fontSize: 18 }}>Foreground permission:</Text>
            <Text>status: {foreground?.status || "pending"}</Text>
            {foreground && !foreground.granted && foreground.canAskAgain && <Button title="Grant permission" onPress={requestForeground} />}
            {foreground && !foreground.granted && !foreground.canAskAgain && (
              <Button
                title="Grant permission through settings"
                onPress={() => requestForeground().then((p) => !p.granted && Linking.openSettings())}
              />
            )}
          </View>

          <View style={{ marginVertical: 16 }}>
            <Text style={{ fontSize: 18 }}>Background permission:</Text>
            <Text>status: {background?.status || "pending"}</Text>
            {!foreground?.granted && <Text>Grant foreground location permission first</Text>}
            {foreground?.granted && background && !background.granted && background.canAskAgain && (
              <Button title="Grant permission" onPress={requestBackground} />
            )}
            {foreground?.granted && background && !background.granted && !background.canAskAgain && (
              <Button
                title="Grant permission through settings"
                onPress={() => requestBackground().then((p) => !p.granted && Linking.openSettings())}
              />
            )}
          </View>
        </View>
      </View>
    </Modal>
  );
};

const Styles = StyleSheet.create({
  backDrop: {
    backgroundColor: "rgba(52, 52, 52, 0.8)",
    height: "100%",
    width: "100%",
    paddingBottom: "3%",
    paddingTop: "3%",
    paddingRight: "6%",
    paddingLeft: "6%",
    justifyContent: "center",
    alignItems: "center",
  },
  middleView: { height: "60%", width: "60%", backgroundColor: "white", justifyContent: "center", alignItems: "center" },
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search