React Native - Each action takes lot of time to perform - reactjs

Question

I have created a Login Page in my app like always. I created and when I click on Login button it takes around 30 seconds for loader to appear and meanwhile my button get hanged and blank. I don't know why my code is behaving like this.
Validate Login when click login button and show loader on button but it takes around 30 minutes
const validateLogin = () => {
console.log('validate login');
setLoader(true);
if (userName.length === 0 || password.length === 0) {
setLoader(false);
Alert.alert('Username or password cannot be empty.');
} else {
if (!netInfo.isConnected) {
setLoader(false);
Alert.alert('You are not connected to internet. Please try again.');
} else {
const token = JWTToken(userName);
getUser(token);
}
}
};
API Code
const getUser = JWTToken => {
console.log('get use');
var axios = require('axios');
var data = JSON.stringify({
username: userName.toLocaleLowerCase(),
password: password,
});
console.log('signin ', data);
var config = {
method: 'post',
url: BASE_URL + GET_USER,
headers: {
'x-jwt-token': JWTToken,
'Content-Type': 'application/json',
},
data: data,
};
axios(config)
.then(function (response) {
const res = JSON.stringify(response.data);
UI Code
<KeyboardAvoidingView
style={{
display: 'flex',
height: Dimensions.get('window').height,
width: Dimensions.get('window').width,
}}
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
<SafeAreaView
style={{
flex: 1,
backgroundColor: !darkTheme
? Colors.light.backgrounColor
: Colors.dark.backgrounColor,
justifyContent: 'center',
alignItems: 'center',
}}>
<View
style={{flex: 0.2, alignItems: 'center', justifyContent: 'center'}}>
{!darkTheme ? (
<Image
source={require('../assets/images/logo.png')}
resizeMode="contain"
/>
) : (
<Image
source={require('../assets/images/logo-white.png')}
resizeMode="contain"
/>
)}
</View>
<View
style={{
alignSelf: 'center',
justifyContent: 'center',
flex: 0.7,
width: width * 0.9,
borderRadius: 20,
backgroundColor: Colors.backgroundColor,
marginHorizontal: width * 0.03,
marginBottom: height * 0.05,
padding: width * 0.03,
marginTop: height * 0.02,
}}>
<Text
style={{
color: !darkTheme
? Colors.light.textColor
: Colors.dark.textColor,
fontFamily: 'FiraSans-Medium',
fontSize: 20,
}}>
{strings.login}
</Text>
{/* Email */}
<View
style={{
flexDirection: 'row',
marginTop: height * 0.02,
width: width,
alignItems: 'center',
}}>
{!darkTheme ? (
<Image
source={require('../assets/images/email.png')}
resizeMode="contain"
/>
) : (
<Image
source={require('../assets/images/email-white.png')}
resizeMode="contain"
/>
)}
<TextInput
style={{
fontSize: 16,
fontFamily: 'OpenSans-Regular',
paddingHorizontal: width * 0.01,
color: !darkTheme ? Colors.light.black : Colors.light.white,
borderColor: !darkTheme
? Colors.light.textInputLine
: Colors.dark.white,
borderBottomWidth: 1,
width: width * 0.7,
}}
value={userName}
onChangeText={value => {
setUserName(value);
}}
// onSubmitEditing={() => onEmailSubmit()}
clearButtonMode="always"
multiline={false}
placeholder={'Username'}
placeholderTextColor={
!darkTheme ? Colors.light.black65 : Colors.light.white65
}
autoCapitalize="none"
/>
</View>
{/* Password */}
<View
style={{
flexDirection: 'row',
marginTop: height * 0.04,
width: width,
alignItems: 'center',
}}>
{!darkTheme ? (
<Image
source={require('../assets/images/password.png')}
resizeMode="contain"
/>
) : (
<Image
source={require('../assets/images/password-white.png')}
resizeMode="contain"
/>
)}
<TextInput
style={{
fontSize: 16,
fontFamily: 'OpenSans-Regular',
paddingHorizontal: width * 0.01,
color: !darkTheme ? Colors.light.black : Colors.light.white,
borderColor: !darkTheme
? Colors.light.textInputLine
: Colors.light.white,
borderBottomWidth: 1,
width: width * 0.65,
}}
value={password}
onChangeText={value => {
setPassword(value);
}}
onSubmitEditing={() => checkPassword(password)}
secureTextEntry={securePwd}
placeholder={strings.password}
placeholderTextColor={
!darkTheme ? Colors.light.black65 : Colors.light.white65
}
autoCapitalize="none"
/>
<TouchableOpacity onPress={() => setSecurePwd(!securePwd)}>
{securePwd ? (
!darkTheme ? (
<Image
source={require('../assets/images/eye-close.png')}
resizeMode="contain"
style={{width: 30, height: 20}}
/>
) : (
<Image
source={require('../assets/images/eye-close-white.png')}
resizeMode="contain"
style={{width: 30, height: 20}}
/>
)
) : !darkTheme ? (
<Image
source={require('../assets/images/eye-open.png')}
resizeMode="contain"
style={{width: 30, height: 20}}
/>
) : (
<Image
source={require('../assets/images/eye-open-white.png')}
resizeMode="contain"
style={{width: 30, height: 20}}
/>
)}
</TouchableOpacity>
</View>
<View style={{flexDirection: 'row-reverse'}}>
<TouchableOpacity onPress={goToForgotPwd}>
<Text
style={{
color: Colors.light.blueColor,
fontFamily: 'OpenSans-Regular',
fontSize: 16,
marginRight: width * 0.03,
marginTop: height * 0.005,
}}>
{strings.forgotPassword}
</Text>
</TouchableOpacity>
</View>
{/* sign Up button */}
<View
style={{
width: width * 0.3,
height: height * 0.05,
alignItems: 'center',
justifyContent: 'center',
alignSelf: 'center',
borderRadius: 25,
marginTop: height * 0.07,
backgroundColor: Colors.light.buttonBackground,
}}>
<TouchableOpacity onPress={validateLogin}>
<View>
{!loader ? (
<Text
style={{
color: Colors.light.white,
fontFamily: 'FiraSans-Regular',
fontSize: 17,
}}>
{strings.login}
</Text>
) : (
<ActivityIndicator color={Colors.light.white} />
)}
</View>
</TouchableOpacity>
</View>
</View>
<View
style={{
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
}}>
<Text
style={{
fontFamily: 'OpenSans-Regular',
fontSize: 16,
color: !darkTheme
? Colors.light.placeholderColor
: Colors.light.white,
marginRight: width * 0.01,
}}>
{strings.noSignUp}
</Text>
<TouchableOpacity onPress={goToRegister}>
<Text
style={{
fontFamily: 'OpenSans-Regular',
fontSize: 16,
color: Colors.light.blueColor,
}}>
{strings.register}
</Text>
</TouchableOpacity>
</View>
</SafeAreaView>
</KeyboardAvoidingView>
Please help as I am not able to understand why I am having this issue.