Develop Reference

Passing data between Stack navigators in one Drawer navigator

Is possible to pass data between two stack navigators, in one drawer navigator?
i.e:
-DrawerNavigationA
--StackNavigationA
--StackNavigationB
I want to pass some data (you can see in code below) from StackNavigationB to StackNavigationA. What I need to do? I am looking a 3rd day for some solution, but I found nothing.
App.js
import React from 'react';
import Navigator from './routes/drawer';
export default function App() {
return (
<Navigator />
);
}
Home.js
import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
export default function Home({ navigation }) {
return (
<View style={styles.container}>
<Text> Hello {/* here i want to show a passed value from ChooseName */} from home! </Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}
});
ChooseName.js
import React, { useState } from 'react';
import { StyleSheet, View, Text, TouchableOpacity, FlatList } from 'react-native';
export default function ChooseName({ navigation }) {
const [names, setNames] = useState([
{ name: 'Adam', key: '1' },
{ name: 'Ivan', key: '2' },
{ name: 'Josh', key: '3' },
]);
//after clicking on the name
const onPressHandler = (name) => {
// //Do something to pass name to Home screen
// //and navigate to Home screen
navigation.navigate('HomeStack');
console.log('hello' + name);
}
return (
<View style={styles.container}>
<FlatList data={names} renderItem={({ item }) => (
<TouchableOpacity onPress={() => onPressHandler(item.name)}>
<Text style={styles.name}>{ item.name }</Text>
</TouchableOpacity>
)} />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
name: {
padding: 10,
marginBottom: 10,
}
});
HomeStack.js
import { createStackNavigator } from 'react-navigation-stack';
import Home from '../screens/Home';
const screens = {
Home: {
screen: Home,
navigationOptions: {
title: 'Home',
},
},
};
const HomeStack = createStackNavigator(screens, {
defaultNavigationOptions: {
headerTintColor: '#444',
headerStyle: { backgroundColor: '#eee', height: 60 }
}
});
export default HomeStack;
ChooseNameStack.js
import { createStackNavigator } from 'react-navigation-stack';
import ChooseName from '../screens/ChooseName';
const screens = {
ChooseName: {
screen: ChooseName,
navigationOptions: {
title: 'ChooseName'
},
},
}
const AboutStack = createStackNavigator(screens, {
defaultNavigationOptions: {
headerTintColor: '#444',
headerStyle: { backgroundColor: '#eee', height: 60 },
}
});
export default AboutStack;
router.js
import { createDrawerNavigator } from 'react-navigation-drawer';
import { createAppContainer } from 'react-navigation';
// stacks
import HomeStack from './HomeStack';
import ChooseNameStack from './ChooseNameStack';
// drawer navigation options
const RootDrawerNavigator = createDrawerNavigator({
HomeStack: {
screen: HomeStack,
},
ChooseNameStack: {
screen: ChooseNameStack,
},
});
export default createAppContainer(RootDrawerNavigator);
navigation versions
"react-navigation": "^4.3.9",
"react-navigation-drawer": "^2.4.13",
"react-navigation-stack": "^2.4.0"
As you can see, I want to pass a name from ChooseName to Home, when Touchable is clicked and then navigate to Home page.
Thank you for responses.

you can pass it as props like: navigation.navigate("Home",{'id':2222}) and you are able to get it in the next route. Hope it helps
you will change this line in ChooseName.js navigation.navigate('HomeStack'); in your code to navigation.navigate('HomeStack',{name:name});
then in your Home.js change this export default function Home({ navigation }) to export default function Home({ navigation, route }) and add a console.log(route) and console.log(navigation) to understand the situation that is all

undefined is not an object (evaluating 'this.props.navigation') - React Native

