I am new to React Native and Redux, currently am working on delivery app for android. Problem is that everytime i run code on android emulator the blank screen is showing:https://i.stack.imgur.com/A0lk2.png. I tried on my phone also same problem, but debugger is not showing any errors. Here is my code:
App.js
import React, { Component } from 'react';import { PersistGate } from 'redux-persist/integration/react';import { persistStore } from 'redux-persist';import HomeScreen from "./src/screens/HomeScreen";import LoginScreen from "./src/screens/LoginScreen";import RegistrationScreen from "./src/screens/RegistrationScreen";import { Provider } from './src/context/AuthContext';import LoadingScreen from './src/screens/LoadingScreen';import store from './store';import { connect } from 'react-redux';import { NavigationContainer } from '@react-navigation/native';import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'const BottomTabNavigator = createBottomTabNavigator();class Appliaction extends Component { componentWillMount() { this.props.getLocalization(this.props.token); } render() { return ( BottomNavigation = () => {<NavigationContainer style={{ flex: 1 }}><BottomTapBarNavigator.Navigator><BottomTabNavigator.Screen name='Register' component={RegistrationScreen} options={{ title: "" }} /><BottomTabNavigator.Screen name='Login' component={LoginScreen} options={{ title: "" }} /><BottomTabNavigator.Screen name='Home' component={HomeScreen} options={{ title: "" }} /></BottomTapBarNavigator.Navigator></NavigationContainer > } ) }}const mapStateToProps = (state) => { return { localizationNew: state.localizationReducer.localizationNew, token: state.ClientReducer.token, loading: state.generalReducer.loading, };};const mapDispacthToProps = (dispacth) => { return { getLocalization: token => dispacth(getLocalization(token)) }}const ConnectedApp = connect(mapStateToProps, mapDispacthToProps)(Appliaction);const persistor = persistStore(store);const App = () => { return (<Provider store={store} ><PersistGate loading={null} persistor={persistor}><ConnectedApp /></PersistGate ></Provider > );};export default App;
Store.js
import { applyMiddleware, createStore, combineReducers } from 'redux';import { createLogger } from 'redux-logger';import thunkMiddleware from 'redux-thunk';import ClientReducer from './src/reducers/ClientReducer';const middleware = applyMiddleware(thunkMiddleware, createLogger());export default createStore(ClientReducer, middleware);
ClientReducer.js
import { Alert } from 'react-native';import { navigator } from '../navigatorRef';import { CLIENT } from '../constants/ActionTypeConstants';import { StackActions } from 'react-navigation';const initalState = { username: '', email: '', token: '', signupSuccessful: false};const ClientReducer = (state = initalState, action) => { switch (action.type) { case CLIENT.LOGIN: { return { ...state, token: action.token }; } case CLIENT.REGISTER: { return { ...state, signupSuccessful: true } } case CLIENT.RESET_REGISTER: { return { ...state, signupSuccessful: false } } case CLIENT.LOGOUT: { const resetAction = StackActions.reset({ index: 0, actions: [navigator.navigate({ routeName: 'Home' })], }); navigator.dispatch(resetAction); return { ...state, token: '' }; } case CLIENT.REMOVE_TOKEN: { if (action.status === 401) { Alert.alert('Your session has expired'); const resetAction = StackActions.reset({ index: 0, actions: [navigator.navigate({ routeName: 'Home' })], }); navigator.dispatch(resetAction); } return { ...state, token: '' }; } default: { return state; } }};export default ClientReducer;
LoginScreen.js
import React, { Component } from 'react';import { StyleSheet, View } from 'react-native';import { connect } from 'react-redux';import { StackActions, NavigationActions } from 'react-navigation';import { LoginButton } from '../components/LoginButton';import { login } from '../actions/ClientAction';import { registerButtonOpen, registerButtonClosed } from "../actions/ActionTypes";import { strings } from '../components/string';const styles = StyleSheet.create({ container: { flex: 1 }, contentContainerStyle: { alignContent: 'center', alignItems: 'center', justifyContent: 'center' }});class LoginScreen extends Component { constructor(props) { super(props); this.state = { email: '', password: '', disabled: false }; this.handleEmailChange = this.handleEmailChange.bind(this); this.handlePasswordChange = this.handlePasswordChange.bind(this); this.loginButtonPress = this.loginButtonPress.bind(this); } handleEmailChange = (event) => { this.setState({ email: event }); }; handlePasswordChange = (event) => { this.setState({ password: event }); }; loginButtonPress = async () => { await this.setState({ disabled: true }); this.props.registerButtonOpen(); await this.props.login({ email: this.state.email, password: this.state.password }); if (this.props.token) { const resetAction = StackActions.reset({ index: 0, actions: [NavigationActions.navigate({ routeName: "Main" })] }); await this.props.getAllCars(this.props.token); navigationService.dispacth(resetAction); } this.props.registerButtonClosed(); }; render() { const isEnabled = this.state.email.length > 0 && this.state.password.length > 0; return (<View style={styles.container}><Input placeholder={strings.login.email} value={this.state.email} onChangeText={this.handleEmailChange} /><Input placeholder={strings.login.password} value={this.state.password} onChangeText={this.handlePasswordChange} /><LoginButton onPress={this.loginButtonPress} disabled={!isEnabled || this.state.disabled} /></View> ); }}const mapStateToProps = (state) => { return { token: state.clientReducer.token };};const mapDispatchToProps = (dispacth) => { return { login: data => dispacth(login(data)), registerButtonOpen: () => dispacth(registerButtonOpen()), registerButtonClosed: () => dispacth(registerButtonClosed()) };};export default connect(mapStateToProps, mapDispatchToProps)(LoginScreen);// import React, { useState, useContext } from "react";// import { StyleSheet, View, TouchableOpacity, AsyncStorage } from "react-native";// import { Text, Input, Button } from 'react-native-elements';// import tracker from '../../api/tracker';// import Spacer from '../components/Spacer';// import { Context as AuthContext } from '../context/AuthContext';// import { NavigationEvents } from 'react-navigation';// const LoginScreen = ({ navigation }) => {// const { state, signin, clearErrorMessage } = useContext(AuthContext);// const [email, setEmail] = useState('');// const [password, setPassword] = useState('');// return (// <View style={styles.container}>// <NavigationEvents// onWillBlur={clearErrorMessage}// />// <Spacer />// <Input// label="Email/Username: "// value={email}// onChangeText={setEmail}// />// <Spacer />// <Input// label="Password: "// secureTextEntry={true}// value={password}// onChangeText={setPassword}// />// {state.errorMessage ? <Text style={{ color: 'red' }}>{state.errorMessage}</Text> : null}// <Spacer />// <Spacer />// <Button// title={'Login'}// onPress={() => signin({ email, password })}// />// <Spacer />// <TouchableOpacity onPress={() => { navigation.navigate('Register') }}>// <Spacer>// <Text style={styles.link}>Don't have an account? Register now!</Text>// </Spacer>// </TouchableOpacity>// <TouchableOpacity onPress={() => { navigation.navigate('Account') }}>// <Spacer>// <Text style={styles.link}>Go to Account screen!</Text>// </Spacer>// </TouchableOpacity>// </View>// )// }// LoginScreen.navigationOptions = () => {// return {// headerShown: false// };// };// const styles = StyleSheet.create({// container: {// flex: 1,// //alignItems: 'center',// justifyContent: 'center',// backgroundColor: '#ecf0f1',// marginBottom: 100// },// link: {// color: 'blue'// }// });// export default LoginScreen;
RegistrationScreen.js
import React, { Component } from 'react';import { connect } from 'react-redux';import { StackActions } from 'react-navigation';import { NavigationEvents } from "react-navigation";import { StyleSheet, View, Alert } from 'react-native';import { Button, Input } from 'react-native-elements';import { register, resetRegister } from '../actions/ClientAction';import { registerButtonOpen, registerButtonClosed } from "../actions/ActionTypes";import { REGISTER_BUTTON } from '../constants/ActionTypeConstants'import { ClientReducer } from '../reducers/ClientReducer';class RegistrationScreen extends Component { constructor(props) { super(props); this.state = { firstName: '', userName: '', email: '', address: '', password: '', confirmPassword: '' }; this.handleFirstNameChange = this.handleFirstNameChange.bind(this); this.handleUserNameChange = this.handleUsertNameChange.bind(this); this.handleEmailNameChange = this.handleEmailNameChange.bind(this); this.handlePasswordNameChange = this.handlePasswordNameChange.bind(this); this.handleConfirmPasswordNameChange = this.handleConfirmPasswordNameChange.bind(this); this.handleAdressNameChange = this.handleAdressNameChange.bind(this); this.registerButton = this.registerButton.bind(this); this.validateForm = this.validateForm.bind(this); } handleFirstNameChange = (event) => { this.setState({ firstName: event }); }; handleUserNameChange = (event) => { this.setState({ userName: event }) }; handleEmailNameChange = (event) => { this.setState({ email: event }) }; handlePasswordNameChange = (event) => { this.setState({ password: event }) }; handleConfirmPasswordNameChange = (event) => { this.setState({ confirmPassword: event }) }; registerButton = async () => { if (this.validateForm()) { this.props.registerButtonOpen(); await this.props.register({ firstName: this.props.firstName, userName: this.props.userName, email: this.props.email, address: this.props.address, password: this.props.password }); this.props.registerButtonClosed(); if (this.props.registerSuccess) { Alert.alert(strings.register.alerts.registerSuccessful); const resetAction = StackActions.reset({ actions: [NavigationEvents.navigate({ routeName: 'HomeScreen' })] }); this.props.resetRegister(); NavigationService.dispacth(resetAction); } } }; validateForm = () => { if (!this.state.firstName) { Alert.alert(strings.alerts.firstNameMandatory); return false; } if (!this.state.userName) { Alert.alert(strings.alerts.userNameMandatory); return false; } if (!this.state.email) { Alert.alert(strings.alerts.emailMandatory); return false; } if (!this.state.address) { Alert.alert(strings.alerts.addresMandatory); return false; } if (!this.state.password) { Alert.alert(strings.alerts.passwordandatory); return false; } if (this.state.password !== this.state.confirmPassword) { Alert.alert(strings.alerts.confimPasswordMandatory); return false; } return true; } render() { return (<View style={styles.container}><Input placeholder={strings.registration.firstname} value={this.state.firstName} onChangeText={this.handleFirstNameChange} /><Input placeholder={strings.registration.username} value={this.state.userName} onChangeText={this.handleUserNameChange} /><Input placeholder={strings.registration.email} value={this.state.email} onChangeText={this.handleEmailNameChange} /><Input placeholder={strings.registration.adress} value={this.state.address} onChangeText={this.handleAdressNameChange} /><Input placeholder={strings.registration.password} value={this.state.password} onChangeText={this.handlePasswordNameChange} /><Input placeholder={strings.registration.confirm} value={this.state.confirmPassword} onChangeText={this.handleConfirmPasswordNameChange} /><registerButton onPress={this.registerButton} /></View> ); }}const mapStateToProps = (state) => { return { registerSuccessful: state.ClientReducer.registerSuccessful };};const mapDispatchToProps = (dispacth) => { return { register: data => dispacth(register(data)), resetRegister: () => dispacth(resetRegister()), registerButtonOpen: () => dispacth(registerButtonOpen()), registerButtonClosed: () => dispacth(registerButtonClosed()) };};const styles = StyleSheet.create({ container: { flex: 1 }, contentContainerStyle: { alignContent: 'center', alignItems: 'center', justifyContent: 'center' }});export default connect(mapStateToProps, mapDispatchToProps)(RegistrationScreen);// import React, { useState, useContext } from "react";// import { StyleSheet, View, TouchableOpacity } from "react-native";// import { Text, Input, Button } from 'react-native-elements';// import tracker from '../../api/tracker';// import Spacer from '../components/Spacer';// import { Context as AuthContext } from '../context/AuthContext';// import { NavigationEvents } from "react-navigation";// const RegistrationScreen = ({ navigation }) => {// const { state, signup, clearErrorMessage } = useContext(AuthContext);// const [firstName, setFirstName] = useState('');// const [userName, setUserName] = useState('');// const [password, setPassword] = useState('');// const [email, setEmail] = useState('');// const [address, setAddress] = useState('');// return (// <View style={styles.container}>// <NavigationEvents// onWillBlur={clearErrorMessage}// />// <Text h4>Fill the form</Text>// <Spacer />// <Input// placeholder={'Enter full name'}// value={firstName}// onChangeText={setFirstName}// />// <Spacer />// <Input// placeholder={'Enter username'}// value={userName}// onChangeText={setUserName}// />// <Spacer />// <Input// placeholder={'Enter password'}// secureTextEntry={true}// value={password}// onChangeText={setPassword}// />// <Spacer />// <Input// placeholder={'Enter email'}// value={email}// onChangeText={setEmail}// />// <Spacer />// <Input// placeholder={'Enter address'}// value={address}// onChangeText={setAddress}// />// {state.errorMessage ? <Text style={{ color: 'red' }}>{state.errorMessage}</Text> : null}// <Spacer />// <Spacer />// <Button// title={'Register'}// onPress={() => signup({ firstName, userName, password, email, address })}// />// <Spacer />// <TouchableOpacity onPress={() => navigation.navigate('Login')}>// <Spacer>// <Text style={styles.link}>Already have an account? Login now!</Text>// </Spacer>// </TouchableOpacity>// <Spacer />// </View>// )// }// RegistrationScreen.navigationOptions = () => {// return {// headerShown: false// };// };// const styles = StyleSheet.create({// container: {// flex: 1,// alignItems: 'center',// justifyContent: 'center',// backgroundColor: '#ecf0f1',// },// link: {// color: 'blue'// }// });// export default RegistrationScreen;
Thanks in advance :) .
