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.
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 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'm using react-native-router-flux for the Navigation system and using react-native-drawer for the sidebar. If an user clicks on menu item which is in the sidebar, I want to redirect user to different screen and close the Drawer. I'm using the following code snippets.
Actions.refresh({key: 'drawer', open: false}) to Close the Drawer
Actions.pageTwo.call() to Open the Second Page
Both are working without any problem if I'm using it in separate functions. But, If I trigger both the snippets from the same function. It is not working.
Thanks in Advance,
I have this scenario working for me with both libraries. At a high level I create a custom component to render the content of react-native-drawer which I pass a function to responsible for closing the drawer. Then when I press one of the drawer items I fire both a react-native-router-flux navigation action (in my case a PUSH) and I call the function passed in to close the drawer.
Here is what defining my drawer looks like. Remember DrawerNavigationConten is ultimately just a ListView or whatever implementation you prefer to render the drawer content.
class RootComponent extends Component {
...
closeDrawer() {
this.drawerRef.closeDrawer();
}
render() {
const drawerNavigationContent = (
<DrawerNavigationContent
closeDrawer={this.closeDrawer.bind(this)}
/>
);
return <Drawer
ref={(ref) => { this.drawer = ref; }}
content={drawerNavigationContent}
...
>
...here I define my react-native-router-flux scenes...
</Drawer>
);
}
...
}
Here are the important items in DrawerNavigationContent
import { Actions } from 'react-native-router-flux';
class DrawerNavigationContent extends Component {
...
navigate(location) {
Actions[location]();
this.props.closeDrawer();
}
...
render() {
...
<TouchableOpacity onPress={this.navigate(...some dynamic scene key...)}>
...
</TouchableOpacity>
...
}
}
I've worked with react-native-router-flux and had some issues with the drawer as well. If both scenes are children of the Drawer like so
<Scene key="navigationDrawer" component={NavigationDrawer}>
<Scene key="pageOne" component={PageOne}/>
<Scene key="pageTwo" component={PageTwo}/>
</Scene>
you can use Actions.pageTwo({key: 'navigationDrawer', open: false}) which should close the drawer upon navigation.
Otherwise you could use Actions.refresh({key: 'navigationDrawer', open: false) on PageTwo's componentWillMount or componentDidMount methods.
My routes were working fine with the built-in NavigatorIOS, but I wanted to add a custom font to the navigation so I decided to go with ExNavigator. I'm open to other component solutions, but first here is my problem:
From my initial route, the user is supposed to go to a detail view onPress. The initial route is loading, but the detail view is not working with ExNavigator.
I made an object for the router following exponent's docs. When the onPress event is triggered, I get an error: Can't find variable: Route
Here are some code snippets
app.js
class app extends React.Component {
render() {
return (
<ExNavigator
style={styles.container}
translucent={false}
initialRoute={
Router.getHomeRoute()
}/>
);
}
}
let router = {...}
export default Router;
main.js
<TouchableHighlight underlayColor={'#f3f3f2'}
onPress={()=>this.selectRow(row)}>
selectRow: function(row){
row = {row};
let route = Router.getDetailRoute(row);
this.props.navigator.push(route);
}
for detail.js i'm just including NavigatorIOS.
I get a react error if I try and put the router in any other file but app.js.