React Native SafeAreaView

Summary: In this tutorial, you will learn how to use the React Native SafeAreaView component to render components within the safe area boundaries of a device.

The SafeAreaView is a component in React Native that serves as a container to render nested content within the safe area boundaries of a device.

When rendering nested components, it automatically applies padding to reflect the portion of the view that is not covered by navigation bars, toolbars, etc.

Note that the SafeAreaView inherits all props of the View component.

The following example displays a Text component on the screen:

import { StyleSheet, Text, View } from 'react-native'

const App = () => {
    return (
        <View style={styles.container}>
            <Text>This is a message from JavaScriptTutorial.net</Text>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    }
})

export default App;Code language: JavaScript (javascript)

However, the app does not render the text within the safe area boundaries:

To fix this, you can replace the View with the SafeAreaView as follows:

import { StyleSheet, Text, View, SafeAreaView } from 'react-native'

const App = () => {
    return (
        <SafeAreaView style={styles.container}>
            <Text>This is a message from JavaScriptTutorial.net</Text>
        </SafeAreaView>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    }
})

export default App;Code language: JavaScript (javascript)

Output:

Summary

• Use the SafeAreaView component to render nested components within the safe area boundaries of the device.