undefined is not an object (evaluating 'this.props.navigation')
I keep on getting this error, and I can't figure out what's wrong with my code. The program is meant to check if the user is logged in, and if they aren't, they are directed to the Sign Up page. However, it doesn't seem to work. Could anybody tell me what is wrong?
Loading Screen:
import React, {Component} from 'react';
import { View, Text, ActivityIndicator, StyleSheet } from 'react-native'
import firebase from 'firebase'
export default class Loading extends React.Component{
componentDidMount() {
firebase.auth().onAuthStateChanged(function(user) {
console.log(user)
if (user) {
console.log('user is signed in')
} else {
console.log('user is not signed in')
this.props.navigation.navigate('SignUp')
}
});
}
render() {
return (
<View style={styles.container}>
<Text>Loading</Text>
<ActivityIndicator size="large" />
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}
})
App.js:
import {createAppContainer, createSwitchNavigator, SwitchNavigator} from 'react-navigation';
import {createBottomTabNavigator} from 'react-navigation-tabs';
import Ion from 'react-native-vector-icons/Ionicons';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import Home from './src/screens/Home';
import Following from './src/screens/Following';
import Add from './src/screens/Add';
import Groups from './src/screens/Groups';
import Profile from './src/screens/Profile';
import Loading from './src/screens/Loading';
import SignUp from './src/screens/SignUp';
import Login from './src/screens/Login';
import React, {Component} from 'react';
const MainTabs = createBottomTabNavigator(
{
Home: {
screen: Home,
navigationOptions: {
tabBarLabel: "HOME",
tabBarIcon: ({ tintColor }) => (
<FontAwesome name="home" color={tintColor} size={24} />
)
}
},
Following: {
screen: Following,
navigationOptions: {
tabBarLabel: "FOLLOWING",
tabBarIcon: ({ tintColor }) => (
<FontAwesome5 name="user-friends" color={tintColor} size={24} />
)
}
},
Add: {
screen: Add,
navigationOptions: {
tabBarLabel: () => null,
tabBarIcon: () => (
<Ion name="ios-add-circle" color="white" size={50} />
)
}
},
Groups: {
screen: Groups,
navigationOptions: {
tabBarLabel: "GROUPS",
tabBarIcon: ({ tintColor }) => (
<MaterialIcons name="group-work" color={tintColor} size={30} />
)
}
},
Profile: {
screen: Profile,
navigationOptions: {
tabBarLabel: "PROFILE",
tabBarIcon: ({ tintColor }) => (
<FontAwesome5 name="user-circle" color={tintColor} size={24} />
)
}
},
},
{
tabBarOptions: {
activeTintColor: "white",
inactiveTintColor: "#CFC8EF",
style: {
backgroundColor: "#2C2061",
borderTopWidth: 0,
shadowOffset: { width: 5, height: 3 },
shadowColor: "black",
shadowOpacity: 0.5,
elevation: 5
}
}
},
);
const switchNavigator = createSwitchNavigator(
{ Loading, SignUp, Login, MainTabs},
{ initialRouteName: "Loading" }
);
const App = createAppContainer(switchNavigator);
export default App;

try ES6 method, which binds this automatically,
componentDidMount = () => { // changes are here
firebase.auth().onAuthStateChanged((user)=> { // changes are here
console.log(user)
if (user) {
console.log('user is signed in')
} else {
console.log('user is not signed in')
this.props.navigation.navigate('SignUp')
}
});
}
if the error still persists which logically should not, but if then try this,
import {withNavigation} from 'react-navigation';
...
class Loading extends React.Component{
...
...
...
}
export default withNavigation(Loading)

TabNavigator CustomTabComponent onPress not navigating to AddCar page

I am using A TabNavigator inside Stack navigator. Stack Navigator Contains 2 Pages Tab Navigator page and AddCar Page, inside TabNavigator I am using Custom Tab Bar Component which uses a custom Button Component when I press on that button it's not routing to Add Car Page,
I have tried to launch the page which is in the tabNavigator also but not working
here is the stack navigator code:
import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { createAppContainer, createStackNavigator } from 'react-navigation';
//Screens
import MainTabs from '../navigators/mainTabNavigator';
import AddCar from '../add_car/container/addCar';
class Navigator extends Component {
render() {
return (
<AppNavigator />
);
}
}
const navigator = createStackNavigator({
MainTabs: { screen: MainTabs },
AddCar: { screen: AddCar }
}, {
initialRouteName: 'MainTabs',
headerMode: 'none'
});
const AppNavigator = createAppContainer(navigator);
export default Navigator;
here is the tabNavigator:
/* eslint-disable no-undef */
/* eslint-disable max-len */
/* eslint-disable no-unused-expressions */
/* eslint-disable react/require-extension */
import React, { Component } from 'react';
import { StyleSheet } from 'react-native';
import { createAppContainer, createBottomTabNavigator, withNavigation, NavigationActions, getActiveChildNavigationOptions } from 'react-navigation';
import Icons from 'react-native-vector-icons/Ionicons';
import { OpacityButton } from '../utilities/buttons';
import Colors from '../Metrics/colors';
//Screens
import CarsList from '../cars_list/container/carsList';
import AddCar from '../add_car/container/addCar';
import Screen from '../screen';
class MainTabNavigator extends Component {
render() {
return (
<AppContainer />
);
}
}
const size = 25;
const routeConfigs = {
CarsList: {
screen: CarsList,
navigationOptions: () => ({
tabBarIcon: ({ tintColor }) => (
<Icons
name="ios-information-circle"
color={tintColor}
size={size}
/>
),
}),
},
AppovedList: {
screen: Screen,
navigationOptions: () => ({
tabBarIcon: ({ tintColor }) => (
<Icons
name="ios-options"
color={tintColor}
size={size}
/>
),
}),
},
AddCars: {
screen: AddCar,
navigationOptions: () => ({
tabBarButtonComponent: () => (
<OpacityButton
name="ios-add-circle-outline"
onPress={() => NavigationActions.navigate('addCar')}
size={size}
color={Colors.brandColor}
containerStyle={{ borderWidth: StyleSheet.hairlineWidth, borderColor: Colors.light, backgroundColor: Colors.white }}
/>
)
})
},
NavList: {
screen: CarsList,
navigationOptions: () => ({
tabBarIcon: ({ tintColor }) => (
<Icons
name="ios-albums"
color={tintColor}
size={size}
/>
),
}),
},
Profile: {
screen: CarsList,
navigationOptions: () => ({
tabBarIcon: ({ tintColor }) => (
<Icons
name="ios-contact"
color={tintColor}
size={size}
/>
),
}),
},
};
const navigationOptions = {
tabBarOptions: {
activeTintColor: Colors.brandColor,
inactiveTintColor: Colors.lightBlack,
showLabel: false,
animation: true
},
headerMode: 'none'
};
const navigator = createBottomTabNavigator(routeConfigs, navigationOptions);
const AppContainer = createAppContainer(navigator);
export default MainTabNavigator;
I Want To navigate to AddCarPage which is there in the stacknavigator, On press of that Custom Tab Component Button ,
Like instagram plus icon opens new page.

