CODEWITHSUNDEEP
react-nativereact-navigationreact-native-ios
dpatel125
dpatel125

Reputation: 121

how to position a tab navigator in react-native

I am trying to format a tab navigator so that it is more appears more in the app. this is how it looks like right now

enter image description here

I am trying to figure out how to lower the tab so that isn't blocked on certain phones such as the iPhone X. I Tried to use the position props to do it but it that white bar stayed still and only the tab labels and such moved lower.

This is the code used to style the tab navigator

import React, { Component } from "react";
import { Platform, StyleSheet, Text, View } from "react-native";
import SearchScreen from "./src/screens/SearchScreen";
import Loading from "./src/components/Loading";
import PickerList from "./src/components/PickerList";
import Summary from "./src/components/Summary";
import Timeline from "./src/components/Timeline";
import {
  createStackNavigator,
  createAppContainer,
  createMaterialTopTabNavigator,
  createSwitchNavigator
} from "react-navigation";
// import ResultsScreen from "./src/screens/ResultsScreen";
const instructions = Platform.select({
  ios: "Press Cmd+R to reload,\n" + "Cmd+D or shake for dev menu",
  android:
    "Double tap R on your keyboard to reload,\n" +
    "Shake or press menu button for dev menu"
});

type Props = {};
export default class App extends Component<Props> {
  render() {
    return <AppContainer />;
  }
}

const ResultsTabNavigator = createMaterialTopTabNavigator(
  {
    Summary: Summary,
    Timeline: Timeline
  },
  { // used to style the Tab
    initialRouteName: "Summary",
    tabBarPosition: "top",
    swipeEnabled: true,
    animationEnabled: true,
    tabBarOptions: {
      activeTintColor: "rgba(230,230,250,0.4)",
      inactiveTintColor: "rgba(230,230,250,0.4)",
      style: {
        backgroundColor: "rgba(230,230,250,0.4)",
        position: "relative"
      },
      labelStyle: {
        textAlign: "center"
      },
      indicatorStyle: {
        borderBottomColor: "#87B56A",
        borderBottomWidth: 2
      }
    }
  }
);

const AppStackNavigator = createStackNavigator(
  {
    Home: SearchScreen,
    Picker: PickerList,
    Summary: ResultsTabNavigator
  },
  {
    headerMode: "none",
    initialRouteName: "Home",
    defaultNavigationOptions: {
      headerStyle: {
        backgroundColor: "orange"
      }
    }
  }
);
const AppContainer = createAppContainer(AppStackNavigator);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF"
  },
  welcome: {
    fontSize: 600,
    textAlign: "center",
    margin: 10
  },
  instructions: {
    textAlign: "center",
    color: "#333333",
    marginBottom: 5
  }
});

Upvotes: 0

Views: 2257

Answers (1)

Doug Watkins
Doug Watkins

Reputation: 1448

I'm not quite sure what is different about our setup, besides we are using a bottomTabBar instead of your top bar, but React Navigation is giving us the safe area view changes on our tab bar.

That being said, React Native 0.50+ comes with a SafeAreaView component which you can wrap your components with. Or alternatively, you could use the react navigation SafeAreaView component. It should add the necessary padding to move your content down/up to avoid the 'horns' and the bottom bar. Read the React Navigation docs here:

Alternatively, you could use the react-native-device-info package to use its hasNotch() method - this will find a lot of devices with notches, like the iphonex, but not all - such as the ipad pro 3rd generation. Then you could conditionally apply padding to move your content from behind the 'horns' and bottom bar.

Once you increase the padding, you may also need to increase the height of the component equally.

Upvotes: 2

Related Questions