Loading Component in React native with Firebase and redux - reactjs

Question

Click here to View Page
I need your help here. I want to add Activity indicator with timeout after Login button is pressed but login button is already configured to loginUser() function! I just need to show activity indicator for some secs and login the user when button is pressed! Thankyou I been trying for week. I'm helpless. So please help me!
import React, { Component } from 'react';
import { StyleSheet, View, Text, Alert, TouchableOpacity, ActivityIndicator } from 'react-native';
import { Form, Input, Item, Button, Label, Body, } from 'native-base';
import { login } from "../actions";
import { Actions } from "react-native-router-flux";
import { connect } from "react-redux";
import { colors } from "../../../colors";
class UserLoginForm extends Component {
constructor(props) {
super(props);
this.state = {
email: '',
password: '',
};
this.loginUser = this.loginUser.bind(this);
this.loginSuccessCallback = this.loginSuccessCallback.bind(this);
this.loginErrorCallback = this.loginErrorCallback.bind(this);
}
forgotPassword() {
Actions.ForgotPassword();
};
loginSuccessCallback(user) {
};
loginErrorCallback(error) {
switch (error.code) {
case 'auth/user-not-found':
Alert.alert('Error', 'User not found. New user? SignUp');
break;
case 'auth/wrong-password':
Alert.alert('Error', 'Wrong Password');
break;
}
};
loginUser() {
const { email, password } = this.state;
const data = { email, password };
this.props.dispatch(login(data, this.loginSuccessCallback, this.loginErrorCallback));
};
render() {
return (
<View style={styles.container}>
<Form>
<Item floatingLabel>
<Label>Email</Label>
<Input
autoCorrect={false}
autoCapitalize="none"
returnKeyType="done"
onChangeText={(email) => this.setState({ email })} />
</Item>
<Item floatingLabel>
<Label>Password</Label>
<Input
secureTextEntry={true}
autoCorrect={false}
autoCapitalize="none"
returnKeyType="go"
onSubmitEditing={this.loginUser}
onChangeText={(password) => this.setState({ password })} />
</Item>
<Button style={styles.loginButton}
full
rounded
onPress={this.loginUser}>
<Text style={{ fontWeight: 'bold', color: 'white', fontSize: 20 }}>Login</Text>
</Button>
<TouchableOpacity onPress={this.forgotPassword}>
<Text style={styles.forgotButton}>Forgot Password?</Text>
</TouchableOpacity>
<--------------Loading Component ------------------>
<View style={styles.loading}>
<ActivityIndicator
animating={this.state.animating}
style={[{ height: 80 }]}
color="#C00"
size="large"
hidesWhenStopped={true} />
<Text style={{ color: 'red' }}>loading..</Text>
</View>
<------------------------------------------------------------------->
</Form>
</View>
);
}
}
function mapStateToProps(state, props) {
return {
user: state.authReducer.user,
};
}
export default connect(
mapStateToProps,
null
)(UserLoginForm);
const styles = StyleSheet.create({
container: {
marginTop: 10
},
loginButton: {
alignSelf: 'center',
marginTop: 10,
width: 250
},
forgotButton: {
alignSelf: 'center',
marginTop: 15,
color: colors.white
},
loading: {
position: 'absolute',
opacity: 0.5,
height: '50%',
width: '35%',
backgroundColor: 'black',
alignSelf: 'center',
alignItems: 'center',
borderBottomLeftRadius: 20,
borderBottomRightRadius: 20,
borderTopRightRadius: 20,
borderTopLeftRadius: 20,
}
})
Login function goes here..
<--------------------------------------------------------------------------------------------------->
import * as t from "./actionTypes";
import {auth} from "../../config/firebase";
import * as api from "./api";
export function register(data, successCB, errorCB) {
return dispatch => {
api.register(data, function (success, data, error) {
if (success) {
successCB(data);
} else if (error) errorCB(error);
});
};
}
export function checkLoginStatus(callback) {
return dispatch => {
auth.onAuthStateChanged(authUser => {
let isLoggedIn = authUser !== null;
if (isLoggedIn) {
api.getUser(authUser, function (success, {exists, user}, error) {
if (success) {
if (exists) {
dispatch({type: t.USER_LOGGED_IN, data: user});
callback(true, 'user');
}
else {
api.getEmployee(authUser, function (success, {exists, user}, error) {
if (success && exists) {
dispatch({type: t.EMPLOYEE_LOGGED_IN, data: user});
callback(true, 'employee');
} else {
dispatch({type: t.LOGGED_OUT});
callback(false);
}
})
}
} else if (error) {
//unable to get user
dispatch({type: t.LOGGED_OUT});
callback(false);
}
});
} else {
dispatch({type: t.LOGGED_OUT});
callback(false);
}
});
};
}
export function login(data, successCB, errorCB) {
return dispatch => {
api.login(data, function (success, data, error) {
if (success) {
if (data.exists) dispatch({type: t.USER_LOGGED_IN, data: data.user});
successCB(data);
} else if (error) errorCB(error);
});
};
}
export function logout(errorCB) {
return dispatch => {
api.logout(function (success, data, error) {
if (success) {
dispatch({type: t.LOGGED_OUT});
} else if (error) errorCB(error);
});
};
}
export function loginEmployee(data, successCB, errorCB) {
return dispatch => {
api.loginEmployee(data, function (success, data, error) {
if (success) {
if (data.exists) dispatch({type: t.EMPLOYEE_LOGGED_IN, data: data.user});
successCB(data);
} else if (error) errorCB(error);
});
};
}