Develop Reference

ERROR TypeError: store.getState is not a function. (In 'store.getState()', 'store.getState' is undefined)

store.js
// Imports: Dependencies
import { createStore } from 'redux';
import employeeDetailReducer from './employeeDetailReducer';
// Middleware: Redux Persist Config
const store = createStore(employeeDetailReducer);
employeeDetailReducer.js
const initialState = {
employeeDetails: {
name: "",
schoolName: "",
companyName: ""
}
};
const employeeDetailReducer = (state = initialState, action) => {
switch (action.type) {
case "SAVE_EMPLOYEE_DETAIL": {
return {
...state,
employeeDetails: action.employeeDetails
}
}
default: {
return state;
}
}
}
export default employeeDetailReducer;
EmployeeDetails.js
import React from "react";
import { View, Text, StyleSheet, SafeAreaView, TextInput, TouchableHighlight } from "react-native";
import { connect } from "react-redux"
import { saveEmployeeDetails } from "./saveEmployeeDetailAction"
class EmployeeDetails extends React.Component {
constructor(props) {
super(props)
this.state = {
name: "",
schoolName: "",
companyName: ""
}
}
render() {
return (
<SafeAreaView style={styles.container}>
<View style={styles.mainView}>
<Text style={styles.mainTextStyle}>Submit Employee Details</Text>
<Text style={styles.textStyle}>Enter Your Name</Text>
<TextInput
style={styles.textInputStyle}
underlineColorAndroid="transparent"
placeholderTextColor="#cccccc"
placeholder="Enter Your Name"
onChangeText={name => {
this.setState({ name: name }, () => {
});
}}
/>
<Text style={styles.textStyle}>Enter Your School Name</Text>
<TextInput
style={styles.textInputStyle}
underlineColorAndroid="transparent"
placeholderTextColor="#cccccc"
placeholder="Enter Your School Name"
onChangeText={schoolName => {
this.setState({ schoolName: schoolName }, () => {
});
}}
/>
<Text style={styles.textStyle}>Enter Your Company Name</Text>
<TextInput
style={styles.textInputStyle}
underlineColorAndroid="transparent"
placeholderTextColor="#cccccc"
placeholder="Enter Your Company Name"
onChangeText={companyName => {
this.setState({ companyName: companyName }, () => {
});
}}
/>
<TouchableHighlight
underlayColor="transparent"
style={styles.buttonStyle}
onPress={() => {
var employeeDetails = {};
employeeDetails.name = this.state.name;
employeeDetails.schoolName = this.state.schoolName;
employeeDetails.companyName = this.state.companyName;
this.props.reduxSaveEmployeeDetail(employeeDetails)
this.props.navigation.navigate("ShowEmployeeDetail")
}}
>
<Text style={styles.buttonTextStyle}>Submit</Text>
</TouchableHighlight>
</View>
</SafeAreaView>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
width: "100%",
height: "100%",
justifyContent: 'flex-start',
alignItems: 'center',
backgroundColor: "lightgray",
paddingBottom: 50
},
mainView: {
width: "100%",
height: "50%",
justifyContent: "flex-start",
alignItems: "center",
padding: 20,
},
textInputStyle: {
width: "100%",
height: 40,
backgroundColor: "white",
paddingHorizontal: 15,
marginBottom: 10,
marginTop: 10
},
textStyle: {
width: "100%",
height: 20,
textAlign: "left",
marginTop: 10,
fontSize: 15
},
mainTextStyle: {
width: "100%",
height: 40,
//paddingHorizontal:15,
textAlign: "center",
marginTop: 10,
marginBottom: 10,
fontSize: 20
},
buttonStyle: {
width: "100%",
height: 40,
borderRadius: 5,
justifyContent: "center",
alignItems: "center",
backgroundColor: "white",
marginTop: 20
},
buttonTextStyle: {
width: "100%",
height: "100%",
textAlign: "center",
marginTop: 10,
fontSize: 18
},
})
const mapDispatchToProps = (dispatch) => {
return {
reduxSaveEmployeeDetail: (employeDetails) => dispatch(saveEmployeeDetails(employeDetails))
}
}
export default connect(
null,
mapDispatchToProps
)(EmployeeDetails);
App.js
import React from 'react';
import { Provider } from 'react-redux';
import store from './store'
import { NavigationContainer } from '#react-navigation/native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
import EmployeeDetali from './EmployeeDetali';
import ShowEmployeeDetail from './ShowEmployeeDetail';
export default App = () => {
return (
<Provider store={store}>
<AppNavigator />
</Provider>
);
};
const Stack = createNativeStackNavigator();
const AppNavigator = () => {
return (
<NavigationContainer initialState="EmployeeDetali">
<Stack.Screen name="EmployeeDetali" component={EmployeeDetali} />
<Stack.Screen name="ShowEmployeeDetail" component={ShowEmployeeDetail} />
</NavigationContainer>
)
}
Error
ERROR TypeError: store.getState is not a function. (In 'store.getState()', 'store.getState' is undefined)
This error is located at:
in Provider (created by App)
in App
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in ReactNativeApp(RootComponent)
I don't know what is wrong here...
I'm also add store like this
import {store} from './store'
It also give me error so how can soul my error where is my error
I don't have any idea for adding redux in class component so how I can do this
I'm learning from here
I also learn redux
so anyone give me suggestion what happing in my code

