Skip to content

Avoiding keyboard

Unistyles 3.0 introduces a new inset called ime, which is automatically animated when the keyboard appears or disappears. Using this inset in your style will automatically register it for future updates.

Unistyles dynamically recalculates your styles based on their dependencies. To learn more about how Unistyles re-calculates your styles, please refer to the guide.

Usage

import { TextInput, View } from 'react-native'
import { StyleSheet } from 'react-native-unistyles'

const KeyboardAvoidingView = () => {
    return (
        <View style={styles.container}>
            <TextInput style={styles.input} />
        </View>
    )
}

const styles = StyleSheet.create((theme, rt) => ({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'flex-end',
        backgroundColor: theme.colors.backgroundColor,
        paddingHorizontal: theme.gap(2),
        paddingTop: rt.insets.top,
        transform: [
            {
                translateY: rt.insets.ime * -1
            }
        ]
    },
    input: {
        width: '100%',
    }
}))

In this example, the container will automatically adjust to avoid the keyboard, ensuring the input remains visible at all times.

Platform differences

The ime value is calculated differently on every platform:

iOS - ime is equal to the full height of the keyboard and it’s animated frame by frame together with the keyboard
Android - ime is equal to the keyboard height minus the bottom inset (navigation bar). It’s animated on Android 11 (API 30) and above, while on older versions it changes without animation
Web - ime is always 0

Usage with `useUnistyles` and `withUnistyles`

You can also read rt.insets.ime in useUnistyles or in withUnistyles mappings. Reading rt.insets.ime subscribes only to keyboard changes, not to other insets.