Skip to content
Unistyles

Edge to edge layout

Edge to edge layout
Android
2.8.0

Unistyles uses WindowsInsetsCompat API to handle insets on Android. This API requires your app to have edge to edge layout enabled. In other words, it means that your StatusBar is always translucent and the app can draw below the NavigationBar. A translucent status bar is also the default when you build your app with Expo. To leverage WindowInsetsCompat, Unistyles enables edgeToEdge layout by default.

As a result you need to use paddings to draw your app content above system bars. To learn more about edgeToEdge layout please check Window insets in Compose.

import { useStyles, createStyleSheet } from 'react-native-unistyles'


const App = () => {
    const { styles } = useStyles(stylesheet)


    return (
        <View style={styles.container}>
            <Text style={styles.text}>
                Hello world
            </Text>
        </View>
    )
}


const stylesheet = createStyleSheet((theme, rt) => ({
    container: {
        backgroundColor: theme.colors.background,
        flex: 1,
        // apply insets to the container,
        // so it will add required paddings
        paddingTop: rt.insets.top,
        paddingBottom: rt.insets.bottom,
        paddingLeft: rt.insets.left,
        paddingRight: rt.insets.right
    },
})