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.

3. 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"
}
})

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

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

1. as @komal-harmale mentioned use the [address, setAddress] = useState()
2. In Location.Address it is showing that address module is not loaded.
   <br><br>
   Location.requestPermissionsAsync() has been deprecated. https://docs.expo.dev/versions/latest/sdk/location/#locationrequestpermissionsasync
   <br>In that case you have to use In that case you have to use requestForegroundPermissionsAsync or requestBackgroundPermissionsAsync instead of that.
   <br>
   <br>
   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.
   <br>
   <br>
   1 . initialize these states variables where you wants to request permissions.

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

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

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" },
});