-1

I am trying to replicate Popup behaviour(Modal) using react-navigation. I am able to replicate some parts of it but I am not able to generate the complete result. I have to put the tabBar in the Background of the screen. I don't want to hide it. I am using Navigation it gives me some significant advantages over Modal.

I have tried using tabBarVisible: false but it hides the tabBar completely. I am using mode: 'modal' to have the modal behaviour and using TouchableHighlight to close the Modal if pressed on the empty part of the screen. I am not able to overlap the tabBar like the images I have attached below.

This is my code:


const SpaceTabNavigator = createStackNavigator({
  Spaces: {
    screen: SpacesTab
  },
  applianceList: AppliancesList,
  applianceConfig: ApplianceConfig
},
{
  initialRouteName: 'Spaces',
  headerMode: 'none',
  navigationOptions: {
      headerVisible: false,
  },
  mode: 'modal',
  transparentCard: true,
  cardStyle: {
    opacity: 1
  },
})

const TabNavigator = createBottomTabNavigator({
  Dashboard: {
    screen: HomeTab,
  },
  Spaces: SpaceTabNavigator,
  Moods: MoodStackNavigator,
},
{
  swipeEnabled: true,
  animationEnabled: true
})


const DrawerNavigator = createDrawerNavigator(
  {
    TabNav: TabNavigator
  },
  {
    contentComponent: Drawer
  }
);

Can you please suggest a way around it?

Here is the result I have achieved yet: The achieved Result

Here is the result I want: This is the result I want

Vedant Bajaj
  • 53
  • 8

1 Answers1

0

Step - 1 : Make the modal transparent by using the 'transparent' prop from the modal.

Step - 2 : Give the modal margin bottom lets say 50 to render it above the tab bar.

This shall do it

Rishav Kumar
  • 4,979
  • 1
  • 17
  • 32
  • Thanks for the answer but it's a new screen with navigation. Is this possible in a screen to overlay the tabBar? – Vedant Bajaj Sep 10 '19 at 06:51
  • I don't think so. Why don't you use modal. – Rishav Kumar Sep 10 '19 at 06:58
  • Because there are multiple calls on that screen which some corresponds to some specific parameters. If I use Modal I'd have to figure which button was pressed to trigger that modal. Fortunately you can pass parameters in navigation which makes it easier for me to control those calls. – Vedant Bajaj Sep 10 '19 at 08:33