redux-form Cannot read property 'any' of undefined

redux-form Cannot read property 'any' of undefined - javascript

I have problem with redux-from in react-native. I want to implement a login form for my app. from tutorials around the web I wrote this code but have problem with this error
Cannot read property 'any' of undefined
Package.json
"dependencies": {
"react": "16.2.0",
"react-addons-update": "^15.6.2",
"react-native": "0.53.0",
"react-redux": "^5.0.6",
"redux": "^3.7.2",
"redux-form": "^5.3.2",
"redux-persist": "^3.2.2"
},
this is my Login.js component
import React, { Component } from 'react';
import { StyleSheet, Text, View, TextInput, TouchableOpacity } from 'react-native';
import { reduxForm } from "redux-form";
class Login extends Component {
onSignIn() {
var { email, password } = this.props.fields;
console.log(email.value, password.value);
}
render(){
var {fields: {email, password}} = this.props;
return (
<View style={styles.container}>
<View style={styles.titleContainer} >
<Text style={styles.title} >ToDo</Text>
</View>
<View style={styles.fields} >
<TextInput
{...email}
placeholder="Email"
style={styles.TextInput}
/>
</View>
<View style={styles.fields} >
<TextInput
{...password}
placeholder="Password"
style={styles.TextInput}
/>
</View>
<View style={styles.buttonContainer} >
<TouchableOpacity>
<Text style={styles.button} onPress={this.onSignIn} >
Signin
</Text>
</TouchableOpacity>
<TouchableOpacity>
<Text style={styles.button}>
Signup
</Text>
</TouchableOpacity>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
...
});
var validate = (formProps) => {
var errors = {};
return errors;
}
export default reduxForm({
form: 'login',
fields: ['email', 'password'],
validate: validate
}, null, null)(Login);
my reducer index.js
import update from "react-addons-update";
import { combineReducers } from "redux";
import { reducer as formReduser } from "redux-form";
module.exports = combineReducers({
form: formReduser
})

Looks like that version of redux-form doesn't support react 16. Prop types have been moved to a separate package. Try upgrading redux-form to 5.3.6 or greater.

Related

Application Breaks when adding custom component as import

I am having an issue where I have created two components "TaskInputField.js" and "TaskItem.js" and when I import them into the file I want to use them in, the browser window I am viewing the app on turns completely blank (using expo). Can post screenshots of what I mean if needed.
This has never happened to me before where simply importing a file breaks the application.
If I remove the imports from GroceryList.js and remove where I use them in the file, everything else runs just fine. I followed a guide for most of this also so I am unsure what is happening.
Thanks in advance.
For reference:
TaskInputField.js
import React, {useState} from 'react';
import { KeyboardAvoidingView, StyleSheet, View, TextInput, TouchableOpacity, } from "react-native";
import { MaterialIcons } from '#expo/vector-icons';
export default TaskInputField = (props) => {
const [task, setTask] = useState();
const handleAddTask = (value) => {
props.addTask(value);
setTask(null);
}
return (
<KeyboardAvoidingView
behavior={Platform.OS === "ios" ? "padding" : "height"}
style={styles.container}
>
<TextInput style={styles.inputField} value={task} onChangeText={text => setTask(text)} placeholder={'Write a task'} placeholderTextColor={'#fff'}/>
<TouchableOpacity onPress={() => handleAddTask(task)}>
<View style={styles.button}>
<MaterialIcons name="keyboard-arrow-up" size={24} color="black" />
</View>
</TouchableOpacity>
</KeyboardAvoidingView>
);
}
TaskItem.js
import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity, } from "react-native";
import { MaterialIcons } from '#expo/vector-icons';
export default TaskItem = (props) => {
return (
<View style={styles.container}>
<View style={styles.indexContainer}>
<Text style={styles.index}>{props.index}</Text>
</View>
<View style={styles.taskContainer}>
<Text style={styles.task}>{props.task}</Text>
<TouchableOpacity onPress={() => props.deleteTask()}>
<MaterialIcons style={styles.delete} name="delete" size={18} color='#fff' />
</TouchableOpacity>
</View>
</View>
);
}
I am implementing these here in GroceryList.js
import React, {useState} from 'react';
import { Keyboard, ScrollView, StyleSheet, Text, View } from 'react-native';
import TaskInputField from '../../components/TaskInputField';
import TaskItem from '../../components/TaskItem';
export default function GroceryList() {
const [tasks, setTasks] = useState([]);
const addTask = (task) => {
if (task == null) return;
setTasks([...tasks, task]);
Keyboard.dismiss();
}
const deleteTask = (deleteIndex) => {
setTasks(tasks.filter((value, index) => index != deleteIndex));
}
return(
<View style={styles.container}>
<Text style={styles.heading}>Grocery List</Text>
<ScrollView style={styles.scrollView}>
{
tasks.map((task, index) => {
return (
<View key={index} style={styles.taskContainer}>
<TaskItem index={index + 1} task={task} deleteTask={() => deleteTask(index)}/>
</View>
);
})
}
</ScrollView>
<TaskInputField addTask={addTask}/>
</View>
)
}

