I have an app that is being updated from react navigation 2 to react navigation 5 and was wondering how to access the navigation prop outside of a screen component. For example in RN2 we were given NavigationActions which allowed us to do:
import { StackActions, NavigationActions } from 'react-navigation';
NavigationActions.navigate({ routeName })
This was helpful when dealing with a file that used redux-saga or redux-form as we could navigate based on the logic.
Is there something similar in RN5 I can use to make this possible?
Related
I'm trying to create a Drawer Navigation with React Navigation, but the gestures (swipe left/right), to open/close the Drawer, don't work.
Its running on a Asus 4 Max with Android 8.1. The project uses:
React Native#0.59.1
React#16.8.3
React Navigation#3.5.1
React Native Gesture Handler#1.1.0
I already trying to change the Lock Mode of the drawer.
If i use a Button with this.props.navigation.openDrawer() or this.props.navigation.closeDrawer() it works.
I thought that could be the Gesture Handler, but when I create a Tab Navigator the Swipe works pretty well.
My routes file:
import { createStackNavigator, createAppContainer, createDrawerNavigator } from 'react-navigation';
import Login from './pages/Login';
import Main from './pages/Main';
import Plans from './pages/Plans'
const DrawerRoutes = createDrawerNavigator({
Main,
Plans
})
const StackRoutes = createStackNavigator({
Login,
App: DrawerRoutes
});
const RoutesContainer = createAppContainer(StackRoutes)
export default RoutesContainer;
I expect to be able to swipe from left to right to open, and the inverse to close the Drawer.
{
swipeEnabled: true,
}
use swipe enabled
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 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');
Please check this expo snack.
I have a switch-navigator for logged-in and not-logged-in states.
When user is logged in, switcher loads a DrawerNavigator which loads Screen1 and loads the sidebar (SideBar.js) via contentComponent
Inside Screen1 I'm calling the this.props.navigation.navigate('DrawerOpen'); via the onPress event of the menu burger button. But it's not opening the drawer. What am I doing wroing
You call in a screen which isn't contained in DrawerNavigation, so it can't navigate. To open drawer in anywhere just use
import { DrawerActions } from 'react-navigation';
...
openDrawer = () => {
this.props.navigation.dispatch(DrawerActions.openDrawer());
}
...
use this:
this.props.navigation.openDrawer();
In React Navigation 3.x, you can use this.props.navigation.openDrawer(); to open the drawer in CreateDrawerNavigator. It is the same as using this.props.navigation.dispatch(DrawerActions.openDrawer());.You can checkout the official docs here : https://reactnavigation.org/docs/en/drawer-based-navigation.html
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()