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

How to add drawer in react native?

Hello I have a simple app and i want to add a drawer to him I use react-navigation 4x and use react-navigation-drawer to implement Drawer in my app
I used it before sperate drawer in a single package and it's worked fine
but when I use the new package I got this error
Invariant Violation: Invariant Violation: Element type is invalid:
expected a string (for built-in components) or a class/function (for
composite components) but got: undefined. You likely forgot to export
your component from the file it's defined in, or you might have mixed
up default and named imports.
although I export my screen
here is Code
**navigator.js**
import React from 'react';
import {TouchableOpacity, View} from 'react-native';
import Icon from 'react-native-vector-icons';
import {createAppContainer, createSwitchNavigator} from 'react-navigation';
import {
createDrawerNavigator,
NavigationDrawerStructure,
} from 'react-navigation-drawer';
import {createStackNavigator} from 'react-navigation-stack';
import ForgetPassword from '../screens/ForgetPassword';
import Home from '../screens/Home';
import Splash from '../screens/Splash';
const AuthStackNavigator = createStackNavigator({
Authloading: {
screen: Splash,
navigationOptions: {
header: null,
},
},
});
const HomeStack = createStackNavigator({
HomeScreen: {
screen: Home,
navigationOptions: ({navigation}) => ({
title: 'Home',
headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
headerRight: (
<TouchableOpacity
onPress={() => navigation.navigate('Notifications')}
style={{margin: 10}}>
<Icon name="ios-notifications" size={28} color="#1DA1F2" />
</TouchableOpacity>
),
}),
},
});
const DrawerNavigator = createDrawerNavigator({
HomeDrawer: {
screen: HomeStack,
navigationOptions: {
drawerLabel: 'Home',
drawerIcon: () => <Icon name="ios-home" size={28} color="#0496FF" />,
},
},
});
const Navigations = createSwitchNavigator({
// Authloading: Splash,
Auth: AuthStackNavigator, // the Auth stack
App: DrawerNavigator, // the App stack,
});
const Navigator = createAppContainer(Navigations);
export default Navigator;
**Home.js**
//import liraries
import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';
// create a component
class Home extends Component {
render() {
return (
<View style={styles.container}>
<Text>Home</Text>
</View>
);
}
}
//make this component available to the app
export default Home;
**App.js**
import React, {Component} from 'react';
import Navigator from './src/navigations/navigator';
class App extends Component {
render() {
return <Navigator />;
}
}
export default App;
Edit
i just think NavigationDrawerStructure it's exports from react-native-drawer so that's my bad :)
so here is the component name as NavigationDrawerStructure
//Navigation Drawer Structure for all screen
class NavigationDrawerStructure extends Component {
//Structure for the navigatin Drawer
toggleDrawer = () => {
//Props to open/close the drawer
this.props.navigationProps.toggleDrawer();
};
render() {
return (
<View style={{flexDirection: 'row'}}>
<TouchableOpacity onPress={this.toggleDrawer}>
<Icon
name="ios-menu"
size={40}
style={{margin: 10}}
color="#1DA1F2"
/>
</TouchableOpacity>
</View>
);
}
}
OR just add a button for a toggle in heder left inside Home stack like this
navigationOptions: ({navigation}) => ({
title: 'Home',
headerLeft: (
<TouchableOpacity onPress={() => navigation.toggleDrawer()}>
<Icon
name="ios-menu"
size={40}
style={{margin: 10}}
color="#1DA1F2"
/>
</TouchableOpacity>
)
})

Import is invalid. it don't have these objects inreact-navigation-drawer
import { createDrawerNavigator } from 'react-navigation-drawer';
import NavigationDrawerStructure from 'your file path'
instead
import {
createDrawerNavigator,
NavigationDrawerStructure,
} from 'react-navigation-drawer';

How align a Content vertically aligned middle in the screen?

In the image given below where you can see the name and the email is not aligned middle of the view. So, I want to align them exactly middle of this vertical view-
I have also provided the code of this class in the below-
import React, {Component} from "react";
import {View, Text, StyleSheet, ScrollView, Image} from 'react-native';
import {Container, Content, Icon, Header, Body} from 'native-base';
import {DrawerNavigator, StackNavigator, DrawerItems, SafeAreaView} from 'react-navigation';
import NoteMeHome from '../components/NoteMeHome';
import SettingsScreen from '../components/SettingsScreen';
import {Root} from 'native-base';
import {Font, AppLoading} from 'expo';
class HomeDrawer extends Component {
constructor(props) {
super(props);
this.state= {loading:true};
}
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) => (
<Container style={styles.Container}>
<Header style={styles.drawerHeader}>
<Body style={styles.drawerBody}>
<Image
style={styles.drawerImage}
source={{uri: 'https://img.icons8.com/ios/50/000000/administrator-male-filled.png'}}
/>
<View style={styles.drawerHeaderText}>
<Text>S. M. Asif Ul Haque</Text>
<Text>asif#abc.com</Text>
</View>
</Body>
</Header>
<Content>
<DrawerItems {...props}/>
</Content>
</Container>
);
const MyApp = DrawerNavigator({
NoteMeHome:{
screen: NoteMeHome
},
Settings:{
screen: SettingsScreen
}
},
{
initialRouteName: 'NoteMeHome',
drawerPosition: 'left',
contentComponent: CustomDrawerContentComponent,
drawerOpenRoute: 'DrawerOpen',
drawerCloseRoute: 'DrawerClose',
drawerToggleRoute: 'DrawerToggle'
}
);
const styles = StyleSheet.create({
Container:{
textAlign:'center'
},
drawerHeader:{
height:200,
textAlign:'center',
backgroundColor: 'white'
},
drawerHeaderText:{
flex:1,
alignItems:'center',
justifyContent:'center',
backgroundColor:'#5555'
},
drawerImage:{
height: 100,
width: 100,
borderRadius: 75
},
drawerBody: {
flexDirection:'row',
justifyContent:'space-between',
textAlign:'center',
backgroundColor:'#aaaa'
}
});
export default HomeDrawer;
So, What should I do to align them vertically middle of the header of the drawer?