React Navigation animation still showing when animationEnabled prop is set to false

I was creating a bottom tab bar without using the react-native-navigation built-in one and I wanted to disable the left and right slide animation. First I tried using the animationEnabled prop but it does not seem to do anything. I also tried to use timing and set the duration to 0 but it hasn't worked either. What am I doing wrong?
RootStack.js
// import react navigation
import { NavigationContainer } from '#react-navigation/native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
// import screens
import Login from '../screens/Login';
import Signup from '../screens/Signup';
import Welcome from '../screens/Welcome';
import AccountScreen from '../screens/AccountScreen';
import NewsScreen from '../screens/NewsScreen';
import SearchScreen from '../screens/SearchScreen';
import TrendingScreen from '../screens/TrendingScreen';
import TabBarComponent from '../components/TabBarComponent';
// Colors
import {Colors} from '../components/styles';
const{brand, darkLight, primary, tertiary } = Colors;
import React, {useState} from 'react';
const Stack = createNativeStackNavigator();
const ArrowStack = () => {
return(
<NavigationContainer>
<Stack.Navigator
timingConfig={{
duration: 0,
}}
screenOptions={{
animationEnabled: false,
headerShown: true,
headerStyled: {
backgroundColor: 'transparent',
elevation: 0
},
headerShadowVisible: false,
headerTransparent: true,
headerTitle: '',
headerLeftContainerStyle:{
paddingLeft:20
}
}}
initialRouteName="Login"
>
<Stack.Screen name="Login" component={Login} />
<Stack.Screen name="Signup" component={Signup} />
<Stack.Screen name="Welcome" component={Welcome} />
<Stack.Screen name="Account" component={AccountScreen} />
<Stack.Screen name="Search" component={SearchScreen} />
<Stack.Screen name="Trending" component={TrendingScreen} />
<Stack.Screen name="News" component={NewsScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default ArrowStack;
Welcome.js
import React from 'react';
import { StatusBar } from 'expo-status-bar';
import { Pressable, TouchableOpacity } from 'react-native';
import TabBarComponent from '../components/TabBarComponent';
import{
InnerContainer,
PageTitle,
SubTitle,
StyledFormArea,
Colors,
StyledButton,
ButtonText,
Line,
WelcomeContainer,
WelcomeImage,
Avatar,
TabBarContainer,
TabBar,
TabBarInnerContainer
} from './../components/styles'
// import tabBarIcons
import Home from '../tabBarIcons/Home';
import News from '../tabBarIcons/News';
import Account from '../tabBarIcons/Account';
import Trending from '../tabBarIcons/Trending';
import Search from '../tabBarIcons/Search';
// Colors
const{brand, darkLight, primary} = Colors;
const Welcome = ({ navigation }) => {
return(
<>
<StatusBar style="light"/>
<InnerContainer>
<WelcomeContainer>
<PageTitle welcome={true}>Welcome! Buddy</PageTitle>
<SubTitle welcome={true}>Olga Simpson</SubTitle>
<SubTitle welcome={true}>johndoe#email.com</SubTitle>
<StyledFormArea>
<Line />
<StyledButton onPress={() => {
navigation.navigate("Login");
}}>
<ButtonText>
Logout
</ButtonText>
</StyledButton>
</StyledFormArea>
<TabBarContainer>
<TabBar>
<TabBarInnerContainer>
<TouchableOpacity onPress={() => {
navigation.navigate("News");
}}>
<News/>
</TouchableOpacity>
<TouchableOpacity onPress={() => {
navigation.navigate("Account");
}}>
<Account />
</TouchableOpacity>
<TouchableOpacity onPress={() => {
navigation.navigate("Welcome");
}}>
<Home />
</TouchableOpacity>
<TouchableOpacity onPress={() => {
navigation.navigate("Trending");
}}>
<Trending />
</TouchableOpacity>
<TouchableOpacity onPress={() => {
navigation.navigate("Search");
}}>
<Search />
</TouchableOpacity>
</TabBarInnerContainer>
</TabBar>
</TabBarContainer>
</WelcomeContainer>
</InnerContainer>
</>
);
}
export default Welcome;
NewsScreen.js
import React from 'react';
import {View, Text, TouchableOpacity} from 'react-native';
// import tabBarIcons
import Home from '../tabBarIcons/Home';
import News from '../tabBarIcons/News';
import Account from '../tabBarIcons/Account';
import Trending from '../tabBarIcons/Trending';
import Search from '../tabBarIcons/Search';
import{
InnerContainer,
PageTitle,
SubTitle,
StyledFormArea,
Colors,
StyledButton,
ButtonText,
Line,
WelcomeContainer,
WelcomeImage,
Avatar,
TabBarContainer,
TabBar,
TabBarInnerContainer,
ScreenContainer,
TabBarContainerScreen
} from './../components/styles'
const NewsScreen = ({navigation}) => {
return(
<InnerContainer>
<ScreenContainer>
<><View>
<Text>
News Screen
</Text>
</View>
<TabBarContainerScreen>
<TabBar>
<TabBarInnerContainer>
<TouchableOpacity onPress={() => {
navigation.navigate("News");
} }>
<News />
</TouchableOpacity>
<TouchableOpacity onPress={() => {
navigation.navigate("Account");
} }>
<Account />
</TouchableOpacity>
<TouchableOpacity onPress={() => {
navigation.navigate("Welcome");
} }>
<Home />
</TouchableOpacity>
<TouchableOpacity onPress={() => {
navigation.navigate("Trending");
} }>
<Trending />
</TouchableOpacity>
<TouchableOpacity onPress={() => {
navigation.navigate("Search");
} }>
<Search />
</TouchableOpacity>
</TabBarInnerContainer>
</TabBar>
</TabBarContainerScreen></>
</ScreenContainer>
</InnerContainer>
);
}
export default NewsScreen;
AccountScreen.js
import React from 'react';
import {View, Text, TouchableOpacity} from 'react-native';
// import tabBarIcons
import Home from '../tabBarIcons/Home';
import News from '../tabBarIcons/News';
import Account from '../tabBarIcons/Account';
import Trending from '../tabBarIcons/Trending';
import Search from '../tabBarIcons/Search';
import{
InnerContainer,
PageTitle,
SubTitle,
StyledFormArea,
Colors,
StyledButton,
ButtonText,
Line,
WelcomeContainer,
WelcomeImage,
Avatar,
TabBarContainer,
TabBar,
TabBarInnerContainer,
ScreenContainer,
TabBarContainerScreen
} from './../components/styles'
const AccountScreen = ({navigation}) => {
return(
<InnerContainer>
<ScreenContainer>
<><View>
<Text>
Account Screen
</Text>
</View>
<TabBarContainerScreen>
<TabBar>
<TabBarInnerContainer>
<TouchableOpacity onPress={() => {
navigation.navigate("News");
} }>
<News />
</TouchableOpacity>
<TouchableOpacity onPress={() => {
navigation.navigate("Account");
} }>
<Account />
</TouchableOpacity>
<TouchableOpacity onPress={() => {
navigation.navigate("Welcome");
} }>
<Home />
</TouchableOpacity>
<TouchableOpacity onPress={() => {
navigation.navigate("Trending");
} }>
<Trending />
</TouchableOpacity>
<TouchableOpacity onPress={() => {
navigation.navigate("Search");
} }>
<Search />
</TouchableOpacity>
</TabBarInnerContainer>
</TabBar>
</TabBarContainerScreen></>
</ScreenContainer>
</InnerContainer>
);
}
export default AccountScreen;
SearchScreen.js
import React from 'react';
import {View, Text, TouchableOpacity} from 'react-native';
// import tabBarIcons
import Home from '../tabBarIcons/Home';
import News from '../tabBarIcons/News';
import Account from '../tabBarIcons/Account';
import Trending from '../tabBarIcons/Trending';
import Search from '../tabBarIcons/Search';
import{
InnerContainer,
PageTitle,
SubTitle,
StyledFormArea,
Colors,
StyledButton,
ButtonText,
Line,
WelcomeContainer,
WelcomeImage,
Avatar,
TabBarContainer,
TabBar,
TabBarInnerContainer,
ScreenContainer,
TabBarContainerScreen
} from './../components/styles'
const SearchScreen = ({navigation}) => {
return(
<InnerContainer>
<WelcomeContainer>
<><View>
<Text>
Search Screen
</Text>
</View>
<TabBarContainerScreen>
<TabBar>
<TabBarInnerContainer>
<TouchableOpacity onPress={() => {
navigation.navigate("News");
} }>
<News />
</TouchableOpacity>
<TouchableOpacity onPress={() => {
navigation.navigate("Account");
} }>
<Account />
</TouchableOpacity>
<TouchableOpacity onPress={() => {
navigation.navigate("Welcome");
} }>
<Home />
</TouchableOpacity>
<TouchableOpacity onPress={() => {
navigation.navigate("Trending");
} }>
<Trending />
</TouchableOpacity>
<TouchableOpacity onPress={() => {
navigation.navigate("Search");
} }>
<Search />
</TouchableOpacity>
</TabBarInnerContainer>
</TabBar>
</TabBarContainerScreen></>
</WelcomeContainer>
</InnerContainer>
);
}
export default SearchScreen;
TrendingScreen.js
import React from 'react';
import {View, Text, TouchableOpacity} from 'react-native';
// import tabBarIcons
import Home from '../tabBarIcons/Home';
import News from '../tabBarIcons/News';
import Account from '../tabBarIcons/Account';
import Trending from '../tabBarIcons/Trending';
import Search from '../tabBarIcons/Search';
import{
InnerContainer,
PageTitle,
SubTitle,
StyledFormArea,
Colors,
StyledButton,
ButtonText,
Line,
WelcomeContainer,
WelcomeImage,
Avatar,
TabBarContainer,
TabBar,
TabBarInnerContainer,
ScreenContainer,
TabBarContainerScreen
} from './../components/styles'
const TrendingScreen = ({navigation}) => {
return(
<InnerContainer>
<ScreenContainer>
<><View>
<Text>
Trending Screen
</Text>
</View>
<TabBarContainerScreen>
<TabBar>
<TabBarInnerContainer>
<TouchableOpacity onPress={() => {
navigation.navigate("News");
} }>
<News />
</TouchableOpacity>
<TouchableOpacity onPress={() => {
navigation.navigate("Account");
} }>
<Account />
</TouchableOpacity>
<TouchableOpacity onPress={() => {
navigation.navigate("Welcome");
} }>
<Home />
</TouchableOpacity>
<TouchableOpacity onPress={() => {
navigation.navigate("Trending");
} }>
<Trending />
</TouchableOpacity>
<TouchableOpacity onPress={() => {
navigation.navigate("Search");
} }>
<Search />
</TouchableOpacity>
</TabBarInnerContainer>
</TabBar>
</TabBarContainerScreen></>
</ScreenContainer>
</InnerContainer>
);
}
export default TrendingScreen;
package.json
{
"name": "frfr",
"version": "1.0.0",
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"#react-native-community/datetimepicker": "3.5.2",
"#react-navigation/native": "^6.0.6",
"#react-navigation/native-stack": "^6.2.5",
"#react-navigation/stack": "^6.0.11",
"expo": "~43.0.0",
"expo-status-bar": "~1.1.0",
"formik": "^2.2.9",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-native": "0.64.3",
"react-native-gesture-handler": "^1.10.3",
"react-native-reanimated": "^2.2.4",
"react-native-safe-area-context": "3.3.2",
"react-native-screens": "~3.8.0",
"react-native-web": "0.17.1",
"styled-components": "^5.3.3",
"react-native-svg": "12.1.1"
},
"devDependencies": {
"#babel/core": "^7.12.9"
},
"private": true
}

As you are using a NativeStackNavigator, you shouldn't use animationEnabled but animation instead.
List of supported values : https://reactnavigation.org/docs/native-stack-navigator#animation
options = {
{
animation: 'none',
}
}

React Native: undefined is not an object (evaluating 'props.navigation.navigate')

I'm learning React Native and by trying to run this code using Expo it gives me the Exception error:
undefined is not an object (evaluating 'props.navigation.navigate'), at line 17 on App.js (marked in the comment)
There are two files: App.js and Untitled1.js
App:
import { StyleSheet, Text, View, TextInput, TouchableOpacity } from 'react-native';
import 'react-native-gesture-handler';
import { NavigationContainer } from '#react-navigation/native';
function App(props) {
return (
<View style={styles.container}>
<Text style={styles.logo}>APPetito</Text>
<Text style={styles.loginText}>Welcome to our app!</Text>
<Text style={styles.loginText}>Choose what do you want to do</Text>
// [ THE FOLLOWING LINE CONTAINS THE ERROR ]
<TouchableOpacity onPress={() => props.navigation.navigate("Untitled1")} style={styles.loginBtn}>
<Text style={styles.loginText}>I eat food</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.loginBtn}>
<Text style={styles.loginText}>I sell food</Text>
</TouchableOpacity>
</View>
);
}
// here there are the const styles
export default App;
Untitled.js
import * as React from 'react';
import React, { Component } from "react";
import { StyleSheet, View, Text } from "react-native";
import Icon from "react-native-vector-icons/Entypo";
import { NavigationContainer } from '#react-navigation/native';
function Untitled1(props) {
return (
<View style={styles.container}>
<Icon name="check" style={styles.icon}></Icon>
<Text style={styles.itWorks}>It works!</Text>
</View>
);
}
// here there are the const styles
export default Untitled1;
What can I do to solve the problem?

I think the problem is that you didn't create a Stack navigator in the first place to navigate between screens. Refer to react navigation docs to know more here
According to the docs you have to implement the stack navigator such as:
import * as React from 'react';
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
function Home(props) {
return (
<View style={styles.container}>
<Text style={styles.logo}>APPetito</Text>
<Text style={styles.loginText}>Welcome to our app!</Text>
<Text style={styles.loginText}>Choose what do you want to do</Text>
<TouchableOpacity onPress={() => props.navigation.navigate("Untitled1")} style={styles.loginBtn}>
<Text style={styles.loginText}>I eat food</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.loginBtn}>
<Text style={styles.loginText}>I sell food</Text>
</TouchableOpacity>
</View>
);
}
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={Home} />
<Stack.Screen name="Untitled1" component={Untitled1} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
I have updated your code a little bit to help you understand the concept.

