I am trying to logout from drawer navigator to go back to 'login' screen but not able to dod so
i have a stack navigator in app.js where i have added dashboad (i.e drawer navigator) and login also
from login i am able to navigate to dashboard but from dashboard which has a drawer navigator is not going back to login page
Login.js
checkLogin() {
const {username,password}=this.state
if(username=="user" && password=="user")
{
this.props.navigation.navigate('dashboard')
}
Dashboard.js
class Dashboard extends Component{
static navigationOptions ={
header:null,
}
}
onLogout = () => {
console.log('sign out');
this.props.navigation.navigate('login');
calling--
<TouchableHighlight underlayColor='lightgrey'activeOpacity={0.8}
onPress={this.onLogout}>
app.js
const MainNavigator = createStackNavigator({
Splash:Splash,
login: Login,
signup:Signup,
dashboard:Dashboard,
dealerDashboard:DealerDashboard
});
const App = createAppContainer (MainNavigator);
Related
I am using react-navigation as the navigation package for my react native application. and have also installed and configured react-native-gesture-handler along with react-navigation as mentioned in the documentation.
The problem i am facing is that the drawer doesn't open at random times. mostly this occurs when user goes through along the main stack navigation and comes back to home to open the drawer. otherwise the drawer seems to be working without any issues.
this is how i have configured my navigation,
MAIN STACK NAVIGATION
const AppStack = createStackNavigator(
{
DrawerNav: DrawerNav,
Home: Home,
Notification: Notification,
HomeSearch: HomeSearch
}
DRAWER NAVIGATION
const MyDrawerNavigator = createDrawerNavigator(
{
Home: Home,
MyAccount: MyAccount,
ContactUs: ContactUs,
InviteFriend: InviteFriend,
Terms: Terms,
SignOut: SignOut
},
And the MAIN STACK also contains a few TAB STACK also,
I want to know why the drawer doesn't respond.
The Code i used to open the drawer was
this.props.navigation.openDrawer();
bu the above code gave
this.props.navigation.openDrawer() undefined
when ever the above crash i mentioned occurs
as a fix i used,
import { DrawerActions } from "react-navigation";
this.props.navigation.dispatch(DrawerActions.openDrawer())
the above code also stop working after a the user goes through the STACK navigation a few times, but doesn't give any errors on development.
This error occurs both on production as well as development
currently running
react native : 0.59.8
react : 16.8.3
react navigation: 3.9.1,
react-native-gesture-handler:1.1.0,
any help would be much appreciated,
Thanks in advance
Try wrapping all your stack navigation with Drawer navigation.
const StackNav = createStackNavigator({
Home: Home,
Notification: Notification,
HomeSearch: HomeSearch
}
Now wrap the above with Drawer navigation
const AppStack = createDrawerNavigator({
StackNav: {
screen: StackNav,
navigationOptions: {
drawerLabel: <Hidden />,
},
},
Home: Home,
MyAccount: MyAccount,
ContactUs: ContactUs,
InviteFriend: InviteFriend,
Terms: Terms,
SignOut: SignOut
});
Now the StackNav will be showing in the Drawer as one of the screens. So create a class and return null then pass it down to Drawer label.
class Hidden extends Component {
render() {
return null;
}
}
Now you'll be able to call the this.props.navigation.openDrawer(); anywhere on the app. Let me know if it works.
I think you can use another easy way to handle this problem :
You can use react-native-drawer that is available in this link now i'm going to show you how you can work with it :
AppStack :
const AppStack = createStackNavigator(
{
Home: Home,
Notification: Notification,
HomeSearch: HomeSearch
}
Home Navigation
const MyHomeNavigator = createStackNavigator(
{
Home: Home,
MyAccount: MyAccount,
ContactUs: ContactUs,
InviteFriend: InviteFriend,
Terms: Terms,
SignOut: SignOut
},
Now lets assume this is your HomePage :
HomePage
import Drawer from 'react-native-drawer'
import DrawerComponent from '../components/drawer'
export default class HomePage extends Component{
render() {
return (
<Drawer ref={(ref) => this._drawer = ref} content={<DrawerComponent {...this.props}/>} side='right' captureGestures openDrawerOffset={0.3} acceptTap>
//your home page components
</Drawer>
)
}
}
as you can see you can access to the drawer by this._drawer and here i will show you how does <DrawerComponent> like :
DrawerComponent :
export default class DrawerComponent extends React.Component {
navigateTo = (path) => {
this.props.navigation.navigate(path)
}
render(){
return(
<View>
<View>
<Item path='MyAccount' navigate = {this.navigateTo}/>
<Item path='ContactUs' navigate = {this.navigateTo}/>
<Item path='InviteFriend' navigate = {this.navigateTo}/>
//And you add all the item you need here with navigateTo function
</View>
<View>
//LogOut Section
</View>
</View>
)
}
}
This Works for me fine, I hope this works for you too.
Best regards .
I have a react native app running with react navigation 3.9 with 2 components Signup and Event:
export default class Signup extends React.Component {
}
export default class Event extends React.Component {
}
Also there is a splash component which retrieve local token.
Whenever there is a token retrieved from local drive, then the initial route is Event. Otherwise the it is Signup.
const stack = createStackNavigator ({
Event: Event,
Signup: Signup,
},{
InitialRouteName: InitRoute //<<either Event or Signup
})
const initScreen = createSwitchNavigator({
Splash: Splash,
App: stack,
})
export default createAppContainer(initScreen)
Here InitRoute needs to be set by checking local token which is retrieved in splash component. Dynamic routes is not very straight forward with react navigation. What is a good way to implement it with react navigation?
You can create dynamic routes based on the token. You'll need a screen that renders those two routes. Like
// app renders createStackNavigator with Event and Signup
const routes = {
Event: {
screen: Event,
navigationOptions: {
title: 'Event',
},
},
Signup: {
screen: Signup,
navigationOptions: {
title: 'Signup',
},
},
};
class App extends React.Component {
// creates dynamic routes
createDynamicRoutes = initiaRoute => {
return createAppContainer(
createStackNavigator(routes, {
initialRouteName: initiaRoute,
})
);
};
render() {
// get initial route from splash screen
// this.props.navigation.navigate('App', { init: 'init screen' });
const initiaRoute = this.props.navigation.state.params.init || 'Event';
// create routes and set initial route
const AppContainer = this.createDynamicRoutes(initiaRoute);
return <AppContainer />;
}
}
InitScreen navigator renders App and Splash
const InitScreen = createSwitchNavigator({
Splash: Splash,
App: App,
})
export default createAppContainer(InitScreen);
Demo
I am using react navigation v3 in my app, I use stack navigator inside drawer navigator ,On the click of logout I navigate to login screen with clearing storage of user, But whenever I login again , Main component dose not call componentWillMount or componentDidMount method , and displays Previously loaded data on it. here is my code >
const screens = {
login: { screen: Login },
dashboard: { screen: Dashboard },
patientList:{screen:StackNav},
headerComponent:HeaderComponent
}
const MyDrawerNavigator = createDrawerNavigator(
screens,
{
initialRouteName: 'login',
contentComponent: Sidebar
}
);
App = createAppContainer(MyDrawerNavigator);
export default App;
StackNav ==
export default createStackNavigator({
PatientList,
PatientDetails
});
Logout Function ==
localStorageService.removeAllKeys().then((res) => {
this.props.navigation.navigate(route, { isLogin: 'N' })
});
In React Navigation 5.x
use unmountOnBlur
<Drawer.Screen
name={...}
component={...}
unmountOnBlur={true}
options={{unmountOnBlur: true}}
/>
put this in navigationOptions of drawer navigator
unmountInactiveRoutes: true
As Daniyal's awnser complementation: I've introduced the configuration inside createDrawerNavigator() configs as above:
const AppNavigator = createDrawerNavigator(
{
Home:{
screen: Home
},
Login:{
screen: Login,
navigationOptions: {
drawerLabel: () => null
}
}
},
{
unmountInactiveRoutes: true
});
And now all pages are working withouth any "cache".
My project structure looks like this :
Tab navigator
|-Tab1
|-Tab2
|-stack navigator
|-login
|
screen1
|
screen2
|
screen3
|-Tab3
|-Tab4
I want my stack navigator route to start from screen1 once I enter the username and password for login screen. Is there any way we can achieve this?
Can we reroute/change the routes of stack navigator?
Use SwitchNavigator to change/reroute the screen stack
I'm not using React Navigation V2, you should check the doc if you need more information about RNV2
Here's an example TODO:
in router.js (handling screen):
const Tab = TabNavigator({
Customer : {
screen: Customer,
}
});
const TabLogged = TabNavigator({
Handyman: {
screen: Handyman,
}
});
// here's the key to handle which account is logged
export const Check = SwitchNavigator({
Auth: Auth,
Account1: Tab,
Account2: TabLogged
})
create Auth.js to check which account is logged or not:
class foo extends React.component{
componentWillMount(){
this.props.navigation.navigate(usertype == "isLoggedIn" ? 'Account2' : 'Account1');
}
render(){
<View>
<ActivityIndicator size="large" color="#0000ff" />
<StatusBar barStyle="default" />
</View>
}
}
and in your app.js or index.js :
class app extends Component{
render() {
return <check/>;
}
}
I'm using StackNavigator to load a Tabbar created with react-native-tab-navigator in App.js. I have a view inside Tabbar. How can I navigate back to App.js from that view?
App.js
import { StackNavigator } from 'react-navigation';
const SigninSignup = StackNavigator({
Signup: { screen: Signup },
Signin: { screen: Signin },
});
render() {
if (this.state.condition) {
return (<Tabbar />);
} else {
return (<SigninSignup />);
}
}
Myview.js (It is inside Tabbar)
How can I go back to App.js and load SigninSignup ?
I have tried
const { navigate } = this.props.navigation;
navigate('Signin', {});
But getting ERROR undefined is not an object (evaluating 'this.props.navigation')
Your navigation hierarchy starts with the SigninSignup navigator.
Since your component is rendering either the navigator or your tab bar according to this.state.condition, you can't just navigate to the other screen.
You con solve this be either moving the tab bar and the SigninSignup navigator into a new root navigator and use that to navigate between everything, or by providing a function to Tabbar that would change the value of condition:
<Tabbar onSomething={() => this.setState({condition: !this.state.condition})} />