Do,
export { store };
in store.js.
and,
import {store } from "./store";
in app.js

React Native - Error when i want to navigate

I have an error when i try to navigate using react.navigation.
I also have a visual bug since i've added react navigation.
Here's my code for app.js :
import React, { useState } from "react";
import {
StyleSheet,
Text,
View,
Image,
TextInput,
Button,
TouchableOpacity,
} from "react-native";
import { NavigationContainer } from '#react-navigation/native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
import HomeScreen from './HomeScreen';
import RegisterScreen from './RegisterScreen';
const Stack = createNativeStackNavigator();
export default function App() {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const link = "./Ressources/logoressources.png";
/*async function ClickLogin(){
alert(email);
l
}
async function ClickRegister(){
alert(email);
}
async function ClickMotDePasseOublie(){
alert("Fallait pas l'oublier (Veuillez l'ecrire sur un papier que vous nous remettrez la prochaine fois)");
}*/
//<Stack.Navigator>
/* <Stack.Screen
name="Home"
component={HomeScreen}
/>*/
//</Stack.Navigator>
return (
<NavigationContainer>
<Stack.Navigator
screenOptions={{
headerShown: false
}}>
<Stack.Screen
name="Home"
component={HomeScreen}
/>
<Stack.Screen
name="Register"
component={RegisterScreen}
/>
</Stack.Navigator>
<HomeScreen />
</NavigationContainer>
);
}
Here the code of the HomePage.js :
import React, { useState } from "react";
import RegisterScreen from './RegisterScreen';
import {
StyleSheet,
Text,
View,
Image,
TextInput,
Button,
TouchableOpacity,
} from "react-native";
import { NavigationContainer } from '#react-navigation/native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
//import HomeScreen from './HomeScreen';
const Stack = createNativeStackNavigator();
const HomeScreen = ({navigation}) => {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const link = "./Ressources/logoressources.png";
async function ClickLogin(){
alert(email);
}
async function ClickRegister(){
navigation.navigate("Register");
}
async function ClickMotDePasseOublie(){
alert("Fallait pas l'oublier (Veuillez l'ecrire sur un papier que vous nous remettrez la prochaine fois)");
}
//<Stack.Navigator>
/* <Stack.Screen
name="Home"
component={HomeScreen}
/>*/
//</Stack.Navigator>
return (
<View style={styles.container}>
<Image style={styles.image} source={require(link)} />
<View style={styles.inputView}>
<TextInput
style={styles.TextInput}
placeholder="Email"
placeholderTextColor="#003f5c"
onChangeText={(email) => setEmail(email)}
/>
</View>
<View style={styles.inputView}>
<TextInput
style={styles.TextInput}
placeholder="Mot de passe"
placeholderTextColor="#003f5c"
secureTextEntry={true}
onChangeText={(password) => setPassword(password)}
/>
</View>
<View style={styles.inputViewConfirm}>
<TextInput
style={styles.TextInput}
placeholder="Confirmer mot de passe"
placeholderTextColor="#003f5c"
secureTextEntry={true}
onChangeText={(password) => setPassword(password)}
/>
</View>
<TouchableOpacity onPress={ClickMotDePasseOublie}>
<Text style={styles.forgot_button}>Mot de passe oublié ?</Text>
</TouchableOpacity>
<TouchableOpacity onPress={ClickRegister}>
<Text style={styles.Register_button}>Pas de compte ? Inscrivez-vous !</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.loginBtn}
onPress={ClickLogin}>
<Text style={styles.loginText}>Se connecter</Text>
</TouchableOpacity>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#16a085",
alignItems: "center",
justifyContent: "center",
},
image: {
marginBottom: 10,
height: 200,
},
inputView: {
backgroundColor: "#A6E4E7",
borderRadius: 30,
width: "75%",
height: 45,
marginBottom: 20,
alignItems: "center",
},
inputViewConfirm: {
backgroundColor: "#A6E4E7",
borderRadius: 30,
width: "75%",
height: 45,
marginBottom: 20,
alignItems: "center",
},
TextInput: {
height: 50,
flex: 1,
marginLeft: 10,
},
forgot_button: {
height: 30,
marginBottom: 20,
},
Register_button: {
color: "#4834d4",
height: 30,
marginBottom: 10,
},
loginBtn: {
width: "80%",
borderRadius: 25,
height: 50,
alignItems: "center",
justifyContent: "center",
marginTop: 5,
backgroundColor: "#88FFDD",
},
});
export default HomeScreen;
And the registerScreen Code :
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
const RegisterScreen = ({navigation}) => {
return (
<View style={styles.container}>
<Text>Add friends here!</Text>
</View>
);
}
// ...
export default RegisterScreen;
This is my error :
And now a screenshot of the render of the application :
Do you have a solution for me ?
I Have tryed to remove the top navigation bar to realign the interface but nothing worked.
I also verified my routes for the redirection bug, already searched answers on the internet and in the documentation but nothing got found.

