Mixing
React Native this.props.navigation.navigate is not working when using it in createBottomTabNavigator
I have my app structured in a way that it has a bottom tab navigator. Currently I have only two tabs. Home screen and Settings. The navigation is defined like this:
import React, { Component } from 'react';
import { StyleSheet, Text, View } from "react-native";
import { createBottomTabNavigator } from "react-navigation"
import Icon from 'react-native-vector-icons/Ionicons'
import HomeTab from './HomeTab'
import SettingsTab from './SettingsTab'
export default createBottomTabNavigator({
Home:{
screen: HomeTab,
navigationOptions: {
tabBarLabel: 'Home',
tabBarIcon:({tintColor})=>(
<Icon name="ios-home" color={tintColor} size={24}/>
)
}
},
Settings:{
screen: SettingsTab,
navigationOptions: {
tabBarLabel: 'Settings',
tabBarIcon:({tintColor})=>(
<Icon name="ios-settings" color={tintColor} size={24}/>
)
}
}
},
{
//router config
initialRoutName: 'Home',
order: ['Home', 'Settings'],
//navigation for complete tab navigator
navigationOptions:{
tabBarVisible:true
},
tabBarOptions:{
activeTintColor:'red',
inactiveTintColor:'grey'
}
});
in my HomeTab I have defined a FlatList and for each of the list items I wanted to add onPress event. To do so, I decided to use navigation prop reference. In order to do that I have implemented this component as follows:
import React, { Component } from "react";
import {
View,
Text,
StyleSheet,
Button,
FlatList,
Image,
ActivityIndicator,
TouchableOpacity,
ToastAndroid
} from "react-native";
import * as firebase from 'firebase';
export class HomeTab extends Component{
constructor(){
super()
this.state = {
dataSource: ,
isLoading: true
}
}
renderItem = ({item}) => {
return (
<TouchableOpacity style={{ flex: 1, flexDirection: 'row', marginBottom: 3 }}
onPress = {() => {this.props.navigation.navigate("ComeHere")}}>
<Image style={{ width: 40, height: 40, margin: 5 }}
source={{ uri: 'https://cdn2.iconfinder.com/data/icons/IconsLandVistaMapMarkersIconsDemo/256/MapMarker_Marker_Outside_Azure.png' }}
/>
<View style={{ flex: 1, justifyContent: 'center' }}>
<Text style={{ fontSize: 16, color: 'green' }}>
{item.city}, {item.zipCode}
</Text>
<Text style={{ fontSize: 13, marginBottom: 15 }}>
{item.address}
</Text>
</View>
<View style={{justifyContent: 'flex-end', justifyContent: 'center', marginRight: 10}}>
<Text style={{ fontSize: 16, fontWeight: 'bold' }}>
({item.numberOfMailItems})
</Text>
</View>
</TouchableOpacity>
)
}
renderSeparator = () => {
return (
<View
style={{height: 1, width: '100%', backgroundColor: 'black'}}>
</View>
)
}
componentDidMount(){
// Fetch some server data
}
render(){
return (
this.state.isLoading
?
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<ActivityIndicator size="large" color="green" animating />
</View>
:
<View style={styles.container}>
<FlatList style={{marginTop: 30}}
data={this.state.dataSource}
renderItem={this.renderItem}
keyExtractor={(item, index) => item.mailboxId}
ItemSeparatorComponent={this.renderSeparator}
/>
</View>
)
}
}
export default HomeTab;
And when I click an item, nothing happens. The issue is not that the event is not being triggered because when I add console.log('something') there it works.
Interesting thing here is that when I add this
console.log(JSON.stringify(this.props))
to the onPress event I get the following:
{"navigation":{"state":{"key":"Home","routeName":"Home"},"actions":{}}}
I mean, I can not see .navigate defined there at all.
You can see the snack of it here: https://snack.expo.io/HJuo0e5ZE
When I start it there I get an error saying:
Device: (3:3587) Invariant Violation: The navigation prop is missing
for this navigator. In react-navigation 3 you must set up your app
container directly. More info:
https://reactnavigation.org/docs/en/app-containers.html
When I tried to apply what is described here (wrapped up by createBottomTabNavigator into the createAppContainer) I started to receive an error saying that
(0, _reactNavigation.createAppContainer) is not a function (In
'(0,_reactNavigation.createAppContainer)(AppNavigator)','(0,_reactNavigation.createAppContainer)'
is undefined)
react-native react-navigation react-props
asked Jan 1 at 20:09
user2128702user2128702
5611832
|
show 5 more comments
I have my app structured in a way that it has a bottom tab navigator. Currently I have only two tabs. Home screen and Settings. The navigation is defined like this:
import React, { Component } from 'react';
import { StyleSheet, Text, View } from "react-native";
import { createBottomTabNavigator } from "react-navigation"
import Icon from 'react-native-vector-icons/Ionicons'
import HomeTab from './HomeTab'
import SettingsTab from './SettingsTab'
export default createBottomTabNavigator({
Home:{
screen: HomeTab,
navigationOptions: {
tabBarLabel: 'Home',
tabBarIcon:({tintColor})=>(
<Icon name="ios-home" color={tintColor} size={24}/>
)
}
},
Settings:{
screen: SettingsTab,
navigationOptions: {
tabBarLabel: 'Settings',
tabBarIcon:({tintColor})=>(
<Icon name="ios-settings" color={tintColor} size={24}/>
)
}
}
},
{
//router config
initialRoutName: 'Home',
order: ['Home', 'Settings'],
//navigation for complete tab navigator
navigationOptions:{
tabBarVisible:true
},
tabBarOptions:{
activeTintColor:'red',
inactiveTintColor:'grey'
}
});
in my HomeTab I have defined a FlatList and for each of the list items I wanted to add onPress event. To do so, I decided to use navigation prop reference. In order to do that I have implemented this component as follows:
import React, { Component } from "react";
import {
View,
Text,
StyleSheet,
Button,
FlatList,
Image,
ActivityIndicator,
TouchableOpacity,
ToastAndroid
} from "react-native";
import * as firebase from 'firebase';
export class HomeTab extends Component{
constructor(){
super()
this.state = {
dataSource: ,
isLoading: true
}
}
renderItem = ({item}) => {
return (
<TouchableOpacity style={{ flex: 1, flexDirection: 'row', marginBottom: 3 }}
onPress = {() => {this.props.navigation.navigate("ComeHere")}}>
<Image style={{ width: 40, height: 40, margin: 5 }}
source={{ uri: 'https://cdn2.iconfinder.com/data/icons/IconsLandVistaMapMarkersIconsDemo/256/MapMarker_Marker_Outside_Azure.png' }}
/>
<View style={{ flex: 1, justifyContent: 'center' }}>
<Text style={{ fontSize: 16, color: 'green' }}>
{item.city}, {item.zipCode}
</Text>
<Text style={{ fontSize: 13, marginBottom: 15 }}>
{item.address}
</Text>
</View>
<View style={{justifyContent: 'flex-end', justifyContent: 'center', marginRight: 10}}>
<Text style={{ fontSize: 16, fontWeight: 'bold' }}>
({item.numberOfMailItems})
</Text>
</View>
</TouchableOpacity>
)
}
renderSeparator = () => {
return (
<View
style={{height: 1, width: '100%', backgroundColor: 'black'}}>
</View>
)
}
componentDidMount(){
// Fetch some server data
}
render(){
return (
this.state.isLoading
?
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<ActivityIndicator size="large" color="green" animating />
</View>
:
<View style={styles.container}>
<FlatList style={{marginTop: 30}}
data={this.state.dataSource}
renderItem={this.renderItem}
keyExtractor={(item, index) => item.mailboxId}
ItemSeparatorComponent={this.renderSeparator}
/>
</View>
)
}
}
export default HomeTab;
And when I click an item, nothing happens. The issue is not that the event is not being triggered because when I add console.log('something') there it works.
Interesting thing here is that when I add this
console.log(JSON.stringify(this.props))
to the onPress event I get the following:
{"navigation":{"state":{"key":"Home","routeName":"Home"},"actions":{}}}
I mean, I can not see .navigate defined there at all.
You can see the snack of it here: https://snack.expo.io/HJuo0e5ZE
When I start it there I get an error saying:
Device: (3:3587) Invariant Violation: The navigation prop is missing
for this navigator. In react-navigation 3 you must set up your app
container directly. More info:
https://reactnavigation.org/docs/en/app-containers.html
When I tried to apply what is described here (wrapped up by createBottomTabNavigator into the createAppContainer) I started to receive an error saying that
(0, _reactNavigation.createAppContainer) is not a function (In
'(0,_reactNavigation.createAppContainer)(AppNavigator)','(0,_reactNavigation.createAppContainer)'
is undefined)
react-native react-navigation react-props
asked Jan 1 at 20:09
user2128702user2128702
5611832
are You using react-navigation v3?
– Paweł Mikołajczuk
Jan 1 at 20:13
npm show react-navigation version => returns 3.0.9
– user2128702
Jan 1 at 20:16
And what You have in console log? There is error about missingnavigatefunctions?JSON.stringifywill not show you functions. IMO it's problem with not existing component name in you code. You try to go toComeHerebut there is no route like that in navigation. Change it toSettings. And be sure that You create new app container - there was BC break between v2 and v3 releases.
– Paweł Mikołajczuk
Jan 1 at 20:18
If I do console.log(this.props.navigation.navigate) It returns 'undefined'. And when I try to execute it nothing happens. 'ComeHere' is an existing component in the same folder. What do you mean by "Create new app container"?
– user2128702
Jan 1 at 20:26
checkout new docs: reactnavigation.org/docs/en/hello-react-navigation.html. Important part:export default createAppContainer(AppNavigator);. Before You had to export only navigator.
– Paweł Mikołajczuk
Jan 1 at 20:29
|
show 5 more comments
I have my app structured in a way that it has a bottom tab navigator. Currently I have only two tabs. Home screen and Settings. The navigation is defined like this:
import React, { Component } from 'react';
import { StyleSheet, Text, View } from "react-native";
import { createBottomTabNavigator } from "react-navigation"
import Icon from 'react-native-vector-icons/Ionicons'
import HomeTab from './HomeTab'
import SettingsTab from './SettingsTab'
export default createBottomTabNavigator({
Home:{
screen: HomeTab,
navigationOptions: {
tabBarLabel: 'Home',
tabBarIcon:({tintColor})=>(
<Icon name="ios-home" color={tintColor} size={24}/>
)
}
},
Settings:{
screen: SettingsTab,
navigationOptions: {
tabBarLabel: 'Settings',
tabBarIcon:({tintColor})=>(
<Icon name="ios-settings" color={tintColor} size={24}/>
)
}
}
},
{
//router config
initialRoutName: 'Home',
order: ['Home', 'Settings'],
//navigation for complete tab navigator
navigationOptions:{
tabBarVisible:true
},
tabBarOptions:{
activeTintColor:'red',
inactiveTintColor:'grey'
}
});
in my HomeTab I have defined a FlatList and for each of the list items I wanted to add onPress event. To do so, I decided to use navigation prop reference. In order to do that I have implemented this component as follows:
import React, { Component } from "react";
import {
View,
Text,
StyleSheet,
Button,
FlatList,
Image,
ActivityIndicator,
TouchableOpacity,
ToastAndroid
} from "react-native";
import * as firebase from 'firebase';
export class HomeTab extends Component{
constructor(){
super()
this.state = {
dataSource: ,
isLoading: true
}
}
renderItem = ({item}) => {
return (
<TouchableOpacity style={{ flex: 1, flexDirection: 'row', marginBottom: 3 }}
onPress = {() => {this.props.navigation.navigate("ComeHere")}}>
<Image style={{ width: 40, height: 40, margin: 5 }}
source={{ uri: 'https://cdn2.iconfinder.com/data/icons/IconsLandVistaMapMarkersIconsDemo/256/MapMarker_Marker_Outside_Azure.png' }}
/>
<View style={{ flex: 1, justifyContent: 'center' }}>
<Text style={{ fontSize: 16, color: 'green' }}>
{item.city}, {item.zipCode}
</Text>
<Text style={{ fontSize: 13, marginBottom: 15 }}>
{item.address}
</Text>
</View>
<View style={{justifyContent: 'flex-end', justifyContent: 'center', marginRight: 10}}>
<Text style={{ fontSize: 16, fontWeight: 'bold' }}>
({item.numberOfMailItems})
</Text>
</View>
</TouchableOpacity>
)
}
renderSeparator = () => {
return (
<View
style={{height: 1, width: '100%', backgroundColor: 'black'}}>
</View>
)
}
componentDidMount(){
// Fetch some server data
}
render(){
return (
this.state.isLoading
?
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<ActivityIndicator size="large" color="green" animating />
</View>
:
<View style={styles.container}>
<FlatList style={{marginTop: 30}}
data={this.state.dataSource}
renderItem={this.renderItem}
keyExtractor={(item, index) => item.mailboxId}
ItemSeparatorComponent={this.renderSeparator}
/>
</View>
)
}
}
export default HomeTab;
And when I click an item, nothing happens. The issue is not that the event is not being triggered because when I add console.log('something') there it works.
Interesting thing here is that when I add this
console.log(JSON.stringify(this.props))
to the onPress event I get the following:
{"navigation":{"state":{"key":"Home","routeName":"Home"},"actions":{}}}
I mean, I can not see .navigate defined there at all.
You can see the snack of it here: https://snack.expo.io/HJuo0e5ZE
When I start it there I get an error saying:
Device: (3:3587) Invariant Violation: The navigation prop is missing
for this navigator. In react-navigation 3 you must set up your app
container directly. More info:
https://reactnavigation.org/docs/en/app-containers.html
When I tried to apply what is described here (wrapped up by createBottomTabNavigator into the createAppContainer) I started to receive an error saying that
(0, _reactNavigation.createAppContainer) is not a function (In
'(0,_reactNavigation.createAppContainer)(AppNavigator)','(0,_reactNavigation.createAppContainer)'
is undefined)
react-native react-navigation react-props
asked Jan 1 at 20:09
user2128702user2128702
5611832
I have my app structured in a way that it has a bottom tab navigator. Currently I have only two tabs. Home screen and Settings. The navigation is defined like this:
import React, { Component } from 'react';
import { StyleSheet, Text, View } from "react-native";
import { createBottomTabNavigator } from "react-navigation"
import Icon from 'react-native-vector-icons/Ionicons'
import HomeTab from './HomeTab'
import SettingsTab from './SettingsTab'
export default createBottomTabNavigator({
Home:{
screen: HomeTab,
navigationOptions: {
tabBarLabel: 'Home',
tabBarIcon:({tintColor})=>(
<Icon name="ios-home" color={tintColor} size={24}/>
)
}
},
Settings:{
screen: SettingsTab,
navigationOptions: {
tabBarLabel: 'Settings',
tabBarIcon:({tintColor})=>(
<Icon name="ios-settings" color={tintColor} size={24}/>
)
}
}
},
{
//router config
initialRoutName: 'Home',
order: ['Home', 'Settings'],
//navigation for complete tab navigator
navigationOptions:{
tabBarVisible:true
},
tabBarOptions:{
activeTintColor:'red',
inactiveTintColor:'grey'
}
});
in my HomeTab I have defined a FlatList and for each of the list items I wanted to add onPress event. To do so, I decided to use navigation prop reference. In order to do that I have implemented this component as follows:
import React, { Component } from "react";
import {
View,
Text,
StyleSheet,
Button,
FlatList,
Image,
ActivityIndicator,
TouchableOpacity,
ToastAndroid
} from "react-native";
import * as firebase from 'firebase';
export class HomeTab extends Component{
constructor(){
super()
this.state = {
dataSource: ,
isLoading: true
}
}
renderItem = ({item}) => {
return (
<TouchableOpacity style={{ flex: 1, flexDirection: 'row', marginBottom: 3 }}
onPress = {() => {this.props.navigation.navigate("ComeHere")}}>
<Image style={{ width: 40, height: 40, margin: 5 }}
source={{ uri: 'https://cdn2.iconfinder.com/data/icons/IconsLandVistaMapMarkersIconsDemo/256/MapMarker_Marker_Outside_Azure.png' }}
/>
<View style={{ flex: 1, justifyContent: 'center' }}>
<Text style={{ fontSize: 16, color: 'green' }}>
{item.city}, {item.zipCode}
</Text>
<Text style={{ fontSize: 13, marginBottom: 15 }}>
{item.address}
</Text>
</View>
<View style={{justifyContent: 'flex-end', justifyContent: 'center', marginRight: 10}}>
<Text style={{ fontSize: 16, fontWeight: 'bold' }}>
({item.numberOfMailItems})
</Text>
</View>
</TouchableOpacity>
)
}
renderSeparator = () => {
return (
<View
style={{height: 1, width: '100%', backgroundColor: 'black'}}>
</View>
)
}
componentDidMount(){
// Fetch some server data
}
render(){
return (
this.state.isLoading
?
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<ActivityIndicator size="large" color="green" animating />
</View>
:
<View style={styles.container}>
<FlatList style={{marginTop: 30}}
data={this.state.dataSource}
renderItem={this.renderItem}
keyExtractor={(item, index) => item.mailboxId}
ItemSeparatorComponent={this.renderSeparator}
/>
</View>
)
}
}
export default HomeTab;
And when I click an item, nothing happens. The issue is not that the event is not being triggered because when I add console.log('something') there it works.
Interesting thing here is that when I add this
console.log(JSON.stringify(this.props))
to the onPress event I get the following:
{"navigation":{"state":{"key":"Home","routeName":"Home"},"actions":{}}}
I mean, I can not see .navigate defined there at all.
You can see the snack of it here: https://snack.expo.io/HJuo0e5ZE
When I start it there I get an error saying:
Device: (3:3587) Invariant Violation: The navigation prop is missing
for this navigator. In react-navigation 3 you must set up your app
container directly. More info:
https://reactnavigation.org/docs/en/app-containers.html
When I tried to apply what is described here (wrapped up by createBottomTabNavigator into the createAppContainer) I started to receive an error saying that
(0, _reactNavigation.createAppContainer) is not a function (In
'(0,_reactNavigation.createAppContainer)(AppNavigator)','(0,_reactNavigation.createAppContainer)'
is undefined)
react-native react-navigation react-props
react-native react-navigation react-props
asked Jan 1 at 20:09
user2128702user2128702
5611832
asked Jan 1 at 20:09
user2128702user2128702
5611832
edited Jan 2 at 9:57
user2128702
asked Jan 1 at 20:09
user2128702user2128702
5611832
asked Jan 1 at 20:09
user2128702user2128702
5611832
asked Jan 1 at 20:09
user2128702user2128702
5611832
5611832
are You using react-navigation v3?
– Paweł Mikołajczuk
Jan 1 at 20:13
npm show react-navigation version => returns 3.0.9
– user2128702
Jan 1 at 20:16
And what You have in console log? There is error about missingnavigatefunctions?JSON.stringifywill not show you functions. IMO it's problem with not existing component name in you code. You try to go toComeHerebut there is no route like that in navigation. Change it toSettings. And be sure that You create new app container - there was BC break between v2 and v3 releases.
– Paweł Mikołajczuk
Jan 1 at 20:18
If I do console.log(this.props.navigation.navigate) It returns 'undefined'. And when I try to execute it nothing happens. 'ComeHere' is an existing component in the same folder. What do you mean by "Create new app container"?
– user2128702
Jan 1 at 20:26
checkout new docs: reactnavigation.org/docs/en/hello-react-navigation.html. Important part:export default createAppContainer(AppNavigator);. Before You had to export only navigator.
– Paweł Mikołajczuk
Jan 1 at 20:29
|
show 5 more comments
are You using react-navigation v3?
– Paweł Mikołajczuk
Jan 1 at 20:13
npm show react-navigation version => returns 3.0.9
– user2128702
Jan 1 at 20:16
And what You have in console log? There is error about missingnavigatefunctions?JSON.stringifywill not show you functions. IMO it's problem with not existing component name in you code. You try to go toComeHerebut there is no route like that in navigation. Change it toSettings. And be sure that You create new app container - there was BC break between v2 and v3 releases.
– Paweł Mikołajczuk
Jan 1 at 20:18
If I do console.log(this.props.navigation.navigate) It returns 'undefined'. And when I try to execute it nothing happens. 'ComeHere' is an existing component in the same folder. What do you mean by "Create new app container"?
– user2128702
Jan 1 at 20:26
checkout new docs: reactnavigation.org/docs/en/hello-react-navigation.html. Important part:export default createAppContainer(AppNavigator);. Before You had to export only navigator.
– Paweł Mikołajczuk
Jan 1 at 20:29
are You using react-navigation v3?
– Paweł Mikołajczuk
Jan 1 at 20:13
are You using react-navigation v3?
– Paweł Mikołajczuk
Jan 1 at 20:13
npm show react-navigation version => returns 3.0.9
– user2128702
Jan 1 at 20:16
npm show react-navigation version => returns 3.0.9
– user2128702
Jan 1 at 20:16
And what You have in console log? There is error about missing
navigate functions? JSON.stringify will not show you functions. IMO it's problem with not existing component name in you code. You try to go to ComeHere but there is no route like that in navigation. Change it to Settings. And be sure that You create new app container - there was BC break between v2 and v3 releases.– Paweł Mikołajczuk
Jan 1 at 20:18
And what You have in console log? There is error about missing
navigate functions? JSON.stringify will not show you functions. IMO it's problem with not existing component name in you code. You try to go to ComeHere but there is no route like that in navigation. Change it to Settings. And be sure that You create new app container - there was BC break between v2 and v3 releases.– Paweł Mikołajczuk
Jan 1 at 20:18
If I do console.log(this.props.navigation.navigate) It returns 'undefined'. And when I try to execute it nothing happens. 'ComeHere' is an existing component in the same folder. What do you mean by "Create new app container"?
– user2128702
Jan 1 at 20:26
If I do console.log(this.props.navigation.navigate) It returns 'undefined'. And when I try to execute it nothing happens. 'ComeHere' is an existing component in the same folder. What do you mean by "Create new app container"?
– user2128702
Jan 1 at 20:26
checkout new docs: reactnavigation.org/docs/en/hello-react-navigation.html. Important part:
export default createAppContainer(AppNavigator);. Before You had to export only navigator.– Paweł Mikołajczuk
Jan 1 at 20:29
checkout new docs: reactnavigation.org/docs/en/hello-react-navigation.html. Important part:
export default createAppContainer(AppNavigator);. Before You had to export only navigator.– Paweł Mikołajczuk
Jan 1 at 20:29
|
show 5 more comments
0
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
});
}
});
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%2f53998582%2freact-native-this-props-navigation-navigate-is-not-working-when-using-it-in-crea%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
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%2f53998582%2freact-native-this-props-navigation-navigate-is-not-working-when-using-it-in-crea%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
are You using react-navigation v3?
– Paweł Mikołajczuk
Jan 1 at 20:13
npm show react-navigation version => returns 3.0.9
– user2128702
Jan 1 at 20:16
And what You have in console log? There is error about missing
navigatefunctions?JSON.stringifywill not show you functions. IMO it's problem with not existing component name in you code. You try to go toComeHerebut there is no route like that in navigation. Change it toSettings. And be sure that You create new app container - there was BC break between v2 and v3 releases.– Paweł Mikołajczuk
Jan 1 at 20:18
If I do console.log(this.props.navigation.navigate) It returns 'undefined'. And when I try to execute it nothing happens. 'ComeHere' is an existing component in the same folder. What do you mean by "Create new app container"?
– user2128702
Jan 1 at 20:26
checkout new docs: reactnavigation.org/docs/en/hello-react-navigation.html. Important part:
export default createAppContainer(AppNavigator);. Before You had to export only navigator.– Paweł Mikołajczuk
Jan 1 at 20:29