for the custom component, you can just call it under tabBarIcon
AddCars: {
screen: AddCar,
navigationOptions: () => ({
tabBarIcon:
<OpacityButton
name="ios-add-circle-outline"
size={size}
color={Colors.brandColor}
containerStyle={{ borderWidth: StyleSheet.hairlineWidth, borderColor: Colors.light, backgroundColor: Colors.white }}
/>
})
},

How to show drawer items using createDrawerNavigator in react-navigation 3?

In my React-native project I am using one Drawer navigation. for this, I have created one class named HomeDrawer. Here's the code for that-
HomeDrawer.js
import React, {Component} from "react";
import {View, Text, StyleSheet, ScrollView, Image, AsyncStorage, ImageBackground} from 'react-native';
import {Container, Content, Icon, Header, Body} from 'native-base';
import {
createAppContainer,
createStackNavigator,
createDrawerNavigator,
createSwitchNavigator
} from "react-navigation";
import NoteMeHome from '../components/NoteMeHome';
import SettingsScreen from '../components/SettingsScreen';
import LoginScreen from '../components/LoginScreen';
import {Root} from 'native-base';
import {Font, AppLoading} from 'expo';
import WelcomeScreen from "../WelcomeScreen";
let user_email ='', user_first_name='';
class HomeDrawer extends Component {
state = {
loading: true
}
static navigationOptions = {
headerLeft: null
}
componentDidMount() {
AsyncStorage.getItem("user_email").then(value => {
console.log(value);
// you will need to handle case when `#ProductTour:key` is not exists
user_email = value;
});
AsyncStorage.getItem("user_first_name").then(value => {
console.log(value);
// you will need to handle case when `#ProductTour:key` is not exists
user_first_name = value;
});
}
async componentWillMount() {
await Font.loadAsync ({
Roboto: require('native-base/Fonts/Roboto.ttf'),
Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf')
});
this.setState({loading:false});
}
render() {
if(this.state.loading) {
return(
<Root>
<AppLoading/>
</Root>
)
}
return(
<MyApp/>
)
}
}
const CustomDrawerContentComponent = (props) => (
<View style={{backgroundColor:"#ffff", height:'100%'}}>
<ImageBackground source={require('../assets/header.jpeg')} style={{width: '100%', height: 150, resizeMode:'cover', backgroundColor:"#aaaa"}}>
<Body style={styles.drawerBody}>
<Image
style={styles.drawerImage}
source={{uri: 'https://img.icons8.com/ultraviolet/80/000000/administrator-male.png'}}
/>
<View style={styles.drawerHeaderText}>
<Text style={{color:'#ffffff', fontSize:20, fontWeight:'400'}}>{user_email}</Text>
<Text style={{color:'#ffffff', fontSize:16, fontWeight:'200'}}>{user_first_name}</Text>
</View>
</Body>
</ImageBackground>
<Content style={{marginTop:30 }}>
<DrawerItems {...props}/>
</Content>
</View>
);
const MyApp = createAppContainer(createDrawerNavigator({
NoteMeHome:{
screen: NoteMeHome
},
Settings:{
screen: SettingsScreen
},
},
{
initialRouteName: 'NoteMeHome',
drawerPosition: 'left',
contentComponent: CustomDrawerContentComponent,
drawerOpenRoute: 'DrawerOpen',
drawerCloseRoute: 'DrawerClose',
drawerToggleRoute: 'DrawerToggle'
}
));
export default HomeDrawer;
It was working perfectly with react-navigation version 1.0.0-beta.11. But after updating to version 3 it is showing the following error-
Can't find variable DrawerItem
If I remove the tag like below then , the code working but not showing any items as the items I include in DrawerItem.
<Content style={{marginTop:30 }}>
<DrawerItems {...props}/>
</Content>
neither the drawer toggle button is working now. But if I drag the screen from left to right it is showing like the below image-
Now, I want to show the drawer items back and remove the marked toolbar in the 2nd image.
So, it would be very nice if someone helps me to solve the problem with the given code

