Difference in KeyboardStickyView behavior on Android and iOS (in an edge-to-edge app)

[kvark85]

Describe the bug
The bottom part of the content block is positioned differently on Android and iOS when the app is configured as edge-to-edge. There is no clear and consistent behavior in block positioning.

Code snippet

function App(): React.JSX.Element {
  return (
    <KeyboardProvider>
      <SafeAreaProvider>
        <TestComponent />
      </SafeAreaProvider>
    </KeyboardProvider>
  );
}

function TestComponent(): React.JSX.Element {
  const {bottom} = useSafeAreaInsets();

  return (
    <>
      <View style={styles.root}>
        <TextInput style={styles.input} value={'1'} onChange={() => {}} />
        <Button title={'Hide keyboard'} onPress={Keyboard.dismiss} />
      </View>
      <KeyboardStickyView offset={{closed: -1 * bottom, opened: 0}}>
        <TouchableOpacity style={styles.button} onPress={() => {}}>
          <Text style={styles.buttonText}>Sticky button</Text>
        </TouchableOpacity>
      </KeyboardStickyView>
    </>
  );
}

const styles = StyleSheet.create({
  root: {
    paddingVertical: 50,
    flex: 1,
    borderColor: 'red',
    borderWidth: 3,
  },
  input: {
    borderColor: 'black',
    borderWidth: 1,
    padding: 5,
  },
  buttonStyle: {backgroundColor: 'yellow'},
  button: {
    marginHorizontal: 15,
    backgroundColor: 'blue',
    padding: 10,
    alignItems: 'center',
  },
  buttonText: {color: 'white'},
});

Repo for reproducing
https://github.com/kvark85/test_sticky_button_3

To Reproduce
For testing, use a device or simulator with a bottom Safe Area Insets.
For example:
• Android: Virtual device Pixel_3a_APL_34_extension_level_7_arm64-v8a (Android 14.0 “UpsideDownCake” | arm64)
• iOS: iPhone X (iOS 16.4)

Steps to reproduce the behavior:

1. git clone [email protected]:kvark85/test_sticky_button_3.git
2. cd ./test_sticky_button_3
3. yarn install
4. cd ios
5. pod install
6. cd ../
7. yarn ios
8. see the bottom red border (border of content)
9. yarn android
10. Compare position of bottom red border (border of content) on ios and android

Expected behavior
The bottom edge of the content (the bottom red border) should be positioned the same on Android and iOS.

Screenshots

Smartphone (please complete the following information):

• Desktop OS: macOS 14.6.1
• Device: iPhone SE, Pixel_3a
• OS: iOS 16.4, Android 14.0
• RN version: 0.77.1
• RN architecture: new
• JS engine: Hermes
• Library version: 1.16.3

Additional context

[kirillzyusko]

@kvark85 I think it shouldn't?..

Let me explain how I understand that. The white space in the bottom is actually the button height (which is equal on both platforms). You are moving the button higher by safe-area bottom inset - but this inset is platform specific (it can be 24 on Android and 44 on iOS, for example). Because of that the red line is not matching button position.

My assumption is that you need to use SafeAreaView with bottom padding, and you can try to apply absolute position for KeyboardStickyView - in this case the red line will actually show safe area padding, and KeyboardStickyView will not increase it, because it'll be positioned absolutely.

Does it make sense what I'm saying?

[kvark85]

Thank you. Everything is clear here. Closing the issue.