How to convert single screen app to tab based app using react-native-navigation?

Question

I am trying my hands on react-native-navigation but I am stuck with a simple problem.

The app has a login page which doesn’t have tabs. (very much similar to facebook login page)(Image ref - The image is just to give an idea. Image Courtesy - Google After the user logs in, I want to convert to a tab based app, and I want different navigation stacks for both tabs (as it happens in apps like Quora) (Image ref - Again Image is just a reference)

I am using mobx for state management.

I know its a common use case but I am confused between the two options known to me -

provide a reaction to user login variable and change from single screen app to tab based app. (The only concern is the lack of animation when the reaction on isLoggedIn happens) Eg - App.js

constructor() {
reaction(() => auth.isLoggedIn, () => app.navigateToHome())
reaction(() => app.root, () => this.startApp(app.root));
app.appInitialized();

}

startApp(root){
    switch (root) {
      case 'user.login':
        Navigation.startTabBasedApp({
          tabs: [
            {
              label: 'One',
              screen: 'user.login',
              icon: require('./assets/one.png'),
              selectedIcon: require('./assets/one_selected.png'),
              navigatorStyle: {},
            }
          ]
          screen: {
            screen: root,
            title: 'Login',
            navigatorStyle: {
              screenBackgroundColor: colors.BACKGROUND,
              statusBarColor: colors.BACKGROUND
            },
            navigatorButtons: {}
          }
        })
        return ;
      case 'user.home':
        Navigation.startTabBasedApp({
          tabs: [
            {
              label: 'One',
              screen: 'user.home',
              icon: require('./assets/one.png'),
              selectedIcon: require('./assets/one_selected.png'),
              navigatorStyle: {},
            },
            {
              label: 'Two',
              screen: 'user.home',
              icon: require('./assets/two.png'),
              selectedIcon: require('./assets/two_selected.png'),
              title: 'Screen Two',
              navigatorStyle: {},
            }
          ],
          animationType: 'slide-down',
        });
      return;
      default:
          console.error('Unknown app root');
    }
  }

Use single screen app but implement tabs in the home screen. With this method, I would have to implement different navigation stack for both tabs by myself. (react-native-navigation already implements this. So, no worries in method 1 regarding navigation stack)

Eg - App.js

Navigation.startSingleScreenApp({
          screen: {
            screen: root,
            title: 'Login',
            navigatorStyle: {
              screenBackgroundColor: colors.BACKGROUND,
              statusBarColor: colors.BACKGROUND
            },
            navigatorButtons: {}
          }
        })

Home.js

<Tabs>
        <Tab
          titleStyle={{fontWeight: 'bold', fontSize: 10}}
          selectedTitleStyle={{marginTop: -1, marginBottom: 6}}
          selected={true}
          renderIcon={() => <Icon containerStyle={{justifyContent: 'center', alignItems: 'center', marginTop: 12}} color={'#5e6977'} name='whatshot' size={33} />}
          renderSelectedIcon={() => <Icon color={'#6296f9'} name='whatshot' size={30} />}
          >
          <Feed />
        </Tab>
        <Tab
          titleStyle={{fontWeight: 'bold', fontSize: 10}}
          selectedTitleStyle={{marginTop: -1, marginBottom: 6}}
          selected={selectedTab === 'profile'}
          title={selectedTab === 'profile' ? 'PROFILE' : null}
          renderIcon={() => <Icon containerStyle={{justifyContent: 'center', alignItems: 'center', marginTop: 12}} color={'#5e6977'} name='person' size={33} />}
          renderSelectedIcon={() => <Icon color={'#6296f9'} name='person' size={30} />}
          onPress={() => this.changeTab('profile')}>
          <Profile />
        </Tab>
      </Tabs>

What are the best practices in managing tabs in react-native? And in my use case which method I should go with ?

I'm having the same problem - did you manage to reach anywhere? — JamesG, Jun 27 '17 at 11:43
I'm having the same problem - did you manage to find a solution? — Antonio Brandao, Mar 20 '18 at 19:34

score 0 · Answer 1 · answered Jul 27 '17 at 19:59

To achieve top tabs, you would need to start a single screen app and then define top tabs. You can do something like this below.

    Navigation.startSingleScreenApp({
     screen: 'FirstScreen'
     title: 'FirstScreenTitle'
     topTabs: [
       {
         screen:'FirstTabScreen'
       },
       {
         screen:'SecondTabScreen'
       }
     ]

    });

Register each tabs as individual screens first.

Antonio Brandao · Answer 2 · 2018-03-24T02:04:06.947

Starting with Navigation.startSingleScreenApp() and then moving to Navigation.startTabBasedApp() (Option 1) is the recommended approach.

The only problem you say you face is that there is no animation in Option 1, but you have that option actually: Add a transition animation to the new navigator object:

Navigation.startTabBasedApp({
  // ...
  animationType: 'slide' // optional, add transition animation to root change: 'none', 'slide-down', 'fade'
})

Look for the animationType property in the docs, both in startSingleScreenApp and startTabBasedApp.

How to convert single screen app to tab based app using react-native-navigation?

2 Answers2