React Native: React-Navigation Cannot read property 'navigate' of undefined

I am currently learning React Native and was having some issue with React-navigation.
What I am trying to do is switch screen when the "button" is being pressed.
In the "button", I have:
onPress={() =>
navigate('Home')}
I have const { navigate } = this.props.navigation; before the return statement.
When I run it, I am getting "Cannot read property 'navigate' of undefined.
I guess it is I have to place this.props.navigation somewhere.
Here are my two files:
"IntroPageFive" is the one that has the button and "react-navigation".
I would like to go to "IntroPageOne" when the button is being clicked.
Code for "IntroPageFive":
import React from 'react';
import { Text, View, Image, Linking, Button, TouchableOpacity } from 'react-native';
import PlaceholderImage from '../images/placeholder_thumbnail.png';
import SignInFooter from './signInFooter';
import { createStackNavigator } from 'react-navigation';
import IntroPageOne from './introPageOne';
const App = createStackNavigator({
Home: { screen: IntroPageOne },
});
class IntroPageFive extends React.Component {
render() {
const {
headerTextStyle,
thumbnailStyle,
viewStyle,
subTextStyle,
mainTextSection,
footerSectionStyle,
startButtonStyle,
startButtonTextStyle,
signInButtonStyle ,
signInButtonTextStyle
} = styles;
const { navigate } = this.props.navigation;
return (
<View style={viewStyle}>
<Image style={thumbnailStyle} source={require('../images/placeholder_thumbnail.png')} />
<View style={mainTextSection}>
<Text style={headerTextStyle}>Take A Ride For</Text>
<Text style={headerTextStyle}>Your Favorite Car!</Text>
</View>
<View>
<TouchableOpacity
onPress={() =>
navigate('Home')
}
style={startButtonStyle}
>
<Text style={startButtonTextStyle}>LET'S GET STARTED</Text>
</TouchableOpacity>
</View>
<View style={footerSectionStyle}>
<SignInFooter />
</View>
</View>
);
}
}
export default IntroPageFive;
Here is the code for "IntroPageOne":
import React from 'react';
import { Text, View, Image, Linking } from 'react-native';
import PlaceholderImage from '../images/placeholder_thumbnail.png';
import SignInFooter from './signInFooter';
const IntroPageOne = () => {
const { headerTextStyle, thumbnailStyle, viewStyle, subTextStyle } = styles;
return (
<View style={viewStyle} >
<Image style={thumbnailStyle} source={require('../images/placeholder_thumbnail.png')} />
<Text style={headerTextStyle}>Forget Everything You</Text>
<Text style={headerTextStyle}>Know About Making</Text>
<Text style={headerTextStyle}>Deals For Your Car</Text>
<Text style={subTextStyle}>Deal negotiation powered by AI</Text>
<SignInFooter />
</View>
);
};
};
export default IntroPageOne;
Could anyone please tell me how to fix this issue?
Thank you.

