With React Native you use ActivityIndicatorIOS to show or hide a spinner. In this lesson we combine ActivityIndicatorIOS with our HTTP requests in order to give the user feedback about data loading.
What you want is when calling the fetch api, showing the loading spinner. If success or not found user will hide the loadin spinner. For user not found, will show the error message.
import React, { Component, PropTypes } from 'react';
import { View, Text, StyleSheet, TextInput, TouchableHighlight, ActivityIndicatorIOS } from 'react-native';
import api from '../utils/api';
import Dashboard from './Dashboard';
var style = StyleSheet.create({
mainContainer: {
flex: ,
padding: ,
marginTop: ,
flexDirection: 'column',
justifyContent: 'center',
backgroundColor: '#48BBEC'
},
title: {
marginBottom: ,
fontSize: ,
textAlign: 'center',
color: '#fff'
},
searchInput: {
height: ,
padding: ,
marginRight: ,
fontSize: ,
borderWidth: ,
borderColor: 'white',
borderRadius: ,
color: 'white'
},
buttonText: {
fontSize: ,
color: '#111',
alignSelf: 'center'
},
button: {
height: ,
flexDirection: 'row',
backgroundColor:'#8fefcc',
borderColor:'white',
borderWidth:,
borderRadius:,
marginBottom:,
alignSelf:'stretch',
justifyContent:'center'
}
});
export default class Main extends Component{
constructor(props){
super(props)
this.state = {
username: '',
isLoading: false,
error: false
};
}
handleChange(event){
this.setState({
username: event.nativeEvent.text
})
}
handleSubmit(event){
//update our indicatorIOS spinner
this.setState({
isLoading: true
});
//fetch data from github
api.getBio(this.state.username)
.then( (res) => {
if(res.message === "Not Found"){
this.setState({
error: 'User not found',
isLoading: false
})
}else{
//Pass in a new router component
this.props.navigator.push({
title: res.name || 'Selet an Option',
component: Dashboard,
passProps: {userInfo: res}
});
//Clean the search input and loading
this.setState({
isLoading: false,
error: false,
username: 'User not found'
});
}
})
}
render(){
const showError = (
this.state.error ? <Text>User not found</Text>: <View></View>
);
return (
<View style={style.mainContainer}>
<Text style={style.title}>Search for a Github User</Text>
<TextInput
style={style.searchInput}
value={this.state.username}
onChange={this.handleChange.bind(this)}
/>
<TouchableHighlight
style={style.button}
onPress={this.handleSubmit.bind(this)}
underlayColor="white"
>
<Text style={style.buttonText}>SEARCH USER</Text>
</TouchableHighlight>
<ActivityIndicatorIOS
animating={this.state.isLoading}
size="large"
color="#111"
/>
{showError}
</View>
)
}
}