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
Related
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';
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
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}
});
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.
I am trying to make my first React Native Android app and I am getting this error:
undefined is not an object (evaluating 'this.props.navigation.navigate')
This is the code:
import React from 'react';
import { StyleSheet, Text, View, Button, TextInput } from 'react-native';
import { StackNavigator } from 'react-navigation';
export default class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Home',
};
render() {
const { navigate } = this.props.navigation;
return (
<View>
<Button
title="Show Centers near me"
onPress={() =>
navigate('Results', "Search Term")
}
/>
<Text>or</Text>
</View>
);
}
}
class ResultsScreen extends React.Component {
static navigationOptions = {
title: 'Results',
};
render() {
const { navigate } = this.props.navigation;
return (
<View>
<Text>Hi</Text>
</View>
);
}
}
const App = StackNavigator({
Home: { screen: HomeScreen },
Results: { screen: ResultsScreen }
});
I can not figure out why the error is coming.
You are exporting the component wrong. You should get rid of the export default on your class HomeScreen definition and at the bottom of the file do export default App;
If you are handling it in AppContainer and not able to access while opening drawer menu. You can try below snippets.
const HomeStackNavigator = createStackNavigator({ Home: {
screen: Home,
navigationOptions : ({navigation}) => ({
title: 'Home',
headerStyle: {
backgroundColor: "#512DA8"
},
headerTitleStyle: {
color: "#fff"
},
headerTintColor: "#fff",
headerLeft: <TouchableOpacity onPress={ () => navigation.openDrawer()}>
<Image
source={require('./images/menu_burger.png')}
style={{width: 24, height: 24, padding: 5, marginLeft: 5}}/>
</TouchableOpacity>
}) } }, { initialRouteName: 'DumontHome' })
Try without 'search term' or in this way:
navigate('route', {item:'search term'})