Reactnative Issue - api

Question

I have a very simple login screen where the user enters userid and password. when the user clicks on login button then flow moves to next screen if entered userid/password combination is correct.
on click of login button, I am calling an API with userid and password as input. API returns a count of matching records from DB in JSON format.If the count is >0 then login is successful.
Issue: I have to click login button twice. when I click on login button nothing happens but if I click it again then I get fail message or move to the second screen depending on userid/password combination. I am copying my code below. I'll appreciate any help.
import React, { Component } from 'react';
import {
AppRegistry,
View,
Image,
StyleSheet,
KeyboardAvoidingView,
TextInput,
TouchableOpacity,
Text,
StatusBar,
Alert
} from 'react-native';
import {
StackNavigator
} from 'react-navigation';
export default class Login extends Component {
constructor(props) {
super(props)
this.state = {
email: '',
password: '',
uCount: -1,
data: []
};
}
getData(){
var url="https://myurl/verifySubscription.php?email=" + this.state.email + "&password=" + this.state.password;
console.log("URL:", url);
return fetch(url)
.then((response) => response.json())
.then((responseJson) => {
this.setState({
uCount: responseJson.count
})
})
.catch((error) => {
console.error(error);
});
}
async _onPressButton() {
await this.getData();
console.log("uCount:", this.state.uCount);
if (this.state.uCount < 1) {
Alert.alert('Login Failed: Incorrect email or password')
} else {
this.props.navigation.navigate('LoginSuccess', { email: this.state.email, password: this.state.password})
}
}
render() {
return (
<KeyboardAvoidingView behavior="padding" style={styles.wrapper}>
<View style={styles.topView}>
<Image style={styles.imageStyle}
source={require('../images/main.jpg')}
/>
</View>
<View style={styles.bottomView}>
<StatusBar
barStyle="light-content"
/>
<TextInput style={styles.Input}
placeholder="Email"
placeholderTextColor="rgba(255,255,255,0.7)"
keyBoardType='email-address'
returnKeyType="next"
autoCapitalize="none"
autoCorrect={false}
onSubmitEditing={() => this.passwordInput.focus()}
onChangeText={(text) => this.setState({email:text})}
/>
<TextInput style={styles.Input}
placeholder="Password"
placeholderTextColor="rgba(255,255,255,0.7)"
returnKeyType="go"
secureTextEntry
autoCapitalize="none"
autoCorrect={false}
ref={(next) => this.passwordInput = next}
onChangeText={(text) => this.setState({password:text})}
/>
<TouchableOpacity style={styles.button1Container} onPress={ this._onPressButton.bind(this) }>
<Text style={styles.buttonText}>
Login
</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button2Container}>
<Text style={styles.buttonText}>
Sign up
</Text>
</TouchableOpacity>
</View>
</KeyboardAvoidingView>
);
}
}
const styles = StyleSheet.create({
wrapper: {
backgroundColor: '#4A7AA5',
flex: 1
},
topView: {
flexGrow: 1
},
imageStyle: {
width: null,
flex: 1
},
bottomView: {
padding: 20
},
Input: {
height:40,
backgroundColor: 'rgba(255,255,255,0.3)',
marginBottom: 10,
color: '#FFF',
paddingHorizontal: 10
},
button1Container: {
backgroundColor: 'rgba(200,200,255,0.3)',
padding: 10
},
buttonText: {
textAlign: 'center',
color: '#FFF',
fontWeight: '700'
},
button2Container: {
padding: 10
}
});

Answer 1

Issue maybe related to the async process when you press the button. fetch will return a promise which then can be resolve after response is completed. Try this, not using await (es2017), just es6.
getData(){
var url="https://myurl/verifySubscription.php?email=" + this.state.email +
"&password=" + this.state.password;
console.log("URL:", url);
return fetch(url);
}
_onPressButton() {
this.getData().then((response) => response.json())
.then((responseJson) => {
const cnt = responseJson.cnt;
if (cnt < 1) {
Alert.alert('Login Failed: Incorrect email or password')
} else {
this.props.navigation.navigate('LoginSuccess', { email:
this.state.email, password: this.state.password})
}
});
}