Could not find “store” in either the context or props React Native

I'm trying to integrate Redux in my React Native app. I am getting the error "Could not find “store” in either the context or props"
My code is as follows:
index.js
import { AppRegistry, View } from 'react-native'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import { reducer } from './containers/intro/introRedux'
const store = createStore(reducer);
import App from './App'
const AppWithStore = () => (
<Provider store={store}>
<App />
</Provider>
)
AppRegistry.registerComponent('App', () => AppWithStore)
App.js
//Components & Dependencies
import React, { Component } from 'react';
import { TextInput, Picker, TouchableOpacity, Image, AppRegistry, StyleSheet, Text, View } from 'react-native';
import Swiper from 'react-native-swiper';
import { connect } from 'react-redux'
import { actionCreators } from './containers/intro/introRedux'
const mapStateToProps = (state) => ({
todos: state.todos,
})
//Styles
var introStyle = require('./containers/intro/styles');
class App extends Component {
profile = {
gender: "Female",
heightUnit: "cm",
weightUnit: "kg"
}
saveProfile() {
alert(JSON.stringify(this.profile));
}
render() {
return (
<Swiper ref={(component) => { this.swiper = component; }} dotColor='#2A2D2E' activeDotColor='#FFF' showsButtons={false} loop={false}>
<View style={introStyle.slide1}>
<Image source={require('./images/logo.png')} />
<Text style={introStyle.header}>Build Muscle, Burn Fat & Get Stronger</Text>
<TouchableOpacity style={introStyle.nextButton} onPress={() => this.swiper.scrollBy(1)}>
<Text style={introStyle.nextButtonText}>Next</Text>
</TouchableOpacity>
</View>
<View style={introStyle.slide2}>
<View style={introStyle.wrapper}>
<Text style={introStyle.header}>Let's setup your profile</Text>
<Text style={introStyle.subHeader}>Tell us a little about yourself first</Text>
<Picker
selectedValue={this.profile.gender}
mode='dropdown'
style={[introStyle.dropdown, introStyle.genderDropdown]}>
<Picker.Item label="Male" value="Male" />
<Picker.Item label="Female" value="Female" />
</Picker>
<TextInput
style={introStyle.textInput}
underlineColorAndroid='#FFF'
placeholder='Age'
keyboardType='numeric'
maxLength={2}
value={this.profile && this.profile.age}
/>
<View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'flex-start' }}>
<TextInput
style={introStyle.textInput}
underlineColorAndroid='#FFF'
placeholder='Height'
keyboardType='numeric'
maxLength={3}
value={this.profile && this.profile.height}
/>
<Picker
mode='dropdown'
style={introStyle.dropdown}
selectedValue={this.profile.heightUnit}
>
<Picker.Item label="cm" value="cm" />
<Picker.Item label="inch" value="inch" />
</Picker>
</View>
<View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'flex-start' }}>
<TextInput
style={introStyle.textInput}
underlineColorAndroid='#FFF'
placeholder='Weight'
keyboardType='numeric'
maxLength={3}
value={this.profile && this.profile.weight}
/>
<Picker
mode='dropdown'
style={introStyle.dropdown}
selectedValue={this.profile.weightUnit}
>
<Picker.Item label="kg" value="kg" />
<Picker.Item label="lb" value="lb" />
</Picker>
</View>
<TouchableOpacity style={introStyle.nextButton} onPress={() => this.saveProfile()}>
<Text style={[introStyle.nextButtonText, { textAlign: 'center' }]}>Let's go!</Text>
</TouchableOpacity>
</View>
</View>
</Swiper>
);
}
}
export default connect(mapStateToProps)(App)
introRedux.js
const initialState = {
todos: ['Click to remove', 'Learn React Native', 'Write Code', 'Ship App'],
}
export const actionCreators = {
UPDATE_GENDER: 'UPDATE_GENDER',
};
export const reducer = (state = initialState, action) => {
const {profile} = state
const {type, payload} = action
switch (type) {
case types.ADD: {
return {
...state,
todos: [payload, ...todos],
}
}
case types.REMOVE: {
return {
...state,
todos: todos.filter((todo, i) => i !== payload),
}
}
}
return state
}
Why can't the app find the store from the provider? I'm at a loss.
Edit: passing the store directly works:
import { AppRegistry, View } from 'react-native'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import { reducer } from './containers/intro/introRedux'
const store = createStore(reducer)
// Import the App container component
import App from './App'
// Pass the store into the app container
const AppWithStore = () => <App store={store} />
AppRegistry.registerComponent('App', () => AppWithStore)
"App" doesn't use connect to export the component if I pass the store directly