Set alignItems:'center' in your drawerBody styling

"Error: Undefined is not an object" when adding navigation.navigate to a component?

I'm trying to implement navigation into my practice app:
onPress will cause a move from HomeScreen to ListingReview.
I'm not sure what's going wrong to be honest, though I have suspect I'm not passing props correctly.
Please help!
This is my repo: https://github.com/rphly/practice
(Each object is created in a separate .js file in src/components.)
Index.js
import React, { Component } from 'react';
import { AppRegistry, ScrollView } from 'react-native';
import { StackNavigator } from 'react-navigation';
import Header from './src/components/Header';
import Card from './src/components/Card';
import ListingsFeed from './src/components/ListingsFeed';
import ListingReview from './ListingReview';
class HomeScreen extends Component {
render() {
return (
<ScrollView>
<Header />
<ListingsFeed />
</ScrollView>
);
}
}
export const App = StackNavigator({
Home: { screen: HomeScreen, navigationOptions: {header: null} },
ListingReview: { screen: ListingReview },
});
AppRegistry.registerComponent('hackathon', () => App);
ListingDetails.js (where I'm implementing onPress)
import React from 'react';
import { View, Text, Image, Button } from 'react-native';
import { StackNavigator } from 'react-navigation';
import Card from './Card';
import CardSection from './CardSection';
const ListingDetails = (props) => {
return (
<Card>
<CardSection>
<View style={styles.titleContainerStyle}>
<Text style={styles.titleContentStyle}>{props.listing.title}</Text>
</View>
<View style={styles.thumbnailContainerStyle}>
<Image style={styles.thumbnailStyle} source={{uri: props.listing.primary_photo_url}}/>
</View>
<View style={styles.headerContentStyle}>
<Text style={{marginBottom: 5}} numberOfLines={15}>{props.listing.description.trim()}</Text>
<Text style={styles.priceContentStyle}>${props.listing.price}</Text>
</View>
<Button
onPress={() => navigation.navigate('ListingReview')}
title= "Mark Listing"
color = "#D2232A"
/>
</CardSection>
</Card>
);
};
const styles = {
headerContentStyle: {
//backgroundColor: '#D2D2D2D2',
justifyContent:'center',
alignItems: 'center',
marginLeft: 10
},
titleContainerStyle: {
marginLeft: 10,
marginBottom: 2,
marginTop: 2
},
titleContentStyle: {
fontSize: 15,
fontWeight: 'bold'
},
thumbnailStyle: {
height: 180,
width: 180
},
thumbnailContainerStyle: {
flexDirection: 'row',
justifyContent: 'center',
padding: 2,
marginLeft: 5,
marginRight: 5,
marginTop: 5,
marginBottom: 5
//alignItems: 'flex-start'
},
priceContentStyle: {
fontSize: 15,
color: 'green'
}
};
export default ListingDetails;
ListingFeed.js (where I connect ListingDetails and Index)
import React, { Component } from 'react';
import axios from 'axios';
import { View } from 'react-native';
import ListingDetails from './ListingDetails'
class ListingsFeed extends Component {
state = { listings:[] };
componentWillMount() {
axios.get('example.com/i-removed-the-url')
.then( response => this.setState({ listings:response.data.data.products}));
// this.setState({ listings:response.data.data.products})
}
renderListings() {
return this.state.listings.map(listing =>
<ListingDetails key={listing.id} listing={listing}/>
);
}
render() {
console.log(this.state);
return (
<View>
{this.renderListings()}
</View>
);
}
}
export default ListingsFeed;

You have to pass the navigation props from your HomeScreen to your ListingsFeed component like <ListingsFeed navigation={this.props.navigation}/>. And then, to pass this same props to your ListingDetails : <ListingDetails key={listing.id} listing={listing} navigation={this.props.navigation}/>
In your ListingDetails component you call the navigation.navigate('ListingReview') function, but the navigation is defined nowhere in your component. You have to call props.navigation.navigate('ListingReview') instead (from props) or get a navigation const from props : const {navigation} = props;

ListingDetails.js and ListingsFeed.js not in the stack.
export const App = StackNavigator({
Home: { screen: HomeScreen, navigationOptions: {header: null} },
ListingReview: { screen: ListingReview },
ListingDetails: { screen: ListingDetails },
ListingsFeed:{screen:ListingsFeed}
});

React native - React Navigation for multiple routes

I am wondering is there any way to make StackNavigator inside TabNavigator with react-navigation, Right now I have TabNavigator like that in Router.js. I want app inside Add.js (Add screen) to make StackNavigator inside ListItem. Every element of ListItem Should get user to other screen. So If I press first option it should get me to "AddCalendarEvent" etc. Like you see in Add.js file on addList constant
Router.js
import React from 'react';
import {
AppRegistry,
Text,
View,
Button
} from 'react-native';
import {StackNavigator, TabNavigator} from 'react-navigation';
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
import EntypoIcon from 'react-native-vector-icons/Entypo';
import Login from './Login';
import Menu from './Menu';
import Desktop from './Desktop';
import Notifications from './Notifications';
import Today from './Today';
import Add from './Add';
const onClickNavigation = StackNavigator({
Login: {screen: Login}
});
const estimobileapplication = TabNavigator({
Add: {
screen: Add, navigationOptions: {
title: 'Dodaj',
label: 'Dodaj',
tabBarIcon: ({tintColor}) => (<FontAwesomeIcon name="plus-circle" size={24} color="#666"/>)
}
},
Desktop: {
screen: Desktop, navigationOptions: {
title: 'Pulpit',
label: 'Pulpit',
tabBarIcon: ({tintColor}) => (<FontAwesomeIcon name="th-large" size={24} color="#666"/>)
}
},
Notifications: {
screen: Notifications, navigationOptions: {
title: 'Powiadomienia',
label: 'Powiadomienia',
tabBarIcon: ({tintColor}) => (<FontAwesomeIcon name="envelope" size={24} color="#666"/>)
}
},
Today: {
screen: Today, navigationOptions: {
title: 'Na dziś',
label: 'Na dziś',
tabBarIcon: ({tintColor}) => (<FontAwesomeIcon name="check-square" size={24} color="#666"/>)
}
},
Menu: {
screen: Menu, navigationOptions: {
title: 'Menu',
label: 'Menu',
tabBarIcon: ({tintColor}) => (<EntypoIcon name="menu" size={24} color="#666"/>),
}
}
}, {
tabBarOptions: {
activeTintColor: '#26b7ff',
inactiveTintColor: '#ffffff',
activeBackgroundColor: '#2E3035',
style: {
backgroundColor: '#14191f',
}
}
});
AppRegistry.registerComponent('estimobileapplication', () => estimobileapplication);
Add.js
import React, {Component} from 'react';
import {
ScrollView,
Text,
View,
NavigatorIOS
} from 'react-native';
import {List, ListItem} from 'react-native-elements';
import AddCalendarEvent from './add_offer_components/AddCalendarEvent';
import AddOfferFull from './add_offer_components/AddOfferFull';
import AddOfferQuick from './add_offer_components/AddOfferQuick';
import AddQuestion from './add_offer_components/AddQuestion';
import AddUser from './add_offer_components/AddUser';
import GetInvoice from './add_offer_components/GetInvoice';
import SellBuyTransaction from './add_offer_components/SellBuyTransaction';
import SendEmailToClient from './add_offer_components/SendEmailToClient';
import SendNotification from './add_offer_components/SendNotification';
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
class Add extends Component {
onShowMore() {
this.props.navigation.navigate('AddCalendarEvent');
};
render() {
const addList = [
{
title: 'Nowa oferta lub zlecenie - szybkie dodanie',
component: AddOfferQuick
},
{
title: 'Nowa oferta lub zlecenie - pełne dodanie',
component: AddOfferFull
},
{
title: 'Nowe zapytanie',
component: AddQuestion
},
{
title: 'Nowy termin w kalendarzu',
component: AddCalendarEvent
},
{
title: 'Wyślij e-mail do klienta',
component: SendEmailToClient
},
{
title: 'Transakcja kupna/najmu',
component: SellBuyTransaction
},
{
title: 'Wystaw fakturę',
component: GetInvoice
},
{
title: 'Wyślij powiadomienie',
component: SendNotification
},
{
title: 'Dodaj użytkownika',
component: AddUser
}
];
return (
<ScrollView style={{marginTop: 50, paddingLeft: 20}}>
<View style={{flexDirection: 'row', flexWrap: 'wrap'}}>
<FontAwesomeIcon name="plus-circle" size={30} color="#26b7ff"/>
<Text style={{textAlign: 'left', fontSize: 30, color: '#444444', marginLeft: 10}}>
Dodaj
</Text>
</View>
<List>
{addList.map((item, i) => (
<ListItem
key={i}
title={item.title}
onPress={() => this.onShowMore()}
/>
))}
</List>
</ScrollView>
);
}
}
export default Add;

According tho the react navigation docs you can nest as many navigators as you need. Just instead of defining a component for your tab in "screen", define a StackNavigator. This way, it will display the first component that your StakNavigator Shows.
Then in each item you define a navigate() to the next screen you need (I assume is the same screen for every item in the list) and pass the required data as a prop.