I have a react native application that I created using Ignite CLI. I am trying to use TabNavigator with React Navigation, but I can't seem to figure out how to pass data from one screen to another. All the examples I've seen generally show how to pass the data when tapping on a button and using the onPress function, but in my case I need/want to pass the data when I actually tap one of the tab buttons, and I have yet to find an explanation on how to do this, at least one that I understand.
I have two screens that the user will interact with SearchScreen and WatchScreen. The two screens are controlled by the TabNavigator which is in an AppNavigation.js file. So there are a total of 3 files AppNavigation.js, SearchScreen.js and WatchScreen.js.
AppNavigation.js
import { StackNavigator,TabNavigator } from 'react-navigation'
import SearchScreen from '../Containers/SearchScreen'
import WatchScreen from '../Containers/WatchScreen'
import SearchWatch from '../Containers/SearchWatch'
import LaunchScreen from '../Containers/LaunchScreen'
import styles from './Styles/NavigationStyles'
const PrimaryNav = TabNavigator({
Search: { screen: SearchScreen },
Watch: { screen: WatchScreen }
}, {
initialRouteName: 'Search',
lazy: true,
})
export default PrimaryNav
The SearchScreen will fetch some data and hold it in an array, that I need to be available in the WatchScreen as well. Generally I would pass data to the WatchScreen as a prop, but using the TabNavigator I can't see how to do this, since it's not a child of SearchScreen. In `SearchScreen the relevant piece is this
constructor(props){
super(props)
this.state = { movies: []}
}
this.state.movies is what I need to be available in my WatchScreen, how can I make this so it's available when I tap the Watch button in the tab bar?
Things I've read indicate that every Screen Component gets passed navigation props in either the form of this.props.navigation or this.props.screenProps, would this be how I would pass the movies array to my WatchScreen? If so,this.props.navigation & this.props.screenProps don't appear to be getting passed to my WatchScreen.
Sending data
onPress={() => this.props.navigation.navigate(
SCREEN_NAME,
{
item: YOUR_DATA_WHAT_YOU_NEDD_TO_SEND
}
)}
Receiving Data
const item = this.props.navigation.getParam('item');
Related
I want to use Storybook.js to mock up a page that utilizes createMaterialTopTabNavigator(). However I can't render the material Tab because the output of the function is not actually a react component. So when I directly tried <TabNavigator /> it threw an invariant violation that "navigation" was missing. The only work-around I found was using createAppContainer() around the TabNavigator. But I know that it is bad practice to use more than one navigator. Is there any way to render a react navigator element without needing the navigation container?
This is my current working code for the storybook:
const tabConfiguration = {
Old: {
screen: OldProductsScreen,
navigationOptions: {
title: "Old"
}
},
New: {
screen: NewProductsScreen,
navigationOptions: {
title: "New"
}
}
};
const TabNavigator = createMaterialTopTabNavigator(tabConfiguration);
storiesOf('Test', module)
.add('Initial', () => {
const TAB = createAppContainer(TabNavigator);
return (
<TAB / >
);
})
;
I know that it is bad practice to use more than one navigator. Is there any way to render a react navigator element without needing the navigation container?
It's bad practice to do that in an app. But since you're using Storybook where each container is in like its own independent app, this is totally fine.
I'm using the tabs template on expo react native.
I have a navigation in the AppNavigator.js
import React from 'react';
import { createAppContainer, createSwitchNavigator, createStackNavigator } from 'react-navigation';
import MainTabNavigator from './MainTabNavigator';
import GoalScreen from '../screens/GoalScreen';
const GoalStack = createStackNavigator({
Goal: GoalScreen
})
export default createAppContainer(createSwitchNavigator({
// You could add another route here for authentication.
// Read more at https://reactnavigation.org/docs/en/auth-flow.html
Main: MainTabNavigator,
Goal: GoalStack
}));
When i tap on the Goal I get to that page fine. but inside the goal screen i want to go back when i press the back button.
<Left>
<Button hasText transparent onPress={() => {
this.props.navigation.goBack(null);
}} >
<Text>Cancel</Text>
</Button>
</Left>
But for some reason is not working.
In switch navigator you have to switch navigation directly,
eg:
this.props.navigation.navigate("Main");
And if you push from one screen to another screen(In stack navigation) you can use the 'goBack' function.
It's working correctly There is no previous stack to go back.
The purpose of SwitchNavigator is to only ever show one screen at a time. By default, it does not handle back actions and it resets routes to their default state when you switch away
https://reactnavigation.org/docs/en/switch-navigator.html
You can perform goback action inside GoalStack if you have more than one screen. But both the GoalStack and MainTabNavigator is specified in switch navigator. Since switch navigator shows one screen at a time, you can't perform goback here.
if you want to go for MainTabNavigator from GoalStack, you need to use like below
this.props.navigation.navigate("Main")
Try this:
this.props.navigation.goBack();
I am new to React-Native and React. I am trying to implement a simple Tab Navigation on my mobile app using React Navigation (v2)
Basically there are two files:
Router.js
// imports...
const Tabs = TabNavigator(
{
Logs: {
screen: Logs,
// here I would like to recieve the jwt and pass it as a param to the logs screen
},
NewRide: {
screen: NewRide
}
},
{navigationOptions: ...}
}
export default tabs;
LoggedIn.js
export default class LoggedIn extends Component {
constructor(props) {
super(props);
}
render() {
return (
<View>
<Tabs jwt={this.props.jwt} /> // here I pass the jwt as a prop
</View>
);
}
What I am trying to do is pass a prop named jwt from my LoggedIn class located in LoggedIn.js to Tabs located in Router.js . From the Tabs call I would ultimately like to send the Jwt received as a prop to the Logs screen.
Im not sure how to to recieve the Jwt in the Router.js file and pass it to the logs screen. Any help regarding this would be hugely appriciated as i have been stuck on this for a good two days. Kind regards Matt.
You can pass a global parameter to the navigation which can be available in every screen for that navigation.
screenProps - Pass down extra options to child screens
Sample
const SomeTab = TabNavigator({
// config
});
<SomeTab
screenProps={/* this prop will get passed to the screen components as this.props.screenProps */}
/>
I have a Home screen as the root of my stack navigator. I tried to add a componentWillAppear function to my Home.js react component but it doesn't fire when I return to that screen from my contact screen by pressing the back button.
import React, { Component } from 'react';
import {StackNavigator} from 'react-navigation';
import Contact from './Contact';
class Home extends Component {
static navigationOptions = {title:'Home'};
componentWillAppear()
{
console.log('hello');
}
render()
{
return <View></View>;
}
}
let Router =
{
Home: {screen: Home},
Contact:{screen:Contact}
}
const Navigator = StackNavigator(Router);
export default Navigator;
Is there another event handler that will always fire every time my Home screen becomes visible when you've returned from a child screen of a Stacked Navigator?
As per bennygenel comment:
I don't think there is. If you need to do something on previous screen
there is 2 options you can use. First option is to use redux or
similar package and fire an action to update the previous components
props or second option is to use a custom back button that does
something like this answer and then this.props.navigation.goBack()
Let's say I have this screen:
And when the user clicks on the white tooltip, it redirects to another screen. Sometimes the app lags a little bit, and clicking on the tooltip takes like ~2s to see the screen change. The problem is, during those 2s, the user taps again on this tooltip to make it happen.
And the result I get is that there are two instances of the new screen in my StackNavigator. What I mean is that I see my new screen, but when I click on "Back" I don't return to this 'Hitchhiking Map' screen, but to another instance of that same screen.
If I clicked 5 times on the callout during those 2s, then I need to click 5 times "Back" to return to the Map screen. Any way to prevent that? To put only one instance into the StackNavigator?
I am using React Navigation, more precisely a StackNavigator. Here's my code:
The "click on tooltip" part:
<MapView.Marker
onCalloutPress={() => this.props.navigation.navigate('spotDetails', { spotId: marker.id })}
/>
My screens:
const HMapNavigator = StackNavigator({
HMap: { screen: HMapViewContainer },
spotDetails: { screen: SpotDetailsViewContainer },
});
The issue of multiple navigations has been reported and there is more detail here.
react-navigation (v1.0.0-beta.7) is in beta and still being built, so until this feature is implemented, you will have to handle the debounce manually.
options
disable the button once the navigation starts
debouncing in the onPress logic or in the action if you are using redux
lodash provides a useful debounce utility, if you are looking for one.
There are many ways how to overcome double navigations.
My solution is adding a key property in navigate object:
this.props.navigation.navigate({ key: 'AnotherScreen', routeName: 'AnotherScreen', params: { ... }})}
Save if its opening to control the navigation
constructor (props) {
super(props)
this.state = {
opening: false
}
}
Create a function to control de navigation
_open (campaign) {
if (!this.state.opening) {
this.props.navigation.navigate('Campaign', {campaign})
this.setState({ opening: true })
setTimeout(() => {
this.setState({ opening: false })
}, 1000)
}
}
Call this func from your onpress
<TouchableHighlight underlayColor='transparent' onPress={this._open.bind(this, campaign)}>
In versions 1.x of React Navigation, if you specify an identifier the navigation action will be executed only once. E.g.:
navigate({ routeName: 'someScreen', key: 'someScreen', params: { someParam: 'someValue' } })
More information: https://gist.github.com/vonovak/ef72f5efe1d36742de8968ff6a708985
In versions 2.x and 3.x this is a default functionality.
More info: https://reactnavigation.org/docs/en/navigation-key.html