How to deal with safeAreaView + React Navigation?

Question

First screenshot was without applying SafeAreaView and second screenshot is applying SafeAreaView

As shown clearly that Stack header seems bulky as compare to previously. Is there anyway where we can apply SafeAreaView to only bottom part?

Heath

Answer 1

Instead of using SafeAreaView from React-Native, use SafeAreaView from react-navigation as below:

import { SafeAreaView } from 'react-navigation';

Then you can use prop forceInset to customize the padding, which in your case,

<SafeAreaView style={styles.safeArea} forceInset={{ top: 'never' }}>

For more information, check out the iPhone X support by react-navigation

Heath

Can you answer this question #66706507 – Jassy

Answer 2

For React Navigation v5, there is no SafeAreaView exported. The recommended way is to use react-native-safe-area-context.

Read more: React Navigation v5.x - Supporting safe areas.

Example

import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';

function Demo() {
  return (
    <SafeAreaView
      style={{ flex: 1, justifyContent: 'space-between', alignItems: 'center' }}
    >
      <Text>This is top text.</Text>
      <Text>This is bottom text.</Text>
    </SafeAreaView>
  );
}

export default function App() {
  return (
    <SafeAreaProvider>
      <NavigationContainer>{/*(...) */}</NavigationContainer>
    </SafeAreaProvider>
  );
}

Alexanderalexandr

This should be the accepted answer as the current one is out-dated – Mcmullen

So does this mean that every screen would have to use SafeAreaView in addition to SafeAreaProvider wrapping App? – Glyptic

@DavidJones try it in your root component – Alexanderalexandr

<SafeAreaProvider> <NavigationContainer> <SafeAreaView style={{flex: 1}}> <RootNavigator /> </SafeAreaView> </NavigationContainer> </SafeAreaProvider> Wrapping like this worked for me – Albuquerque

Answer 3

If you want to ignore bulky padding at the top of safeAreaView, pass edges props to control padding.

<SafeAreaView style={styles.container} edges={['top', 'left', 'right']}>
  <Text style={styles.paragraph}>This is top text.</Text>
  <Text style={styles.paragraph}>This is bottom text.</Text>
</SafeAreaView>

read more about it here

Poetry

Answer 4

react-native also has "SafeAreaView" but this works only in ios.

import { SafeAreaView } from "react-native";

so set the SetAreaView with android, you use StatusBar which works only in android and its currentHeight is 24.

  <SafeAreaView style={{ flex: 1, marginTop: StatusBar.currentHeight }}>
    <View style={{ padding: 16, backgroundColor: "green" }}>
      <Text>Page content</Text>
    </View>
  </SafeAreaView>

Valerivaleria

Answer 5

In react navigation 6.x, it recommends to use useSafeAreaInsets hook (as SafeAreaView only supports iOS 10+).

1. wrap the NavigationContainer with SafeAreProvider
2. use useSafeAreaInsets in top layer component style's padding

Notice the padding block in the example

        paddingTop: insets.top,
        paddingBottom: insets.bottom,
        paddingLeft: insets.left,
        paddingRight: insets.right,

import {
  SafeAreaProvider,
  useSafeAreaInsets,
} from 'react-native-safe-area-context';

function Demo() {
  const insets = useSafeAreaInsets();

  return (
    <View
      style={{
        flex: 1,
        justifyContent: 'space-between',
        alignItems: 'center',

        // Paddings to handle safe area
        paddingTop: insets.top,
        paddingBottom: insets.bottom,
        paddingLeft: insets.left,
        paddingRight: insets.right,
      }}
    >
      <Text>This is top text.</Text>
      <Text>This is bottom text.</Text>
    </View>
  );
}

export default function App() {
  return (
    <SafeAreaProvider>
      <NavigationContainer>{/*(...) */}</NavigationContainer>
    </SafeAreaProvider>
  );
}

Reference: https://reactnavigation.org/docs/handling-safe-area/

Conto