React-Native : how show loading screen before list view populated - react-native

Question

Here is my code .I am using ComponentwillMount Function for API and then using isLoading variable and accordingly displaying the particular view.But its doesnt work... its seems to be I done something wrong please took a glance and help me out I am new to react - native
const UserPage = React.createClass({
getInitialState() {
return {
dataSource: dataSource.cloneWithRows(dataList),
isLoading:true
}
},
componentWillMount() {
SharedPreferences.getItem("sender_id", (value) => {
let user_id = value;
let url = "BaseURL/fetchSendTokens?user_id="+user_id;
fetch(url, {
method: "GET",
headers: {
"Accept": "application/json",
"Content-Type": "application/json",
},
})
.then((response) => response.json())
.then((responseData) => {
if (responseData.responsecode === 1) {
dataList = responseData.data;
this.setState = ({
dataSource: this.state.dataSource.cloneWithRows(dataList),
isLoading:false,
})
}
else {
ToastAndroid.show('Please try again...', ToastAndroid.SHORT);
}
})
.catch(e => {
ToastAndroid.show('Please try again...', ToastAndroid.SHORT);
})
.done();
});
},
renderRow(rowData, sectionID,){
let currentView = (rowData.visitor_profileImageUrl)?
<Image
source={{uri:rowData.visitor_profileImageUrl}}
style={{height:40,width:40,margin:15,borderRadius:100}}
resizeMode="contain"/> :
<Image
source={userprofilepic}
style={{height:40,width:40,margin:15,borderRadius:100}}
resizeMode="contain"/>;
return <View key={ sectionID }>
<View style={{ flex: 1,height:70,flexDirection: 'row'}}>
<View>
{currentView}
</View>
<Text style={{fontSize : 18,marginTop:15,marginLeft:20,color:"black"}} >{ rowData.visitor_name }</Text>
</View>
</View>
},
render() {
let loadingGif = "URL-loading.gif";
let currentView = (this.state.isLoading)?<View style={styles.background}>
<View style={styles.markWrap}>
<Image source={{uri:loadingGif}} style={styles.verifyLogo} resizeMode="contain"/>
</View>
</View>:
<ListView dataSource={this.state.dataSource} renderRow={this.renderRow} enableEmptySections={true}/>;
return(
<View>
{currentView}
</View>
);
},
});

Answer 1

Your problem is a typo:
this.setState = ({
datasource: this.state.dataSource.cloneWithRows(dataList),
isLoading:false,
})
Should be:
this.setState = ({
dataSource: this.state.dataSource.cloneWithRows(dataList),
isLoading:false,
})
Note that you seem to keep around a global dataSource and dataList - that's usually not a good practice. If you need to keep data, use props and callbacks to pass it around, not globals.

Answer 2

constructor(props){
super(props);
this.state = {
loading: true,
}
}
render(){
if (this.props.loading) {
return (<View style={{ flex: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}><ActivityIndicator
animating={states.campaign.loading}
style={[styles.centering, { height: 80 }]}
size="large"
/></View>);
}else{
return (<ListView></ListView>);
}
}