Replace
const AppWithStore = () => (
<Provider store={store}>
<App />
</Provider>
)
with a class component:
class AppWithStore extends React.Component {
render() {
return (
<Provider store={store}>
<App />
</Provider>
)
}
}
Functional components do not keep state. I think AppRegistry.registerComponent needs you to use a class component.
Edit2
{
"name": "vtapered",
"version": "0.1.0",
"private": true,
"devDependencies": {
"react-native-scripts": "1.3.1",
"jest-expo": "~20.0.0",
"react-test-renderer": "16.0.0-alpha.12"
},
"main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
"scripts": {
"start": "react-native-scripts start",
"eject": "react-native-scripts eject",
"android": "react-native-scripts android",
"ios": "react-native-scripts ios",
"test": "node node_modules/jest/bin/jest.js --watch"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"expo": "^20.0.0",
"react": "16.0.0-alpha.12",
"react-native": "^0.48.0",
"react-native-swiper": "^1.5.10",
"react-redux": "^5.0.6"
}
}

We Keep Coding

JavaScript is the programming language of the Web.

redux-form Cannot read property 'any' of undefined - javascript

Looks like that version of redux-form doesn't support react 16. Prop types have been moved to a separate package. Try upgrading redux-form to 5.3.6 or greater.

Related

Application Breaks when adding custom component as import

React Navigation animation still showing when animationEnabled prop is set to false

React Native: undefined is not an object (evaluating 'props.navigation.navigate')

React Native: React-Navigation Cannot read property 'navigate' of undefined

Could not find “store” in either the context or props React Native

Categories

Resources