KeyboardProvider , UI bug after device rotate , using keyboard-controller and react-navigation

[term51]

Describe the bug When I finished the UI I decided to test the display with a horizontal screen and noticed that the UI shifts depending on the screen rotation. Initially, I didn't use the react-native-safe-area-context component, when I figured out what the problem was I saw that your example used it, I put it in but it didn't work. I don't know what to do with it, I tried removing components from the list one by one, but the problem disappeared only after removing KeyboardProvider. At this point, the only option is to remove your library and consider how to customize the Keyboard from react-native to make it work properly. If you need additional information, please reply as soon as possible.

versions of some of the usable libraries "react-native-reanimated": "3.15.0", "react-native-paper": "5.12.5", "@react-navigation/bottom-tabs": "6.6.1", "@react-navigation/native": "6.1.18", "@react-navigation/native-stack": "6.11.0", "@react-navigation/stack": "6.4.1",

Code snippet

return (
    <SafeAreaProvider initialMetrics={initialWindowMetrics}>
      <KeyboardProvider >
        <PaperProvider theme={selectedTheme}>
          <NotificationToastProvider>
            <ConfirmationDialogProvider>
              <Portal.Host>
                <Navigation />
              </Portal.Host>
            </ConfirmationDialogProvider>
          </NotificationToastProvider>
        </PaperProvider>
      </KeyboardProvider>
    </SafeAreaProvider>
  );

To Reproduce Steps to reproduce the behavior:

1. Set up according to the instruction
2. Click rotate on the emulator
3. See the problem

Expected behavior bottom and top are formatted to fit the width of the screen

Screenshots Normal

Rotated

Smartphone (please complete the following information):

• Desktop OS: Windows 11
• Device: Pixel 8, Samsung m21
• OS: Android 7, 12, 14
• RN version: 0.74.0
• RN architecture: old
• JS engine: Hermes
• Library version: 1.12.7

[kirillzyusko]

@term51 very interesting! Actually I'm always testing rotation and in my example app it works without artificial paddings (Pixel 7 Pro, Android 14):

Circle test	Chat test

I think it could be related to the usage of BottomTabBar navigator (this is the only one difference that I see between my app and yours) 🤔

Would you mind to provide a minimal reproduction repo?

I'll try to play around with bottom tabs navigation etc., but it would significantly speed up the fix development if you could provide a minimal code needed to reproduce the problem ❤️

[kirillzyusko]

Also tested bottom tabs in example app (on API 28) and it seems to be working fine - let me know if I'm doing something wrong:

[term51]

Okay, I'm doing it now.

[term51]

https://github.com/term51/for-fix-ui-bug

The problem remains, by the way, the shift is relative to the turn.

[kirillzyusko]

Thank you for reproduction @term51! It looks like it happens because I add paddings to the view, but when the view gets rotated - the paddings are associated with the same borders (i. e. I add bottom padding, but when screen gets rotated - it should be left/right, but not bottom).

I tend to think that the problem is in react-native-keyboard-controller package - I'll try to change paddings depends on orientation and see the new behavior.

@term51 do you think that you can strictly specify portrait mode in your application (as a workaround) while I'm preparing a fix? 🤔

[term51]

No problem, it can be wait, thank you for such a quick response

[kirillzyusko]

@term51 can you please check if https://github.com/kirillzyusko/react-native-keyboard-controller/pull/550 fixes the problem?

[kirillzyusko]

The fix is published under 1.13.1! Let me know if the issue is still there so that I can re-open this issue!