iOS & Android Screen Height + Android Bottom Inset

[HarcourtsCooperCo]

Hi 👋

I am running into two issues with version 2.8.3.

1. UnistylesRuntime.screen.height on Android (14) does not include the status bar height, while it does on iOS.

This code gives consistent values between platforms:

const windowDimensions = {
    width: UnistylesRuntime.screen.width,
    height: UnistylesRuntime.screen.height + (Platform.OS == 'android' ? UnistylesRuntime.statusBar.height : 0)
}

2. UnistylesRuntime.insets.bottom on Android (14) with Fixed 3 button Navigation Bar delay changes between 0 <> navigationBar.Height based on if the keyboard is open. The value does not change on iOS.

Using UnistylesRuntime.insets.bottom on the Screen Root View initially positions my TextInput at the footer correctly. However, when closing the Keyboard, the inset value remains at 0 for a brief period. Causing the TextInput to be hidden behind the Navigation before being pushed up again.

Same behavior when using UnistylesMiniRuntime inset value in createStyleSheet for the Root View style.

My solution for above is to store the UnistylesRuntime.insets.bottom value before the keyboard is opened and use that for consistent padding on the Screen Root View.

Any help to understand where I am going wrong would be very helpful!

[jpudysz]

1. UnistylesRuntime.screen.height on Android (14) does not include the status bar height, while it does on iOS.

That's interesting. I will check it!

2. UnistylesRuntime.insets.bottom on Android (14) with Fixed 3 button Navigation Bar delay changes between 0 <> navigationBar.Height based on if the keyboard is open. The value does not change on iOS.

Yeah, that's possible. Will try to patch it in the next relase.

Thanks for the report!

[jpudysz]

Implemented in:
#243
#244

Thanks for spotting it! 🙏🏼

[jpudysz]

Released as 2.8.4

[HarcourtsCooperCo]

Amazing 👏 I can confirm UnistylesRuntime.screen.height is fixed!

UnistylesRuntime.insets.bottom is behaving much better switching between 0 <> navigationHeight.

I am using the package react-native-keyboard-controller with the following setup:

function MyScreen() {
    const { styles, theme } = useStyles(stylesheet)

    const insets = useSafeAreaInsets()

    return (
        <KeyboardProvider
            statusBarTranslucent
            navigationBarTranslucent
        >
            <View style={[
                {
                    flex: 1,
                    backgroundColor: 'green',
                    // This works perfect on Android because the value does not change based on keyboard state
                    // paddingBottom:   insets.bottom
                },
                styles.bottomInset
            ]}>
            <KeyboardAvoidingView style={{ flex: 1 }} behavior='padding'>
                <View style={{
                    flex: 1,
                    backgroundColor: 'red'
                }} />
                <TextInput
                    placeholder='My Input'
                    style={{
                        height: 40,
                        backgroundColor: 'lightgray'
                    }}
                />
            </KeyboardAvoidingView>
            </View>
        </KeyboardProvider>
    )
}

const stylesheet = createStyleSheet((t, r) => ({
    bottomInset: {
        // This changes to 0 on Android when keyboard is opened and puts the input under the keyboard
        // On iOS, the value stays the same and causes no issue
        paddingBottom: r.insets.bottom
    }
}))

Are you able to give further insight on how to handle r.insets.bottom on Android above? r.insets.bottom does not change to 0 on iOS and functions perfectly.

Having r.insets.bottom change to 0 on Android when the keyboard opens puts the TextInput under the keyboard.

Update: Unistyles believes the Fixed Navigation Bar is hidden when the Keyboard is opened. Which is not the case as seen here:

This problem can be solved by using bottom from useSafeAreaInsets because it is constant, regardless of keyboard state.

Thank you for your help :)

[jpudysz]

You should use KeyboardStickyView from react-native-keyboard-controller to keep input on top of keyboard.

[SickanK]

How would you deal with an absolutely positioned element behind the keyboard in a mobile app?

I'm currently using the unistyles runtime insets for bottom padding, but it looks glitchy because the bottom padding gets adjusted when the keyboard is shown and hidden. This causes the element to move down and then back up again, which isn't ideal.
The adjustment usually happens at the end of the keyboard hide animation which makes it visible. Any suggestions on how to achieve this without using safe area insets?

edit:
To add to the above. I may be doing something wrong. But it seems that you still have to add bottom insets with KeyboardStickyView if you run edge-to-edge with statusBarTranslucent and navigationBarTranslucentset to true as in the example from HarcourtsCooperCo. Otherwise KeyboardStickyView will not line up smoothly with the keyboard.

[jpudysz]

Right now insets.bottom is dynamic, because other libraries are modifying the Android Insets values. I can't change it.
What I can do and it's a plan for Unistyles 3.0 is to expose:

rt.insets.bottom // static
rt.insets.keyboard or rt.insets.ime // dynamic (keyboard insets)

You can then hook to whatever value you prefer.

WindowInsetsAPI is cool, and can be helpful but the biggest disadvantage is that other developers are mutating it. To fix your case you can either use safe-area-context for now or save the value before the keyboard is visible. I'm aware of this issue, but Im focusing right now on 3.0 branch.

[SickanK]

Sounds good! 😄 I'll work out a temporary solution for now. Thank you for the great work!