How to convert a single-screen application to a tab-based application using interactive navigation?

Question

I am trying to work with a native-navigation response, but I have a simple problem.

The application has a login page in which there are no tabs. (very similar to the facebook login page) (Image ref - Image just to give an idea. Image courtesy of Google After user login, I want to convert to a tab-based application and I need different stacks for both tabs (like this happens in applications like Quora ) (Image ref - Again, the image is just a link )

I use mobx for state management.

I know its usual use case, but they confuse me between the two options I know -

• provide a response to a user's login variable and vary from a single-screen application to a tab-based application. (The only concern is the lack of animation when a reaction to isLoggedIn occurs) For example - 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 a single-screen application, but implement tabs on the main screen. With this method, I would have to implement a separate navigation stack for both tabs. (reaction-native-navigation already implements this. So don't worry in method 1 regarding the 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 ways to manage tabs in responsive mode? And in my use case, which method should I go with?

Answer 1

, , . - .

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

    });

.

Answer 2

Navigation.startSingleScreenApp(), Navigation.startTabBasedApp() ( 1) - .

, , , 1 , : :

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

animationType , startSingleScreenApp, startTabBasedApp.