CODEWITHSUNDEEP
react-nativereact-native-navigation
Ravi Maniyar
Ravi Maniyar

Reputation: 667

React native: createStackNavigator overlaps on the actual screen contents (Android)

I am creating a sample hotels listing application with following menus:

export const loggedInMenu = createMaterialBottomTabNavigator(
  {
    Hotels: {
      screen: hotelDetailsScreen,
      navigationOptions: {
        tabBarLabel: "Hotels",
        tabBarIcon: <Icon name="hotel" size={24} />
      }
    },
    HotelsSearch: {
      screen: HotelsSearch,
      navigationOptions: {
        tabBarLabel: "Search",
        tabBarIcon: <Icon name="search" size={24} />
      }
    },
    Favourites: {
      screen: Favourites,
      navigationOptions: {
        tabBarLabel: "Hotels",
        tabBarIcon: <Icon name="favorite" size={24} />
      }
    },
  },
  {
    initialRouteName: 'Hotels'
  }
);

export const hotelDetailsScreen = createStackNavigator(
  {
    Hotels: {screen: Hotels},
    hotelDetails: {screen: hotelDetails},
  },
  {
    initialRouteName: "Hotels",
    headerLayoutPreset: "center",
    navigationOptions: {
      title: "Hotels",
      headerTransparent: true,
      headerStyle: {
        backgroundColor: '#694fad'
      }
    }
  }
);

The code works, however with one exception that the initial hotels screen header is overlapping the view data. Any help appreciated.

Check the below output:

enter image description here

Upvotes: 1

Views: 429

Answers (1)

Ravi Maniyar
Ravi Maniyar

Reputation: 667

Turns out that the docs was misleading (at least for me). I specified headerTransparent: true, which was Not needed as I just wanted to set the background color on the screen. I removed it and started working well.

Upvotes: 1

Related Questions