Material Top Tab Navigator overlapping with statusbar. Any way to fix it?

user_1744811 0
Viewed 1087

How do I get the component added by createMaterialTopTabNavigator to move out of the status bar's way? Here's my code:

import React from 'react';
import { Text, View } from 'react-native';
import { createMaterialTopTabNavigator } from 'react-navigation';

class Screen1 extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Screen1!</Text>
      </View>
    );
  }
}

class Screen2 extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Screen2!</Text>
      </View>
    );
  }
}

class Screen3 extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Screen3!</Text>
      </View>
    );
  }
}

export default createMaterialTopTabNavigator ({
  "Screen1": Screen1,
  "Screen2": Screen2,
  "Screen3": Screen3,
});

See status bar overlap This is my first react native project and I may be missing something crucial. Any pointers appreciated.

react-navigation react-native reactjs
2 Answers

Install Expo constants to retrieve the statusBarHeight Prop.

expo install expo-constants

Now set the style prop of Material Top Tab Navigator and give it marginTop.

import Constants from 'expo-constants'
const TopTab = createMaterialTopTabNavigator();
    const RequestNavigator = () => (
  <TopTab.Navigator style={{ marginTop: Constants.statusBarHeight }}>
    <TopTab.Screen name="Account" component={Account} />
    <TopTab.Screen name="Profile" component={Profile} />
    <TopTab.Screen name="Settings" component={Settings} />
  </TopTab.Navigator>
);

if you're not using expo, you can use https://www.npmjs.com/package/react-native-status-bar-height to retrieve the statusBar height

user_114685360

Just replace your View with SafeAreaView and it should help.

import { Text, SafeAreaView } from 'react-native';
import { createMaterialTopTabNavigator } from 'react-navigation';

class Screen1 extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Screen1!</Text>
      </View>
    );
  }
}

class Screen2 extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Screen2!</Text>
      </View>
    );
  }
}

class Screen3 extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Screen3!</Text>
      </View>
    );
  }
}

export default createMaterialTopTabNavigator ({
  "Screen1": Screen1,
  "Screen2": Screen2,
  "Screen3": Screen3,
});
user_95579390
Related