Run componentDidMount function again React Native - react-native

Question

i try fetch info from server and while fetching not complete show searching Component and when fetch done show information...everything is OK...But when NET offline show searching component and when turning on NET i want show a button "Try Again" and when click on "FetchData" function run again.
constructor(){
super();
this.state={
isLoading:true,
dataSource:null,
dataError:false
}
}
componentDidMount(){
FetchData = () => {
return fetch(SuperUrl+'/info')
.then((response)=>response.json())
.then((responseJson)=>{
this.setState({
isLoading:false,
dataSource: responseJson
})
})
.catch((error)=>{this.setState({dataError:true})})
}
FetchData()
}
render() {
if(this.state.dataError)
{
<View>
<Buttom onpress={()=>{FetchData()}}>
<Text>Try Again</Text>
<Button>
</View>
}
if(this.state.isLoading)
{
return(
<Container>
<StatusBar backgroundColor={'#3949ab'}/>
<Searching/>
<JaFooter list={{backgroundColor:'#3949ab', color:'#ffffff'}}/>
</Container>
)
}
else
{
let regionName = this.state.dataSource.map((value,key)=>{
return(
<ListItem key={key} >
<Text key={key} style={styles.cityName}>{value.name}</Text>
</ListItem>
)
})

Answer 1

Your title is very misleading as componentDidMount should run once. What you want is totally different so I'll explain. Since you are asking for something that goes against the pattern of RN you are risking getting your answer closed. Anyway..
Fetch does not support a timeout natively. But you can workaround it by running two promises. One for your fetch, and another for the timeout. This is pseudo code, you are gonna have to learn about Promise.race and how setTimeout works.
const promise1 = fetch;
const promise2 = new Promise((resolve, reject) => {
setTimeout(() => reject(new TimeoutError()), 30000);
})
Promise.race([promise1, promise2])
.then(() => {
//You got a response from the server
})
.catch(err => {
//Probably timeout
if (err.code == 'Timeout')
this.setState({loading: false, showTryAgain: true})
})
Promise.race will run both in parallel but if the network request for the fetch ends first, it will ignore the timeout which is what you want.