I will make my life easier (but not the easiest... :) by posting part of a working sample code that works with react-navigation 2.18.2.
Not sure if it will help you, but it will not do any harm...
You cannot use the code as is, of course, but maybe it will help you.
You can just ignore it, or even ask me to delete it, whatever you do is fine.
AppNavigator.js (rendered from App.js)
import React from 'react';
import { createDrawerNavigator } from 'react-navigation';
import WelcomeAuthNavigator from './WelcomeAuthNavigator';
import MainTabNavigator from './MainTabNavigator';
import MainDrawerNavigator from './MainDrawerNavigator';
import Drawer from '../screens/drawers/Drawer';
export default createDrawerNavigator({
WelcomeAuth: WelcomeAuthNavigator,
Drawer: MainDrawerNavigator,
Main: MainTabNavigator
}, {
initialRouteName: 'WelcomeAuth',
contentComponent: props => <Drawer {...props} />,
drawerWidth: 180
});
WelcomeAuthNavigator.js
import React from 'react';
import { createStackNavigator } from 'react-navigation';
import Welcome from '../screens/welcome/Welcome';
import LoginScreen from '../screens/auth/LoginScreen';
import SignupScreen from '../screens/auth/SignupScreen';
const AuthStack = createStackNavigator({
Login: { screen: LoginScreen },
Signup: { screen: SignupScreen }
}, {
headerMode: 'none',
initialRouteName: 'Login'
});
const WelcomeAuthNavigator = createStackNavigator({
Welcome: Welcome,
Auth: AuthStack
}, {
headerMode: 'none',
initialRouteName: 'Welcome',
contentComponent: props => <Drawer {...props} />
});
export default WelcomeAuthNavigator;
MainTabNavigator.js
ContactsStack and PhotosStack are defined using createStackNavigator
const MainTabNavigator = createBottomTabNavigator({
PhotosStack,
ContactsStack
}, {
headerMode: 'none',
headerStyle: { backgroundColor: '#4C3E54' },
headerLeft: <Text onPress={() =>
this.props.navigation.navigate('DrawerOpen')}>Menu</Text>,
title: 'Welcome!',
headerTintColor: 'white',
initialRouteName: 'PhotosStack'
});
export default MainTabNavigator;
MainDrawerNavigator.js
import { createStackNavigator } from 'react-navigation';
import Help from '../screens/drawers/Help';
import About from '../screens/drawers/About';
const MainDrawerNavigator = createStackNavigator({
Help: { screen: Help },
About: { screen: About }
}, {
initialRouteName: 'About'
});
export default MainDrawerNavigator;
Drawer.js
import React from "react";
import { SafeAreaView, View } from "react-native";
import { connect } from 'react-redux';
import { Container, Content, Text, List, ListItem, Left, Right,
Button, Icon, Body, Thumbnail } from "native-base";
const listItems = [
{ title: "Help", route: "Help", icon: "md-help" },
{ title: "About", route: "About", icon: "ios-information-circle-outline" }
];
class Drawer extends React.Component {
render() {
return (
<SafeAreaView style={{ flex: 1 }}>
<Container>
<Content contentContainerStyle={{
justifyContent: 'flex-start', marginTop: 30
}}>
{this.renderUserPetDetails.bind(this)()}
<List
dataArray={listItems}
renderRow={data => {
return (
<ListItem onPress={() => this.props.navigation.navigate(data.route)} icon>
<Left>
<Button onPress={() => this.props.navigation.navigate(data.route)}
style={{ backgroundColor: "#888" }}>
<Icon active name={data.icon} />
</Button>
</Left>
<Body>
<Text
style={{ fontSize: 14, fontWeight: '600' }}>
{data.title}</Text>
</Body>
</ListItem>
);
}}
/>
</Content>
</Container>
</SafeAreaView>
);
}
}

