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.
- 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"
}
})
2
Answers
Insted of
let { status } = await Location.requestPermissionsAsync()
uselet { status } = await Location.requestForegroundPermissionsAsync();
remove this
<Location.Address>it should be const [address, setAddress] = useState()[address, setAddress] = useState()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.
2 . Create a Modal with the use of earlier mentioned state objects. Here is a sample Modal to request permissions from user.