React Native Fetch works only on second click - reactjs

Question

I do app on React Native. The problem is next :
OnPress some element i am trying make request to my server and log answer.
When I click button first time - my log do not show anything , but on second click I see response in the console.
import React from 'react'
import { View, Text, StyleSheet, TextInput , TouchableNativeFeedback , AsyncStorage } from 'react-native'
import {connect} from 'react-redux'
import * as pageActions from '../action/index'
import { bindActionCreators } from 'redux'
import api from '../api'
class Login extends React.Component {
constructor(props){
super(props);
this.state = {
loginAttempt : false,
email : 'admin#mail.ru',
password : 'password',
token : ''
}
}
loginAttempt() {
let email = this.state.email;
let password = this.state.password;
api.login(email,password)
}
render() {
return (
<View style={styles.container}>
<TextInput
placeholder="Email"
style={{height: 50, borderColor: 'gray', borderWidth: 1}}
onChangeText={(value) => this.setState({email : value})}
/>
<TextInput
placeholder="Password"
style={{height: 50, borderColor: 'gray', borderWidth: 1}}
onChangeText={(value) => this.setState({password : value})}
/>
<TouchableNativeFeedback
style={!this.state.loginAttempt ? {'opacity' : 1} : {'opacity' : 0}}
onPress={() => this.loginAttempt()}>
<View>
<Text>Try login</Text>
</View>
</TouchableNativeFeedback>
</View>
)
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}
}
)
My fetch function
login(email,password, callback) {
const API_HEADERS = {
'Accept' : `application/json`,
'Content-Type' : `application/json`
};
let user = {};
user.email = email;
user.password = password;
fetch(`http://myIp:3000/auth/login`, {
method : 'post',
headers : API_HEADERS,
body : JSON.stringify(user)
})
.then((response) => {
if (response.ok) {
return response.json();
} else {
alert(`Wrong data`)
}
})
.then((responseData) => {
console.log(responseData)
})
}
Also wanna add that I using Genymotion as android emul.Another strange thing is that when I press my button first time - nothing happens,but when i press Reload JS , before the component will be unmount , I see my responceData in a console

Answer 1

You should update state, when promise resolved.
.then((responseData) => {
this.setState({
token: responseData.token
});
})
Use catch method:
.then().catch(e => console.log("error: ", e))
Also, where is your alert function? react-native has Alert module.
Alert.alert('any message text');
article about fetch
and this is article using fetch in react-native

Answer 2

Another strange thing is that when I press my button first time
This is very like related to focus.
Try setting keyboardShouldPersistTaps = true for TouchableNativeFeedback