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();
Related
I am using react-navigation to navigate through screens. In the main screen I use expo-camera and the onFacesDetected callback within the Camera component as follows:
import { Camera } from 'expo-camera';
import { useState} from 'react';
const [faceData, setFaceData] = useState([]);
function MainScreen({ navigation }){
return(
<Camera
ref={CAM} style={CSS.cameraStyle}
type={Camera.Constants.Type.front}
faceDetectorSettings={{camSett}}
onFacesDetected={(e)=> setFaceData(e.faces)}
>
{doSomeWith(faceData)}
</Camera>
)
};
The issue is that every time a face is detected a render is triggered (as expected, since I'm updating the faceData state) and the camera gets closed and opened nonstop on every render. If I render the Camera component without a Stack.Screen this issue don't happens and the renders triggers normally onFacesDetected callback. How can I fix this problem keeping the Camera as part of a navigation screen?
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 have below code base
Navigator.js
export default createAppContainer(createSwitchNavigator(
{
// screendesign: screendesign,
SplashScreen: SplashScreen,
App: drNav,
AuthStack: AuthStack
},
{
initialRouteName: 'SplashScreen',
}
));
import SplashScreen from './screens/SplashScreen'
<Provider store={store}>
<PersistGate loading={<SplashScreen/>} persistor={persistor}>
<View style={styles.container}>
<Navigator />
</View>
</PersistGate>
</Provider>
splashScreen.js
componentDidMount() {
if (this.state.isAuthenticated) {
this.props.navigation.navigate("App");
}
else {
this.props.navigation.navigate("AuthStack");
}
}
I am getting below error
Before implementing redux, I have used this page as entry screen for
my app, showing as splash screen and behind checking if user is
authenticated or not, if it is authenticated redirecting to login page
else dashboard. It was working fine, but now I have used redux, then
the scenario is working similarly only diff this screen is not visible
since redux persis load data from storage
Please help I am new in react native unable to understand this error
Thanks
The navigation prop is available to all components defined inside the navigator.
The SplashScreen component is not part of your Navigator so it doesn't have access to the navigation prop.
But I don't think you need it there.
Your SplashScreen component is a dump component that will be shown to the user for as long as the PersistGate needs to load the stored data to your redux store.
So when the loading of the data is completed you will see the rest of the components as they are defined inside the PersistGate. So I don't see why you would need to use the navigation from this loading component.
In case you do really need to access the navigation prop from the SplashScreen you can follow this guide: https://reactnavigation.org/docs/en/connecting-navigation-prop.html
Looks like your code unable to find navigation in SplashScreen component.
1) Try to console that in SplashScreen component's render method.
2) Also check for redux configuration, there may be case that issue is with your redux configuration because of that your component unable to access navigation props.
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()