CODEWITHSUNDEEP
react-nativereact-navigationsafeareaview
kiwikodes
kiwikodes

Reputation: 774

Can't Wrap Navigator in SafeAreaView

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.

Upvotes: 8

Views: 4755

Answers (2)

cuongtd
cuongtd

Reputation: 3182

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'

Upvotes: 14

fayeed
fayeed

Reputation: 2485

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

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

Upvotes: 5

Related Questions