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()
Related
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 in react native. I have used Wix react-native-navigation library for navigate between pages. I want to write a separate class for navigation like bellow and call it in everywhere that I need it in my project. But I get error for "this.props.componentId". Here is my function for navigation:
ScreenNavigation.js
import React,{Component} from 'react';
import {Navigation} from "react-native-navigation";
class ScreenNavigation extends Component{
constructor(props){
super(props)
}
goToScreen = (screenName) =>{
Navigation.push(this.props.componentId , {
component : {
name : screenName
}
});
}
}
const NextPage = new ScreenNavigation();
export default NextPage;
and here is my Login page (where I want to call the function):
Login.js
import React, {Component} from 'react';
import {View, Button, Text} from 'react-native';
import NextPage from "../../my_classes/ScreenNavigation"
export default class Login extends Component {
render() {
return (
<View>
<Text>Anna</Text>
<Button title={"Enter"} onPress=
{()=>NextPage.goToScreen('myRegister')}> </Button>
</View>
);
}
}
Please help me to solve my problem.
this is my index.js file:
import {Navigation} from 'react-native-navigation';
import Login from './my_screens/login®ister/Login';
Navigation.registerComponent('myLogin',()=>Login);
Navigation.events().registerAppLaunchedListener(()=>{
Navigation.setRoot({
root : {
stack : {
id:'AppStack',
children : [
{
component : {
name : 'myLogin' ,
options : {
topBar : {
title : {
text : 'Login'
}
}
}
},
}
]
}
}
}
)
});
Please follow the official documentation first. According to documentation you must register component screen first. Otherwise you cannot navigate to that screen. Secondly you are not passing any props. So its actually undefined.
If you want to execute a function of a component into another component there is two ways to todo that.
By passing prop into your child component like
<RootcComponent
<Login gotoScreen={this. goToScreen} />
/>
and then you need to call that function in you login component
this.props.goToScreen()
But if this component is not your child component then you need to pass this is in your navigation params like this
this.props.navigation.navigate('RouteName', {goTo: this.goToScreen})
and then in your component where you want to execute this function
this.props.navigation.state.params.goToScreen()
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 got one screen where I need to get createMaterialTopTabNavigator and createBottomTabNavigator it is nested in createStackNavigator.
So I click on button on HomeScreen and StackNavigator navigates me to screen where is
createBottomTabNavigator primary navigation and createMaterialTopTabNavigator is different for each screen in createBottomTabNavigator
So it should be
createStackNavigator
createBottomTabNavigator
createMaterialTopTabNavigator
SomeTabBarScreen
SomeTabBarScreen
createMaterialTopTabNavigator //if I click on icon in BottomNavigator to navigate on another screen I want different TopNavigator
SomeTabBarScreen
SomeTabBarScreen
I'll just write out some pseudo code here, but you can nest stacks like so:
const FirstMatTab = createMaterialTopTabNavigator({//Routes here});
const SecondMatTab = createMaterialTopTabNavigator({//Routes here});
const TabNav = createBottomTabNavigator({
FirstTab: FirstMatTab,
SecondTab: SecondMatTab
});
const MainStack = createStackNavigator({
Tab: TabNav,
})
This means you can just call in your render function the component you want it rendered in.