I want to know if it's possible to handle login screen after the button login pressed,
I have a router.js:
export const TabLoged= TabNavigator({
Home: {
screen: HomeStack,
},
MyPatient:{
screen: MyPatientStack
},
MyAccount: {
screen: MyAccount,
}
});
export const Tab = TabNavigator({
Home: {
screen: HomeStack,
},
Login: {
screen: LoginStack,
}
});
export const Root = StackNavigator({
Tab: {
screen: Tab,
}
},{headerMode:'none'})
In export const Root I want to change the code looks like :
export const Root = StackNavigator({
Tab: {
// here i want to set the `alredyLogin` to be boolean, but i dont know how to do that
screen: alreadyLogin ? TabLoged : Tab,
}
},{headerMode:'none'})
Refer to this question I dont get it how to handle this issue, so I want to know there's another way to archive my goal?
To achieve desired behavior you can use SwitchNavigator. There is a really good example for it in the doc. You can check it here.
SwitchNavigator reference
SwitchNavigator(RouteConfigs, SwitchNavigatorConfig)
Example from docs
const AppStack = StackNavigator({ Home: HomeScreen, Other: OtherScreen });
const AuthStack = StackNavigator({ SignIn: SignInScreen });
export default SwitchNavigator(
{
AuthLoading: AuthLoadingScreen,
App: AppStack,
Auth: AuthStack,
},
{
initialRouteName: 'AuthLoading',
}
);
Related
I am trying to navigate from "Auth" stack to "App" stack.
I got response exactly from backend,(Laravel) but it doesn't navigate to "App" stack.
That is my code.
How to navigate from "SignIn" screen to "Home" screen?
const AuthStack = createStackNavigator({
First: FirstScreen,
SignIn: SignInScreen, //-----> Navigate from here
SignUp: SignUpScreen,
ForgotPass: ForgotPassScreen,
}, {
initialRouteName: 'First'
});
const HomeStack = createStackNavigator({
Home: { screen: HomeScreen },
});
const HistoryStack = createStackNavigator({
History: { screen: HistoryScreen },
});
const RepaymentStack = createStackNavigator({
Repayment: { screen: RepaymentScreen },
});
const ProfileStack = createStackNavigator({
Profile: { screen: ProfileScreen },
});
const AppStack = createBottomTabNavigator(
{
Home: { screen: HomeStack }, //-----> Navigate to here
History: { screen: HistoryStack },
Repayment: { screen: RepaymentStack },
Profile: { screen: ProfileStack },
}
);
export default createAppContainer(
createSwitchNavigator(
{
AuthLoading: AuthLoadingScreen,
Auth: AuthStack,
App: AppStack,
},
{
initialRouteName: 'AuthLoading',
}
)
);
Assuming your SignIn screen is a class, you should use navigation.navigate
this.props.navigation.navigate('App');
The switch navigator will navigate to the App stack and as Home is the first tab it would be shown.
My BottomTabNavigator is working as expected. The problem is that I would like to initially render a page that is outside of the navigator tabs. How could I accomplish this?
import Loading from "./components/Loading.js";
import Profile from "./components/Profile.js";
import History from "./components/History.js";
import Main from "./components/Main.js";
const TabNavigator = createBottomTabNavigator({
Profile: {screen: Profile},
Main: {screen: Locatione},
History: {screen: History},
},
{
initialRouteName: "Loading"
});
export default createAppContainer(TabNavigator);
Before, I was using createStackNavigator, which was working pretty well. Is there any way that I could combine both CreateBottomStackNavigator and createStackNavigator?
const AppNavigator = createStackNavigator(
{
Auth: Auth,
Loading: Loading,
Main:Main,
Locatione:Locatione,
Map: Map,
Contactos: Contactos
},
{
initialRouteName: "Loading"
}
);
const AppContainer = createAppContainer(AppNavigator);
export default function App() {
return <AppContainer />;
}
Yes, you have to add that screen in an navigationStack and name it the inital page, and add the navigation stack to bottomTab navigator.
here im adding the home scren to app stack navigator and this is the inital screen i want to render.
const AppStack = createStackNavigator(
{
HomeScreen: {
screen: Home
},
AirportMeeting:{
screen:AirportMeeting
}
},
{
initialRouteName:"HomeScreen",
}
)
now im adding that appstack , i.e the stack navigator as a tab in the bottomtab navigator by writing Home:AppStack and my notifications and settingscreen are just screens, i.e class componenets
const TabNavigator = createBottomTabNavigator({
Home: AppStack,
Notification:Notifications,
Account: SettingsScreen,
})
and finally im making my tabnavigator as my appcontainer. hence it works
const navigation = createAppContainer(
TabNavigator
);
so similarly you can try for the loadingscreen by adding in the navigation stack and then adding that stack in the bottomTabNavigator nad creating a container of bottomTabNavigator.
Hope it helps. feel free for doubts
Yes, you can do that, what you basically need to is, create a stack navigator as your app container and inside that put bottom tab navigator. Like,
Something like this,
const myTabNavigator = createBottomTabNavigator(
{
Home: { screen: YOUR_HOME },
},
{
contentComponent: SideMenu,
drawerWidth: Dimensions.get('window').width * 0.75
}
)
const RootStack = createStackNavigator({
SplashScreen: {
screen: SplashScreen,
navigationOptions: {
header: null,
},
},
SomeName: {
screen: myTabNavigator,
navigationOptions: {
header: null,
},
},
})
You can add any screen you want to show outside bottom tab navigator.
I'm currently implementing a small React Native app, and here is the navigators I'm currently having:
const RootNav= createStackNavigator(
{
Login: LogInScreen,
},
);
const TabNav = createBottomTabNavigator(
{
Home: { screen: HomeScreen },
Calendar: { screen: CalendarScreen },
Discussion: { screen: DiscussionScreen },
Profile: { screen: ProfileScreen },
},
);
export const SwitchNav = createSwitchNavigator(
{
AuthLoading: AuthLoadingScreen,
Auth: RootNav,
MainApp: TabNav,
},
{
initialRouteName: 'AuthLoading',
},
);
Right now in HomeScreen and CalendarScreen there are several Card components which should navigate to another screen named EventScreen with the options to go back to the previous screen which should be another createStackNavigator I think, but I still need help what's the right way to set up the navigators. Thanks in advance.
You can have a parent StackNavigator with EventScreen and TabNav as its children:
const RootNav = createStackNavigator(
{
Login: LogInScreen,
}
);
const HomeNav = createStackNavigator(
{
tabNav: TabNav,
Events: { screen: EventScreen },
}
);
const TabNav = createBottomTabNavigator(
{
Home: { screen: HomeScreen },
Calendar: { screen: CalendarScreen },
Discussion: { screen: DiscussionScreen },
Profile: { screen: ProfileScreen },
}
);
export const SwitchNav = createSwitchNavigator(
{
AuthLoading: AuthLoadingScreen,
Auth: RootNav,
MainApp: HomeNav,
},
{
initialRouteName: 'AuthLoading',
}
);
If you feel like you'll need a DrawerNavigation as well in the future, it is a good idea to take care of it now. This article may help.
I want to use the Navigator All togather but i fail to implement this the code which i use for integration is
const MyApp = const MyApp = TabNavigator({
Home: {
screen: HomeScreen,
},
Notifications: {
screen: HomeButton,
},
},
DrawerNavigator({
Home: {
screen: list,
},
SwipeList:{
screen:SwipeLists
},
},{
initialRouteName: 'Home',
contentComponent: SideDrawer,
});
});
const Simple = StackNavigator({
Login: {
screen: Login,
},
signup: {
screen: SignUp,
},
forget:{
screen:forget
},
});
I use this above but this is not correct i am not now how to integrate them plz recmond the way how to integrate the three navigator in react native
I got a TabNavigator set up and i'd like to retrieve screens postions during the swipe.
const MainScreenNavigator = TabNavigator({
ProfileStack: { screen: ProfileStack },
Home: { screen: Home },
HistoryStack: { screen: HistoryStack }
}, {
swipeEnabled: true
});
How to do so? is it possible without using Transitioner?