How to show ActivityIndictor when data is fetched in react native - reactjs

Question

I have a react native app with PHP backEnd (SQL server DB)
Well ,As you see in pictures ,I have a form where user can enter month and year and search DB's information ;
My code do:
1/ if a variable is setting true => I will get just my form
2/ if I click on button => variable became false and show the form and data ;
My problem is when I click on button ,it takes some time to show results so in this case I wan add an ActivityIndicator as a sign that something is working behind ;
This is my code :
export default class FirstPage extends React.Component {
constructor(props){
super(props);
this.state ={
isLoading: true,
dataSource: [],
month:'',
year:'',
}
}
afficher = () =>{
this.setState({
Loading: false})
const month = this.state.month;
const year= this.state.year;
return fetch('http://192.168.1.2:80/netOne/fetch.php',{
method:'post',
header:{
'Accept':'application/json',
'Content-type' :'application/json'
},
body:JSON.stringify({mois:month,annee:year})})
.then((response) => response.json())
.then((responseJson) => {
if(responseJson=="null"){
}
else {this.setState({
isLoading: false,
dataSource: responseJson,});}}
)
.catch((error) =>{console.error(error);});
this.setState({
month:'',
year:'',})
}
render() {
if(this.state.isLoading){
return(
<View style={{flex: 1}}>
<View style={{alignItems: 'center' }}>
<View style={{marginTop:30,width:Dimensions.get("window").width*0.8,backgroundColor:'#ffffff',height:150}}>
<Text style={{marginTop:20,marginLeft:20,color:'grey'}}> Month :</Text>
<TextInput placeholder="Enter value" style={{marginLeft:20,paddingLeft:5,marginRight:20,borderBottomColor: '#f2f2f2',borderBottomWidth: 1,}} onChangeText= {month=>this.setState({month})}/>
<Text style={{marginTop:20,marginLeft:20,color:'grey'}}> Year :</Text>
<TextInput placeholder="Enter value" style={{marginLeft:20,marginRight:20,paddingLeft:5,borderBottomColor: '#f2f2f2',borderBottomWidth: 1,}} onChangeText= {year=>this.setState({year})}/>
</View>
<TouchableOpacity style={{borderRadius:12,width:Dimensions.get("window").width*0.8,backgroundColor:'#ff9900',height:50,marginTop:10}} onPress={this.afficher}>
<Text style={{marginTop:15,color:'white',textAlign:'center',fontSize:14}}>Afficher</Text>
</TouchableOpacity>
</View>
</View>
)}
return (
<ScrollView style={{ flex: 1,backgroundColor:'#f2f2f2'}}>
<View style={{alignItems: 'center' }}>
<View style={{marginTop:30,width:Dimensions.get("window").width*0.8,backgroundColor:'#ffffff',height:150}}>
<Text style={{marginTop:20,marginLeft:20,color:'grey'}}> Month :</Text>
<TextInput placeholder="Enter value" style={{marginLeft:20,paddingLeft:5,marginRight:20,borderBottomColor: '#f2f2f2',borderBottomWidth: 1,}} onChangeText= {month=>this.setState({month})}/>
<Text style={{marginTop:20,marginLeft:20,color:'grey'}}> Year :</Text>
<TextInput placeholder="Enter value" style={{marginLeft:20,marginRight:20,paddingLeft:5,borderBottomColor: '#f2f2f2',borderBottomWidth: 1,}} onChangeText= {year=>this.setState({year})}/>
</View>
<TouchableOpacity style={{borderRadius:12,width:Dimensions.get("window").width*0.8,backgroundColor:'#ff9900',height:50,marginTop:10}} onPress={this.afficher}>
<Text style={{marginTop:15,color:'white',textAlign:'center',fontSize:14}}>Afficher</Text>
</TouchableOpacity>
</View>
<View style={{ paddingLeft:10 ,paddingTop:10 ,paddingBottom:10}}>
<View style={{ flexDirection:'row' }}>
<Text style={styles.head}> Client </Text>
<Text style={styles.head1}>Mois</Text>
<Text style={styles.head2}>Annee</Text>
<Text style={styles.head3}>ChiffreAffaire</Text>
</View>
<FlatList
data={this.state.dataSource}
renderItem={({item}) =><Item title={item.M500_NOM} title1={item.Mois} title2={item.Annee} title3={item.ChiffreAffaire}/>}
ListEmptyComponent={this._listEmptyComponent}
keyExtractor={(item, index) => index.toString()}
/>
</View>
</ScrollView>
);
}
}

Answer 1

Here is an updated version of your code.
return (
<ScrollView style={{ flex: 1,backgroundColor:'#f2f2f2'}}>
<View style={{alignItems: 'center' }}>
<View style={{marginTop:30,width:Dimensions.get("window").width*0.8,backgroundColor:'#ffffff',height:150}}>
<Text style={{marginTop:20,marginLeft:20,color:'grey'}}> Month :</Text>
<TextInput placeholder="Enter value" style={{marginLeft:20,paddingLeft:5,marginRight:20,borderBottomColor: '#f2f2f2',borderBottomWidth: 1,}} onChangeText= {month=>this.setState({month})}/>
<Text style={{marginTop:20,marginLeft:20,color:'grey'}}> Year :</Text>
<TextInput placeholder="Enter value" style={{marginLeft:20,marginRight:20,paddingLeft:5,borderBottomColor: '#f2f2f2',borderBottomWidth: 1,}} onChangeText= {year=>this.setState({year})}/>
</View>
<TouchableOpacity style={{borderRadius:12,width:Dimensions.get("window").width*0.8,backgroundColor:'#ff9900',height:50,marginTop:10}} onPress={this.afficher}>
<Text style={{marginTop:15,color:'white',textAlign:'center',fontSize:14}}>Afficher</Text>
</TouchableOpacity>
{(this.state.dataSource.length != 0) </View>
<View style={{ paddingLeft:10 ,paddingTop:10 ,paddingBottom:10}}>
<View style={{ flexDirection:'row' }}>
<Text style={styles.head}> Client </Text>
<Text style={styles.head1}>Mois</Text>
<Text style={styles.head2}>Annee</Text>
<Text style={styles.head3}>ChiffreAffaire</Text>
</View>
<FlatList
data={this.state.dataSource}
renderItem={({item}) =><Item title={item.M500_NOM} title1={item.Mois} title2={item.Annee} title3={item.ChiffreAffaire}/>}
ListEmptyComponent={this._listEmptyComponent}
keyExtractor={(item, index) => index.toString()}
/>
</View>}
{this.state.loading &&
<ActivityIndicator/>
}
</ScrollView>
);