Can't Wrap Navigator in SafeAreaView

Question

When running the app on the iPhone X simulator the Material Top Tab Navigator cuts into the notch and bottom button.

To fix this I have tried to implement the SafeAreaView before applying the App Container and to wrap each individual screen in SafeAreaViews. This works to keep the text away from these areas but not the navigator.

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

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

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

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

const TabNavigator = createMaterialTopTabNavigator(
  {
    Calculator,
    Camera,
    Solution
  },
  {
    tabBarPosition: 'bottom',
  }
);

const AppContainer = createAppContainer(TabNavigator);

class App extends Component {
  render() {
    return (
      <SafeAreaView>
        <AppContainer/>
      </SafeAreaView>
    );
  }
}

export default App;

When running this application, no errors are present. However, nothing renders. What I would expect is a tab navigator renders with three tabs that doesn't cut under the notch or bottom button.

cuongtd · Accepted Answer · 2019-07-23T05:56:03.033

11

give SafeAreaView a size

<SafeAreaView style={{ flex: 1 }}>
  <AppContainer/>
</SafeAreaView>

if AppContainer still spreads full screen,

change import { SafeAreaView } from 'react-navigation'

to import { SafeAreaView } from 'react-native'

edited Jul 23 '19 at 05:56

answered Jul 23 '19 at 05:47

cuongtd

2,862
3
19
37

Thank you, I had given it a style before but I guess giving it parameters beyond flex broke it. – kiwikodes Jul 23 '19 at 07:54
For anyone who might need it: I am using a `` here. Android didn't seem to mind, but on web, it only scrolled properly if I put the `` _inside_ the ``. Maybe it works differently for you. But anyway, it's something worth checking. – joeytwiddle Apr 13 '22 at 01:32

score 5 · Answer 2 · answered Jul 23 '19 at 05:50

5

You need to provide flex: 1 as style to the SafeAreaView Component

<SafeAreaView style={{flex: 1}}>
{/* Component here */}
</SafeAreaView>

answered Jul 23 '19 at 05:50

fayeed

2,375
16
22

score 0 · Answer 3 · answered May 21 '23 at 22:12

import { SafeAreaView } from "react-native-safe-area-context";

<NavigationContainer>
        <SafeAreaView style={{ flex: 1 }}>
          <MainNavigation />
        </SafeAreaView>
</NavigationContainer>

for my case this was the import i needed

Can't Wrap Navigator in SafeAreaView

3 Answers3