React-native navigation 'Cannot read property 'toString' of undefined' using redux connect
0
I'm creating a react-native app, using expo, redux and react-navigation, using Typescript.
I want to do a LoginScreen, and when user is logged in, navigate to a MainScreen with a bottom navbar. In a nutshell:
- LoginScreen
MainScreen
2.1. Orders
2.2. Settings
In order to do this, I followed this post :
const AppNavigator = createBottomTabNavigator({OrdersContainer, SettingsScreen});
const LoginNavigator = createStackNavigator({ LoginContainer, RegisterContainer});
const RootNavigator = createSwitchNavigator({ LoginNavigator, AppNavigator });
Then, the there is the typical flow with redux. When the login button is pressed, the action for login does a dispatch, and then the reducer updates the state.
Then, the componentDidUpdate in the LoginScreen it's called:
componentDidUpdate(currentProps: LoginScreenProps) {
var accessToken = currentProps.user.accountInfo.accessToken;
if(accessToken) {
this.props.navigation.navigate("OrdersContainer");
};
}
function mapStateToProps(state: AppState): LoginScreenProps {
return {
user: state.user
} as LoginScreenProps;
}
Now, when 'navigate' is executed, the following Exception is throwed:
TypeError: TypeError: Cannot read property 'toString' of undefined
This error is located at:
in Connect(OrdersScreen) (at withNavigation.js:23)
in withNavigation(Connect(OrdersScreen)) (at SceneView.js:9)
in SceneView (at StackViewLayout.js:478)
in RCTView (at View.js:60)
in View (at StackViewLayout.js:477)
in RCTView (at View.js:60)
in View (at StackViewLayout.js:476)
in RCTView (at View.js:60)
What am I missing?
Thanks!!
Edit: Added OrdersScreen file
interface OrderScreenProps {
Orders: Map<string, Order>;
customer: Customer;
user: User;
navigation: NavigationScreenProp<NavigationState, NavigationParams>;
listOrders: (customer: Customer, user: User) => OrderAction<Order>;
}
export class OrdersScreen extends React.Component<OrderScreenProps> {
static navigationOptions = {
header: (
<View style={headerStyles.container}>
<Text style={headerStyles.text}>Orders</Text>
</View>
)
};
constructor(props: OrderScreenProps) {
super(props);
}
render() {
return <OrderListView
Orders={this.props.Orders}
/>;
}
componentDidMount() {
this.props.listOrders(this.props.customer, this.props.user);
}
}
function mapStateToProps(state: AppState): OrderScreenProps {
return {
user: state.user,
customer: state.customer
} as OrderScreenProps;
}
function mapDispatchToProps(dispatch: Dispatch<AnyAction>) {
return bindActionCreators({
listOrders: listOrdersActionCreator
}, dispatch);
}
const OrdersContainer = withNavigation(connect(mapStateToProps, mapDispatchToProps)(OrdersScreen));
export { OrdersContainer };react-native redux react-navigation
asked Dec 27 '18 at 16:04
jpadilladev
4081716
|
show 1 more comment
0
I'm creating a react-native app, using expo, redux and react-navigation, using Typescript.
I want to do a LoginScreen, and when user is logged in, navigate to a MainScreen with a bottom navbar. In a nutshell:
- LoginScreen
MainScreen
2.1. Orders
2.2. Settings
In order to do this, I followed this post :
const AppNavigator = createBottomTabNavigator({OrdersContainer, SettingsScreen});
const LoginNavigator = createStackNavigator({ LoginContainer, RegisterContainer});
const RootNavigator = createSwitchNavigator({ LoginNavigator, AppNavigator });
Then, the there is the typical flow with redux. When the login button is pressed, the action for login does a dispatch, and then the reducer updates the state.
Then, the componentDidUpdate in the LoginScreen it's called:
componentDidUpdate(currentProps: LoginScreenProps) {
var accessToken = currentProps.user.accountInfo.accessToken;
if(accessToken) {
this.props.navigation.navigate("OrdersContainer");
};
}
function mapStateToProps(state: AppState): LoginScreenProps {
return {
user: state.user
} as LoginScreenProps;
}
Now, when 'navigate' is executed, the following Exception is throwed:
TypeError: TypeError: Cannot read property 'toString' of undefined
This error is located at:
in Connect(OrdersScreen) (at withNavigation.js:23)
in withNavigation(Connect(OrdersScreen)) (at SceneView.js:9)
in SceneView (at StackViewLayout.js:478)
in RCTView (at View.js:60)
in View (at StackViewLayout.js:477)
in RCTView (at View.js:60)
in View (at StackViewLayout.js:476)
in RCTView (at View.js:60)
What am I missing?
Thanks!!
Edit: Added OrdersScreen file
interface OrderScreenProps {
Orders: Map<string, Order>;
customer: Customer;
user: User;
navigation: NavigationScreenProp<NavigationState, NavigationParams>;
listOrders: (customer: Customer, user: User) => OrderAction<Order>;
}
export class OrdersScreen extends React.Component<OrderScreenProps> {
static navigationOptions = {
header: (
<View style={headerStyles.container}>
<Text style={headerStyles.text}>Orders</Text>
</View>
)
};
constructor(props: OrderScreenProps) {
super(props);
}
render() {
return <OrderListView
Orders={this.props.Orders}
/>;
}
componentDidMount() {
this.props.listOrders(this.props.customer, this.props.user);
}
}
function mapStateToProps(state: AppState): OrderScreenProps {
return {
user: state.user,
customer: state.customer
} as OrderScreenProps;
}
function mapDispatchToProps(dispatch: Dispatch<AnyAction>) {
return bindActionCreators({
listOrders: listOrdersActionCreator
}, dispatch);
}
const OrdersContainer = withNavigation(connect(mapStateToProps, mapDispatchToProps)(OrdersScreen));
export { OrdersContainer };react-native redux react-navigation
asked Dec 27 '18 at 16:04
jpadilladev
4081716
Can you show the fullOrdersScreencomponent? As that is probably where you error is.
– Andrew
Dec 27 '18 at 18:23
@Andrew I edited my question. I don't think it's problem of OrdersScreen. I made a simple test clicking on the button and then navigating (without the redux flow) to the screen, and it worked. It should be something with componentDidUpdate...
– jpadilladev
Dec 28 '18 at 23:38
IsOrdersScreendifferent fromOrderScreen?
– Drew Reese
Dec 28 '18 at 23:54
By only showing snippets of code rather than full components you make it hard for someone to debug it. Looking at the error you posted it saysThe error is located at: in Connect(OrdersScreen)my first step is to check the code in theOrdersScreen. You’re asking for other people to find your error but only showing a small piece of the puzzle. I’m afraid I can’t help you. Good luck in your search for a solution.
– Andrew
Dec 29 '18 at 8:18
@Andrew Sorry, I didn't think it was really necessary, my mistake. I added the full OrdersScreen now. The error now is a bit different because I made some changes.
– jpadilladev
Dec 29 '18 at 12:26
|
show 1 more comment
0
0
0
I'm creating a react-native app, using expo, redux and react-navigation, using Typescript.
I want to do a LoginScreen, and when user is logged in, navigate to a MainScreen with a bottom navbar. In a nutshell:
- LoginScreen
MainScreen
2.1. Orders
2.2. Settings
In order to do this, I followed this post :
const AppNavigator = createBottomTabNavigator({OrdersContainer, SettingsScreen});
const LoginNavigator = createStackNavigator({ LoginContainer, RegisterContainer});
const RootNavigator = createSwitchNavigator({ LoginNavigator, AppNavigator });
Then, the there is the typical flow with redux. When the login button is pressed, the action for login does a dispatch, and then the reducer updates the state.
Then, the componentDidUpdate in the LoginScreen it's called:
componentDidUpdate(currentProps: LoginScreenProps) {
var accessToken = currentProps.user.accountInfo.accessToken;
if(accessToken) {
this.props.navigation.navigate("OrdersContainer");
};
}
function mapStateToProps(state: AppState): LoginScreenProps {
return {
user: state.user
} as LoginScreenProps;
}
Now, when 'navigate' is executed, the following Exception is throwed:
TypeError: TypeError: Cannot read property 'toString' of undefined
This error is located at:
in Connect(OrdersScreen) (at withNavigation.js:23)
in withNavigation(Connect(OrdersScreen)) (at SceneView.js:9)
in SceneView (at StackViewLayout.js:478)
in RCTView (at View.js:60)
in View (at StackViewLayout.js:477)
in RCTView (at View.js:60)
in View (at StackViewLayout.js:476)
in RCTView (at View.js:60)
What am I missing?
Thanks!!
Edit: Added OrdersScreen file
interface OrderScreenProps {
Orders: Map<string, Order>;
customer: Customer;
user: User;
navigation: NavigationScreenProp<NavigationState, NavigationParams>;
listOrders: (customer: Customer, user: User) => OrderAction<Order>;
}
export class OrdersScreen extends React.Component<OrderScreenProps> {
static navigationOptions = {
header: (
<View style={headerStyles.container}>
<Text style={headerStyles.text}>Orders</Text>
</View>
)
};
constructor(props: OrderScreenProps) {
super(props);
}
render() {
return <OrderListView
Orders={this.props.Orders}
/>;
}
componentDidMount() {
this.props.listOrders(this.props.customer, this.props.user);
}
}
function mapStateToProps(state: AppState): OrderScreenProps {
return {
user: state.user,
customer: state.customer
} as OrderScreenProps;
}
function mapDispatchToProps(dispatch: Dispatch<AnyAction>) {
return bindActionCreators({
listOrders: listOrdersActionCreator
}, dispatch);
}
const OrdersContainer = withNavigation(connect(mapStateToProps, mapDispatchToProps)(OrdersScreen));
export { OrdersContainer };react-native redux react-navigation
asked Dec 27 '18 at 16:04
jpadilladev
4081716
I'm creating a react-native app, using expo, redux and react-navigation, using Typescript.
I want to do a LoginScreen, and when user is logged in, navigate to a MainScreen with a bottom navbar. In a nutshell:
- LoginScreen
MainScreen
2.1. Orders
2.2. Settings
In order to do this, I followed this post :
const AppNavigator = createBottomTabNavigator({OrdersContainer, SettingsScreen});
const LoginNavigator = createStackNavigator({ LoginContainer, RegisterContainer});
const RootNavigator = createSwitchNavigator({ LoginNavigator, AppNavigator });
Then, the there is the typical flow with redux. When the login button is pressed, the action for login does a dispatch, and then the reducer updates the state.
Then, the componentDidUpdate in the LoginScreen it's called:
componentDidUpdate(currentProps: LoginScreenProps) {
var accessToken = currentProps.user.accountInfo.accessToken;
if(accessToken) {
this.props.navigation.navigate("OrdersContainer");
};
}
function mapStateToProps(state: AppState): LoginScreenProps {
return {
user: state.user
} as LoginScreenProps;
}
Now, when 'navigate' is executed, the following Exception is throwed:
TypeError: TypeError: Cannot read property 'toString' of undefined
This error is located at:
in Connect(OrdersScreen) (at withNavigation.js:23)
in withNavigation(Connect(OrdersScreen)) (at SceneView.js:9)
in SceneView (at StackViewLayout.js:478)
in RCTView (at View.js:60)
in View (at StackViewLayout.js:477)
in RCTView (at View.js:60)
in View (at StackViewLayout.js:476)
in RCTView (at View.js:60)
What am I missing?
Thanks!!
Edit: Added OrdersScreen file
interface OrderScreenProps {
Orders: Map<string, Order>;
customer: Customer;
user: User;
navigation: NavigationScreenProp<NavigationState, NavigationParams>;
listOrders: (customer: Customer, user: User) => OrderAction<Order>;
}
export class OrdersScreen extends React.Component<OrderScreenProps> {
static navigationOptions = {
header: (
<View style={headerStyles.container}>
<Text style={headerStyles.text}>Orders</Text>
</View>
)
};
constructor(props: OrderScreenProps) {
super(props);
}
render() {
return <OrderListView
Orders={this.props.Orders}
/>;
}
componentDidMount() {
this.props.listOrders(this.props.customer, this.props.user);
}
}
function mapStateToProps(state: AppState): OrderScreenProps {
return {
user: state.user,
customer: state.customer
} as OrderScreenProps;
}
function mapDispatchToProps(dispatch: Dispatch<AnyAction>) {
return bindActionCreators({
listOrders: listOrdersActionCreator
}, dispatch);
}
const OrdersContainer = withNavigation(connect(mapStateToProps, mapDispatchToProps)(OrdersScreen));
export { OrdersContainer };interface OrderScreenProps {
Orders: Map<string, Order>;
customer: Customer;
user: User;
navigation: NavigationScreenProp<NavigationState, NavigationParams>;
listOrders: (customer: Customer, user: User) => OrderAction<Order>;
}
export class OrdersScreen extends React.Component<OrderScreenProps> {
static navigationOptions = {
header: (
<View style={headerStyles.container}>
<Text style={headerStyles.text}>Orders</Text>
</View>
)
};
constructor(props: OrderScreenProps) {
super(props);
}
render() {
return <OrderListView
Orders={this.props.Orders}
/>;
}
componentDidMount() {
this.props.listOrders(this.props.customer, this.props.user);
}
}
function mapStateToProps(state: AppState): OrderScreenProps {
return {
user: state.user,
customer: state.customer
} as OrderScreenProps;
}
function mapDispatchToProps(dispatch: Dispatch<AnyAction>) {
return bindActionCreators({
listOrders: listOrdersActionCreator
}, dispatch);
}
const OrdersContainer = withNavigation(connect(mapStateToProps, mapDispatchToProps)(OrdersScreen));
export { OrdersContainer };interface OrderScreenProps {
Orders: Map<string, Order>;
customer: Customer;
user: User;
navigation: NavigationScreenProp<NavigationState, NavigationParams>;
listOrders: (customer: Customer, user: User) => OrderAction<Order>;
}
export class OrdersScreen extends React.Component<OrderScreenProps> {
static navigationOptions = {
header: (
<View style={headerStyles.container}>
<Text style={headerStyles.text}>Orders</Text>
</View>
)
};
constructor(props: OrderScreenProps) {
super(props);
}
render() {
return <OrderListView
Orders={this.props.Orders}
/>;
}
componentDidMount() {
this.props.listOrders(this.props.customer, this.props.user);
}
}
function mapStateToProps(state: AppState): OrderScreenProps {
return {
user: state.user,
customer: state.customer
} as OrderScreenProps;
}
function mapDispatchToProps(dispatch: Dispatch<AnyAction>) {
return bindActionCreators({
listOrders: listOrdersActionCreator
}, dispatch);
}
const OrdersContainer = withNavigation(connect(mapStateToProps, mapDispatchToProps)(OrdersScreen));
export { OrdersContainer };react-native redux react-navigation
react-native redux react-navigation
asked Dec 27 '18 at 16:04
jpadilladev
4081716
asked Dec 27 '18 at 16:04
jpadilladev
4081716
edited Dec 29 '18 at 12:23
asked Dec 27 '18 at 16:04
jpadilladev
4081716
asked Dec 27 '18 at 16:04
jpadilladev
4081716
asked Dec 27 '18 at 16:04
jpadilladev
4081716
4081716
Can you show the fullOrdersScreencomponent? As that is probably where you error is.
– Andrew
Dec 27 '18 at 18:23
@Andrew I edited my question. I don't think it's problem of OrdersScreen. I made a simple test clicking on the button and then navigating (without the redux flow) to the screen, and it worked. It should be something with componentDidUpdate...
– jpadilladev
Dec 28 '18 at 23:38
IsOrdersScreendifferent fromOrderScreen?
– Drew Reese
Dec 28 '18 at 23:54
By only showing snippets of code rather than full components you make it hard for someone to debug it. Looking at the error you posted it saysThe error is located at: in Connect(OrdersScreen)my first step is to check the code in theOrdersScreen. You’re asking for other people to find your error but only showing a small piece of the puzzle. I’m afraid I can’t help you. Good luck in your search for a solution.
– Andrew
Dec 29 '18 at 8:18
@Andrew Sorry, I didn't think it was really necessary, my mistake. I added the full OrdersScreen now. The error now is a bit different because I made some changes.
– jpadilladev
Dec 29 '18 at 12:26
|
show 1 more comment
Can you show the fullOrdersScreencomponent? As that is probably where you error is.
– Andrew
Dec 27 '18 at 18:23
@Andrew I edited my question. I don't think it's problem of OrdersScreen. I made a simple test clicking on the button and then navigating (without the redux flow) to the screen, and it worked. It should be something with componentDidUpdate...
– jpadilladev
Dec 28 '18 at 23:38
IsOrdersScreendifferent fromOrderScreen?
– Drew Reese
Dec 28 '18 at 23:54
By only showing snippets of code rather than full components you make it hard for someone to debug it. Looking at the error you posted it saysThe error is located at: in Connect(OrdersScreen)my first step is to check the code in theOrdersScreen. You’re asking for other people to find your error but only showing a small piece of the puzzle. I’m afraid I can’t help you. Good luck in your search for a solution.
– Andrew
Dec 29 '18 at 8:18
@Andrew Sorry, I didn't think it was really necessary, my mistake. I added the full OrdersScreen now. The error now is a bit different because I made some changes.
– jpadilladev
Dec 29 '18 at 12:26
Can you show the full
OrdersScreen component? As that is probably where you error is.– Andrew
Dec 27 '18 at 18:23
Can you show the full
OrdersScreen component? As that is probably where you error is.– Andrew
Dec 27 '18 at 18:23
@Andrew I edited my question. I don't think it's problem of OrdersScreen. I made a simple test clicking on the button and then navigating (without the redux flow) to the screen, and it worked. It should be something with componentDidUpdate...
– jpadilladev
Dec 28 '18 at 23:38
@Andrew I edited my question. I don't think it's problem of OrdersScreen. I made a simple test clicking on the button and then navigating (without the redux flow) to the screen, and it worked. It should be something with componentDidUpdate...
– jpadilladev
Dec 28 '18 at 23:38
Is
OrdersScreen different from OrderScreen?– Drew Reese
Dec 28 '18 at 23:54
Is
OrdersScreen different from OrderScreen?– Drew Reese
Dec 28 '18 at 23:54
By only showing snippets of code rather than full components you make it hard for someone to debug it. Looking at the error you posted it says
The error is located at: in Connect(OrdersScreen) my first step is to check the code in the OrdersScreen. You’re asking for other people to find your error but only showing a small piece of the puzzle. I’m afraid I can’t help you. Good luck in your search for a solution.– Andrew
Dec 29 '18 at 8:18
By only showing snippets of code rather than full components you make it hard for someone to debug it. Looking at the error you posted it says
The error is located at: in Connect(OrdersScreen) my first step is to check the code in the OrdersScreen. You’re asking for other people to find your error but only showing a small piece of the puzzle. I’m afraid I can’t help you. Good luck in your search for a solution.– Andrew
Dec 29 '18 at 8:18
@Andrew Sorry, I didn't think it was really necessary, my mistake. I added the full OrdersScreen now. The error now is a bit different because I made some changes.
– jpadilladev
Dec 29 '18 at 12:26
@Andrew Sorry, I didn't think it was really necessary, my mistake. I added the full OrdersScreen now. The error now is a bit different because I made some changes.
– jpadilladev
Dec 29 '18 at 12:26
|
show 1 more comment
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53947757%2freact-native-navigation-cannot-read-property-tostring-of-undefined-using-red%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53947757%2freact-native-navigation-cannot-read-property-tostring-of-undefined-using-red%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Can you show the full
OrdersScreencomponent? As that is probably where you error is.– Andrew
Dec 27 '18 at 18:23
@Andrew I edited my question. I don't think it's problem of OrdersScreen. I made a simple test clicking on the button and then navigating (without the redux flow) to the screen, and it worked. It should be something with componentDidUpdate...
– jpadilladev
Dec 28 '18 at 23:38
Is
OrdersScreendifferent fromOrderScreen?– Drew Reese
Dec 28 '18 at 23:54
By only showing snippets of code rather than full components you make it hard for someone to debug it. Looking at the error you posted it says
The error is located at: in Connect(OrdersScreen)my first step is to check the code in theOrdersScreen. You’re asking for other people to find your error but only showing a small piece of the puzzle. I’m afraid I can’t help you. Good luck in your search for a solution.– Andrew
Dec 29 '18 at 8:18
@Andrew Sorry, I didn't think it was really necessary, my mistake. I added the full OrdersScreen now. The error now is a bit different because I made some changes.
– jpadilladev
Dec 29 '18 at 12:26