React Native SafeAreaView Examples

Example 1: render Text component in React Native SafeAreaView

In this example, we will render a Text component in SafeAreaView component. And because we are using SafeAreaView component, it will avoid the rounded corners and notch of the physical device and renders the content perfectly on the screen.

Javascript

// Filename - App.js
 
import { StyleSheet, SafeAreaView, Text } from "react-native";
 
export default function App() {
    return (
        <SafeAreaView style={styles.container}>
            <Text style={styles.title}>w3wiki</Text>
        </SafeAreaView>
      );
}
 
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#3B5323",
      },
      title: {
        fontSize: 30,
        fontWeight: "bold",
        textAlign: "center",
        color: "#fff",
      },
});

Output:

Example 2: Button component in React Native SafeAreaView

In this example, we will render a Button component in SafeAreaView component. And because we are using SafeAreaView component, it will avoid the rounded corners and notch of the physical device and renders the content perfectly on the screen.

Javascript

// Filename - App.js
 
import { StyleSheet, SafeAreaView, Button } from "react-native";
 
export default function App() {
    return (
        <SafeAreaView style={styles.container}>
            <Button
                title="Press Me"
                color="#fff"
                onPress={() => {
                      alert("Welcome to w3wiki");
                }}
              />
        </SafeAreaView>
      );
}
 
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#3B5323",
      },
});

Output:

Reference: https://reactnative.dev/docs/safeareaview