I have created a splash screen and a login screen. I would like that after 2 second my screen goes splash to log in but it's showing: undefined is not an object(evaluating
'_this.props.navigation.push ')
In this project I am using react-navigation
componentWillMount(){
setTimeout(
() => {
this.props.navigation.push({
screen:'smartbill.login',
title:'LOGIN SCREEN'
});
}
, 1000);
}
Hope you have created a stack navigator
const App = createStackNavigator({
Splash: { screen: SplashScreen },
Login: { screen: LoginScreen },
});
In Splash Screen
setTimeout(()=> {
navigate('Login', { name: 'Jane' })
},1000);
Below is an example of me navigating to a home screen from splash
setTimeout(
()=> {
this.props.navigation.navigate("Home");
},1000
);
For Navigation you should use StackNavigator in react-native thats the proper method
Where did you get this this.props.navigation.push thats not proper.
Or
I have an excepted answer in the below question.
How to navigate from splash screen to login screen in react native?
There is a google drive link on it from where you can download a sample project, its a simple app figure it out from the sample app how you should set up the App.js.
I suggest You should use StackNavigator for navigation its the best method to follow in my app App.js is configured using StackNavigator.
Related
Hi i have navigation that has RootNavigator as follows;
const App = createSwitchNavigator(
{
Auth: AuthNavigator,
App: HomeNavigator,
Seller: SellerNavigator
},
{
initialRouteName: "Auth",
headerMode: "none"
}
);
Scenario
Auth contains login ,signup etc . App contains home,etc. When user is logged in ,he is now App Navigator.
What i want when user press Logout ,i want to move user properly
from App navigator to Auth navigator
i have tried out StackNavigation and NavigationActions
Code
logout = () => {
const resetAction = StackActions.reset({
index: 0,
key: null,
actions: [NavigationActions.navigate({routeName: 'Auth'})]
});
this.props.navigation.dispatch(resetAction);
};
Error
Please guide me how to do it properly in react navigation ?
thanks
You cannot use stack actions there because Auth is not part of the stack navigator.
What you can do is simply navigation.navigate('Auth') from the logout component. This will take the user in the Auth navigator and since Auth and App are part of the switch navigator he will not be able to go back to the App stack which is the behaviour you want, in this case, it is the same as using StackActions.reset.
I am trying to navigate from one screen to other screen inside tabbar in react native.
But, I am getting following error
ButtonClickCheckFunction = () => {
const { navigation } = this.props;
navigation.navigate('detailsScreen', { detailsScreen: jsonData });
}
Any suggestions?
For main screens, In tab bar we have created stack,
const AppStack = createAppContainer(createDrawerNavigator({
Dashboard: {
screen: ProfileStack,
},
Connect: {
screen: Connect,
},
screen1: {
screen: Screen1,
}
});
But, In Dashboard screen we are showing tabbar. I am working with tab2. So, From tab2, I have details screen. In that details screen I have to show navigation bar with back button arrow like custom image.
So, How to fix this?
If you post more code, we'll be able to better answer your question.
From the error message though, it seems like you're not properly creating the component so that the navigation property is set. You'll need to make sure to wrap the component using the withNavigation higher order component.
export default withNavigation(MyComponent);
I am making an react native android app in which i have both stack navigator and drawer navigator like this.
const orderstack = createStackNavigator({
OrderHistory : {screen : OrderHistory},
HistoryDetails: {screen : HistoryDetails},
TrackOrder: {screen : TrackOrder},
},{
headerMode: 'none',
navigationOptions:({navigation}) => ({
header: null,
}),
})
and drawer is
const drawerNavigator = createDrawerNavigator({
HomeScreen: {
screen: orderstack,
},
ProfileScreen:{
screen: profile,
},
MOrderScreen: {
screen: customstack,
},{}
}
Now when i go to HomeScreen in drawer then it should open orderstack which is stack navigator.This is working fine until i am not in the HomeScreen inside drawer,i mean,suppose i am inside HomeScreen and inside that i am in HistoryDetails then when i press again HomeScreen in drawer then it does not goes in OrderHistory.I tried setting initialRoutename but it does not works?But if i click from MOrderScreen or ProfileScreen then its working fine and OrderHistory is opening first.
The drawer only knows that it has to navigate to the "orderstack" screen, in this case, is a stacknavigator, but when you are in HistoryDetails or TrackOrder , you are still in the "orderstack" screen , the drawer doesn't handle deep navigation. It only navigates between the screens that you have provided it. you need to define a custom contentcomponent to handle navigation in your way. This behaviour of going back to the initial screen is already present in tabnavigator of react anvigation 3.0 so you should try it out to see if it fits your needs.
Check here for how to implement a customcomponent that resets the stack navigator , or just use a tabnavigator wich is the recommended for reseting screens (that's how youtube app does it)
I wanted to close the current component completely while navigating to next component in react-native.
I am using react-navigation for navigating between screens.
Scenario is, I am having two js in my project, Login.js and Home.js. When user logs in into the app it saves the credentials in the AsyncStorage. Every-time when user comes to Login Screen it checks for whether user is logged in already or not. If the user is logged in then app will directly navigate you to the Home page, at this action I want to close the login screen completely.
Currently with my implementation the Login screen remains in to the navigation stack. When I press back from the Home page the app should be closed completely and should not relaunch with login screen again.
Here is my StackNavigator code :
const navigationStack = createStackNavigator(
{
Login: {
screen: LoginScreen
},
Home: {
screen: HomeScreen
},
},
);
For navigating :
this.props.navigation.navigate('Home');
Please let me know what I am doing wrong with my existing code?
You can implement this by multiple ways. Like using replace or reset action on stack Navigator, or using switch Navigator instead of stack Navigator.
Using Reset: (Empty stack and navigate to specified screen)
import { StackActions, NavigationActions } from 'react-navigation';
const resetAction = StackActions.reset({
index: 0,
actions: [NavigationActions.navigate({ routeName: 'Home' })],
});
this.props.navigation.dispatch(resetAction);
Using replace: (replace current screen with the specified screen)
this.props.navigation.replace("Home");
Using Switch Navigator:(Recommended)
const navigationStack = createSwitchNavigator(
{
Login: {
screen: LoginScreen
},
Home: {
screen: HomeScreen
},
},
);
// Navigate to screen
this.props.navigation.navigate("Home");
This can be achieved without having to add back handling code to each and every screen by modifying the getStateForAction method of the particular StackNavigator's router.
const navigationStack = createStackNavigator(
{
Login: {
screen: LoginScreen
},
Home: {
screen: HomeScreen
},
},
);
The getStateForAction method can be modified to achieve this
const defaultStackGetStateForAction =
navigationStack.router.getStateForAction;
navigationStack.router.getStateForAction = (action, state) => {
if(state.index === 0 && action.type === NavigationActions.BACK){
BackHandler.exitApp();
return null;
}
return defaultStackGetStateForAction(action, state);
};
the state.index becomes 0 only when there is one screen in the stack.
You can check with this Back Handling
I'm new in React Native and trying create my first app. So I have a question:
I got 2 screens (using react-navigation). At first screen there is a render of app logo with spinner(from native-base) and fetch to the server at the same time. And I need to navigate to another screen only when fetch is over and responce is handled. All I found at react-navigation docs is a solution with button, but it's not my case. Also I don't want to use ActivityIndicatorIOS (app should be correct for Android).
Please help me understand what should I do?
Thanks a lot!
Just call the navigate function in then callback of the fetch or handle error appropriately in catch.
Every screen in react-navigation gets the navigation prop. You can use the navigate function to navigate to any screen. Something like this
class FirstScreen extends React.Component {
static navigationOptions = {
title: 'First',
}
componentDidMount(){
const {navigate} = this.props.navigation;
navigate('Second');
fetch('http://apiserver').then( (response) => {
navigate('Second');
});
}
render() {
return (
<AppLogo />
);
}
}
const AppNavigator = StackNavigator({
First: {
screen: FirstScreen,
},
Second: {
screen: SecondScreen,
},
});