You should try importing DrawerItems as shown below if you do not have react-navigation-drawer installed please added.
import { DrawerItems } from 'react-navigation-drawer';

You are trying to call DrawerItems without actually importing it hence the error. Make sure you add this line:
import { DrawerItems } from 'react-navigation';

Hide previous tabs and header react-navigation v3

I have a createMaterialTopTabNavigator and when I press to navigate on another screen, I would like hide the tabs and the header but display the current header ("Pronostics détails"). It's possible ?
The code of MontanteTab :
import React from 'react';
import {ScrollView, View, FlatList} from 'react-native';
import {ListItem} from "react-native-elements";
import pronostics from "../../data/Constants/Pronostics";
import {createAppContainer, createStackNavigator} from "react-navigation";
import PronosticsDetailsScreen from "../../screens/PronosticsDetailsScreen";
class MontanteTab extends React.Component {
render() {
return (
<View>
<ScrollView>
<View>
<FlatList
data={pronostics}
keyExtractor={(item, index) => index.toString()}
renderItem={({item}) => (
<ListItem
key={item.id}
leftAvatar={{source: {uri: item.image}}}
title={item.competition}
subtitle={item.equipe_domicile + ' - ' + item.equipe_exterieur}
onPress={() => this.props.navigation.navigate('PronosticsDetails', {name: 'Jnae'})}
/>
)}
/>
</View>
</ScrollView>
</View>
);
}
}
const MontanteStack = createStackNavigator(
{
Montante: {
screen: MontanteTab,
navigationOptions: ({navigation}) => ({
header: null,
}),
},
PronosticsDetails: {
screen: PronosticsDetailsScreen,
navigationOptions: ({navigation}) => ({
headerMode: 'screen',
headerTitle: 'Pronostics détails',
headerStyle: {
backgroundColor: '#000000',
textAlign: 'center',
},
headerTintColor: '#ffffff',
headerTitleStyle: {
color: '#c7943e',
textAlign: 'center',
alignSelf: 'center',
justifyContent: 'center',
flex: 1,
}
}),
},
},
{
initialRouteName: 'Montante',
}
);
export default createAppContainer(MontanteStack);
The code of PronosticsDetailsScreen :
import React from 'react';
import {
StyleSheet,
View,
} from 'react-native';
import {Text} from "react-native-elements";
export default class PronosticsDetailsScreen extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>Détails</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
contentContainer: {
paddingTop: 30,
},
image: {
height: 100,
width: 100,
}
});
I tried to set the header to "null" but the current header is also hidden..
Thank you in advance for your help

Life would be easy if the API supported the ability to hide createMaterialTopTabNavigator()! But this option exists for bottom tabs, not top.
After doing research and test, I think it is possible to hide the tabs and header. It's a matter of playing with the nested navigation. (Inspired by: https://github.com/react-navigation/react-navigation/issues/1979 and Hide parent's navigation header from the nested navigator)
For example:
Pushing the back button on Screen 07 will go back to Screen 06.
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createStackNavigator, createAppContainer, createBottomTabNavigator, createMaterialTopTabNavigator } from 'react-navigation';
import Screen01 from './screens/Screen01';
import Screen02 from './screens/Screen02';
import Screen03 from './screens/Screen03';
import Screen04 from './screens/Screen04';
import Screen05 from './screens/Screen05';
import Screen06 from './screens/Screen06';
import Screen07 from './screens/Screen07';
const AppStackNavigator = createStackNavigator({
home: {
screen: Screen01
},
flowOne: {
screen: createStackNavigator({
page02: {
screen: Screen02 },
page03: {
screen: Screen03 },
flowTwo: {
screen: createBottomTabNavigator({
page04: {
screen: Screen04
},
flowThree: {
screen: createMaterialTopTabNavigator({
page05: {
screen: Screen05
},
page06: {
screen: Screen06
},
})
}
}) // end createBottomTabNavigator, end flowThree
},
flowFour: createStackNavigator({
page07: {screen: Screen07}
}
) // end flowFour
},
{
navigationOptions: {header: null} // hides header in flowOne
})
},
});
const AppContainer = createAppContainer(AppStackNavigator);
export default class App extends React.Component {
render() {
return (
<AppContainer />
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
I've got Expo demo here: https://exp.host/#project8888/NavigationDemo