Promise Unhandled Promise Rejection is usually an error from a function and not from your navigation.
From the code you provided, this error might be coming from your alert function.
If your function "alert" is really a promise (I see that you used the "async" word), you should use "await" before the function call:
await alert()
Also, remember to use try/catch when creating the function.
This way you'll be able to catch and console the error to better understand where it comes from.
async function alert() {
try {
// do some async work
await doSomething()
} catch (error) {
// understand error
console.log(error)
// handle error
}
}

React Native Error

I'm trying to use tcomb-form-native in my react-native (android) app but i get this error msg: undefined is not an object (evaluating '_react.PropTypes.string') react native
I used following commands for install tcomb-form-native :
npm install tcomb-form-native
npm install tcomb --save
npm install tcomb-json-schema
this is my code :
Sign in.js
import React, { Component, PropTypes } from 'react';
import {
StyleSheet,
Image,
KeyboardAvoidingView,
Alert,
TouchableHighlight,
} from 'react-native';
import t from 'tcomb-form-native';
const Form = t.form.Form;
const Login = t.struct({
username: t.String,
password: t.String
});
const options = {
fields: {
password: {
type: 'password',
placeholder: 'Password',
},
username: {
placeholder: 'e.g: abc#gmail.com',
error: 'Insert a valid email'
}
}
}
class SignIn extends Component {
onPress() {
const value = this.refs.form.getValue();
if (value) {
console.log(value);
}
};
render() {
return (
<View style={styles.container}>
<Form
ref="form"
type={Login}
options={options}
/>
<Text style={{color: 'blue', marginBottom: 10}}
onPress={() => Linking.openURL('https://www.google.co.in')}>
Forgot Password?
</Text>
<TouchableHighlight style={styles.button} onPress={this.onPress} underlayColor='#99d9f4'>
<Text style={styles.buttonText}>Sign In</Text>
</TouchableHighlight>
</View>
);
}
}
var styles = StyleSheet.create({
container: {
justifyContent: 'center',
marginTop: 50,
padding: 20,
backgroundColor: '#ffffff',
},
title: {
fontSize: 30,
alignSelf: 'center',
marginBottom: 30
},
buttonText: {
fontSize: 18,
color: 'white',
alignSelf: 'center'
},
button: {
height: 36,
backgroundColor: '#48BBEC',
borderColor: '#48BBEC',
borderWidth: 1,
borderRadius: 8,
marginBottom: 10,
alignSelf: 'stretch',
justifyContent: 'center'
}
});
export default SignIn;
Index.js
import React, { Component } from 'react';
import { Scene, Router } from 'react-native-router-flux';
import Page1 from './src/page1';
import Page2 from './src/page2';
import Login from './src/components/login/Login';
import SignUp from './src/components/login/SignUp';
import SignIn from './src/components/login/SignIn';
import GeoMap from './src/components/maps/GeoMap';
class App extends Component {
render() {
return (
<Router>
<Scene key="root">
<Scene key="signIn" component={SignIn} hideNavBar={true} title="Sign In" initial="true"/>
<Scene key="login" component={Login} hideNavBar={true} title="Login" />
<Scene key="p1" component={Page1} title="Page1" />
<Scene key="p2" component={Page2} title="Page2" />
<Scene key="signIn" component={Login} title="Sign In" />
<Scene key="signUp" component={SignUp} title="Sign Up" />
<Scene key="geoMap" component={GeoMap} title="Maps" />
</Scene>
</Router>
);
}
}
export default App;
index.android.js
import {
AppRegistry
} from 'react-native';
import App from './app/index';
AppRegistry.registerComponent('GravitonApp', () => App);

