Skip to content
react-native-unistyles

Edge to edge layout with Unistyles

Edge to edge layout with Unistyles

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 { StyleSheet } from 'react-native-unistyles'


const App = () => (
    <View style={styles.container}>
        <Text style={styles.text}>
            Correct insets
        </Text>
    </View>
)


const styles = StyleSheet.create((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
    },
})