How to add top tabs to a screen which is not defined in Navigation.startTabBasedApp?

Viewed 414

I want to add top tabs to one of my screens in my react-native app. I'm using react-native-navigation for navigation. I can easily to it with any of my screens defined in Navigation.startTabBasedApp, meaning any screen that is also one of my bottom tabs.

I want top tabs on a screen which is NOT one of the bottom tabs. Here is how I try to do it right now

Navigation.startSingleScreenApp({
    screen: {
      screen: 'screen',
      title: 'screen'
    },
    TopTabRootScreen: {
      screen: 'ToptabRoot',
      title: 'ToptabRoot',
      navigatorStyle: {},
      topTabs: [
        {
          screenId: 'toptab1',
          icon: icon
        },
        {
          screenId: 'toptab2',
          icon: icon
        }]
    }
  });

I find the documentation for react-native-navigation quite lacking, which is why I I'm not sure why the code above doesn't work.

I also start a tab based app like this:

 Navigation.startTabBasedApp({
tabs: [
  {
    label: 'tab1',
    screen: 'tab1',
    icon: icon,  
    selectedIcon: icon,
    },
    title: 'tab1',
    navigatorStyle: {}, 
    navigatorButtons: {} 
  },
  {
    label: 'tab2',
    screen: 'tab2',
    icon: Icon,
    selectedIcon: Icon,
    title: 'tab2'
  },
  {
    label: 'tab3',
    screen: 'tab3',
    icon: Icon,
    selectedIcon: Icon,
    title: 'tab3'
  {
    label: 'tab4',
    screen: 'tab4',
    icon: Icon,
    selectedIcon: Icon,
    title: 'tab4',
    navigatorButtons: 
   }
 });

I feel like it might be doable inside the screens

static navigatorStyle = {
};

but no idea how that would look. Any help on how to do this would be appreciated.

1 Answers
Related