Since React v15.5, React.PropTypes has moved into a different package. You should use the prop-types library instead.
import PropTypes from 'prop-types'
instead of
import { PropTypes } from 'react'

how to get TextInput value without using state in react native android

Here i am trying to get the TextInput value using the const value username and password but i get undefined. How to use state or props in this. I followed this tutorial https://medium.com/react-native-training/react-native-navigator-experimental-part-2-implementing-redux-c6acbf66eca1#.d0vteepp7
import React, { Component } from 'react'
import {
View,
Text,
TextInput,
Alert
} from 'react-native'
import Button from './Button'
const route = {
type: 'push',
route: {
key: 'about',
title: 'About'
}
}
const _values = {
username: '',
password: ''
}
const LoginView = ({_handleNavigate}) => {
const _handlePress = () => {
const {username, password} = _values
console.log('username' + username + "" + password);
return fetch('http://webservice.net/User/ValidateUser', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
UserName: username,
Password: password,
DeviceType: 'Android',
DeviceToken: 'eU0z3IR96Mg:APA91bHNyEw3CcMCHZ-MmGhFVRV8XT292NYzrD2xedMFLXdaJqcJ4DXlBmn'
})
}).then(response => response.json())
.then(response => {
console.log(response);
Alert.alert('Response message is:', response.parse)
_handleNavigate(route)
return response;
})
.catch(error => {
console.error(error);
});
};
return (
<View style={{ flex: 1, backgroundColor: 'steelblue', padding: 10, justifyContent: 'center' }}>
<Text style={{ backgroundColor: 'steelblue', justifyContent: 'center', alignItems: 'center', fontSize: 40, textAlign: 'center', color: 'white', marginBottom: 30 }}>
LOGIN
</Text>
<View style={{ justifyContent: 'center' }}>
<TextInput
style={{ height: 40, margin: 30, color: 'white', fontSize: 20 }}
placeholder='Username' placeholderTextColor='white'
autoFocus={true}
/>
<TextInput
secureTextEntry={true}
style={{ height: 40, margin: 30, color: 'white', fontSize: 20 }}
placeholder='Password' placeholderTextColor='white'
/>
</View>
<Button onPress={() => { _handlePress() } } label='Login' />
</View>
)
}
export default LoginView

You can attach TextInput's onChangeText event' handler and store its argument , like:
<TextInput
onChangeText={(val) => _values.username = val}
...
/>

Open another screen in react-native

I have this screen in react native
import React, { Component } from 'react';
import { AppRegistry,TouchableOpacity, Text ,Button,Image,TextInput,PropTypes,StyleSheet,View,NavigatorIOS,TouchableHighlight} from 'react-native';
class LoginView extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.title}>
HYGEX
</Text>
<View>
<TextInput
placeholder="Username"
style={styles.formInput}
/>
<TextInput
placeholder="Password"
secureTextEntry={true}
style={styles.formInput1}
/>
<TouchableHighlight style={styles.button}
onPress={() => this.move()}>
<Text style={styles.buttonText}>Login</Text>
</TouchableHighlight>
</View>
</View>
);
}
move() {
//what i can do here to go to Socrce screen ???
}
}
Something like login screen, now when I click into TouchableHighlight
I need to open this screen
'use strict';
import React, { Component } from 'react';
import { AppRegistry, ListView, Text, View } from 'react-native';
class HygexListView extends Component {
constructor(props) {
super(props);
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: ds.cloneWithRows([
'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin'
])
};
}
render() {
return (
<View style={{flex: 1, paddingTop: 22}}>
<ListView
dataSource={this.state.dataSource}
renderRow={(rowData) => <Text>{rowData}</Text>}
/>
</View>
);
}
}
module.exports = HygexListView;
I tried to implement move method but I failed! Any idea why?
Does react-native have a method to change the screen when click into TouchableHighlight?

As others pointed out, you have to use an instance of Navigator to transition between screens. Maybe you can have a look at the example apps in the React Native repo. I also find this router package quite easy to set up, and it also includes an example app that you can use as a starting point.
Edit
As a simple example using react-native-router-flux, you can edit the Example.js file in the Example directory to look like this:
import React, {
Component,
} from 'react';
import {
StyleSheet,
Text,
View,
} from 'react-native';
import LoginView from './LoginView';
import HygexListView from './HygexListView';
import {
Scene,
Router,
Actions,
} from 'react-native-router-flux';
const styles = StyleSheet.create({
container: { flex: 1, backgroundColor: 'transparent', justifyContent: 'center',
alignItems: 'center',
},
tabBarStyle: {
backgroundColor: '#eee',
},
tabBarSelectedItemStyle: {
backgroundColor: '#ddd',
},
});
// define this based on the styles/dimensions you use
const getSceneStyle = (/* NavigationSceneRendererProps */ props, computedProps) => {
const style = {
flex: 1,
backgroundColor: '#fff',
shadowColor: null,
shadowOffset: null,
shadowOpacity: null,
shadowRadius: null,
};
if (computedProps.isActive) {
style.marginTop = computedProps.hideNavBar ? 0 : 64;
style.marginBottom = computedProps.hideTabBar ? 0 : 50;
}
return style;
};
class Example extends Component {
render() {
return (
<Router getSceneStyle={getSceneStyle}>
<Scene key="login" component={LoginView} initial={true}/>
<Scene key="hygex" component={HygexListView } />
</Router>
);
}
}
export default Example;
Then, in your component's move function, you have to do the following:
move(){
Actions.hygex(); // This will perform a slide transition, but you can customize it. Have a look at the docs for that.
I have not tested the code, so there might be some typos/missing imports/code, but it should give you an idea of what you have to do.
}

You have to implement a Navigator, which is roughly a component that manages all stuff related to screens, and header bar with back button and etc.
As you are a beginner, I suggest you to look at the docs on this link:
https://facebook.github.io/react-native/docs/navigator.html
Sorry for the short answer, I'm on my phone.
Good luck!

"use strict";
var React = require("react-native");
var {
Component,
StyleSheet,
Text,
TextInput,
TouchableHighlight,
View,
} = React;
var SecureView = require("./SecureView");
class LoginView extends Component {
constructor(props) {
super(props);
this.state = {
username: "",
password: ""
};
}
render() {
return (
<View style={styles.container}>
<Text style={styles.title}>
Sign In
</Text>
<View>
<TextInput
placeholder="Username"
onChange={(event) => this.setState({username: event.nativeEvent.text})}
style={styles.formInput}
value={this.state.username} />
<TextInput
placeholder="Password"
secureTextEntry={true}
onChange={(event) => this.setState({password: event.nativeEvent.text})}
style={styles.formInput}
value={this.state.password} />
<TouchableHighlight onPress={(this.onSubmitPressed.bind(this))} style={styles.button}>
<Text style={styles.buttonText}>Submit</Text>
</TouchableHighlight>
</View>
</View>
);
}
onSubmitPressed() {
this.props.navigator.push({
title: "Secure Page",
component: SecureView,
passProps: {username: this.state.username, password: this.state.password},
});
}
};
var styles = StyleSheet.create({
container: {
padding: 30,
marginTop: 65,
alignItems: "stretch"
},
title: {
fontSize: 18,
marginBottom: 10
},
formInput: {
height: 36,
padding: 10,
marginRight: 5,
marginBottom: 5,
marginTop: 5,
flex: 1,
fontSize: 18,
borderWidth: 1,
borderColor: "#555555",
borderRadius: 8,
color: "#555555"
},
button: {
height: 36,
flex: 1,
backgroundColor: "#555555",
borderColor: "#555555",
borderWidth: 1,
borderRadius: 8,
marginTop: 10,
justifyContent: "center"
},
buttonText: {
fontSize: 18,
color: "#ffffff",
alignSelf: "center"
},
});
module.exports = LoginView;

You have to use navigator. please read the documentation as mentioned below. and if you will need then i will share you my code.
Here is an example: NavigatorExample