Keyboard problems

[exzos28]

Bug summary

windowSoftInputMode="adjustResize" not working after connecting react-native-bars
Keyboard always opens on top of the screen

The default state of the example from the repository:

Screen.Recording.2022-09-23.at.13.00.09.mov

After removing this line RNBars.init(this, "dark-content");
android/app/src/main/java/com/rnbootsplashexample/MainActivity.java:26

Screen.Recording.2022-09-23.at.13.00.59.mov

In both cases I have android:windowSoftInputMode="adjustResize" in AndroidManifest.
And I expect the first case to have the same behavior. But it's not.

Library version

1.2.2

Environment info

"react-native": "0.70.0",
"react-native-bars": "^1.2.2",
"react-native-bootsplash": "^4.3.2",

Steps to reproduce

This is an example with react-native-bootsplash template

Reproducible sample code

import * as React from "react";
import {
  ScrollView,
  TextInput,
  View,
} from "react-native";
import * as BootSplash from "react-native-bootsplash";

export const App = () => {
  React.useEffect(() => {
    BootSplash.hide();
  }, []);

  return (
    <ScrollView>
      <View style={{height: 500, borderWidth: 1, marginBottom: 10}} />
      <TextInput style={{borderWidth: 1, borderRadius: 10, padding: 10}} />
    </ScrollView>
  );
};

[zoontek]

Thanks for the videos and the reproduction code, it helps.

I found it's caused by WindowCompat.setDecorFitsSystemWindows(window, false);, which is required but also a (unfixed) source of issues on Android: (https://issuetracker.google.com/issues/36986276, mikepenz/MaterialDrawer#95)

I will check if I can find a workaround.

[zoontek]

@exzos28 I dug a bit on this.

• mikepenz/MaterialDrawer used KeyboardUtil.java
• The same "fix" is available on Google issue tracker
• In a similar React Native issue
• And in this gist

But as you can see in the comments, this is not ideal since it creates a flickering.

Dont' mind the navigation bar here, just focus on the status bar:

XRecorder_26092022_144236.mp4

The "best" option for me seems to switch windowSoftInputMode="adjustResize" to windowSoftInputMode="adjustPan":

XRecorder_26092022_144422.mp4

I will update the README accordingly.

[zoontek]

I published a new version with the README update: https://github.com/zoontek/react-native-bars/releases/tag/1.2.3

[exzos28]

@zoontek
Yes, but in this case, the page is panned, and the header moves up. This is undesirable in 99% of cases, in my opinion.

Screen.Recording.2022-09-27.at.14.30.45.mov

[zoontek]

@exzos28 I agree, but checked current solutions and there's none viable.
Google does not seems to care about its OS.

[exzos28]

@zoontek I think we need to implement an api in your library to be able to turn transparent status and navigation bars on and off. It would be great.

[zoontek]

@exzos28 Sure, your company can hire me as a freelancer to take time to add this 🙂

[exzos28]

@zoontek
I understand 🙂 I'll try to find some time and send PR. Does that make sense?

[zoontek]

@exzos28 Not really since this is not a feature I see the interest in.

As iOS does not have this kind of options, I'd rather keep an uniformed behaviour between the platforms and avoid handling extra issues for a feature I will personally never use.

But I will gladly review a fix to keep adjustResize compat with WindowCompat.setDecorFitsSystemWindows(window, false), if you find a way to do that 🙂

[zoontek]

I'm onto something: #16
Unfortunately, an issue seems to exists with react-native-safe-area-context.

Using React Native built-in SafeAreaView:

screen-20220927-164030.mp4

Using react-native-safe-area-context one:

screen-20220927-163923.mp4

I will reach them soon to see what can cause this.

Also, adding https://github.com/android/user-interface-samples/tree/master/WindowInsetsAnimation support would be nice.

Erratum: It happens with react-navigation, only when header is shown. No safe area issue otherwise.
The issue also happen when react-native-bars is not init, so it's not linked.

It can be "fixed" using (taken from react-navigation/react-navigation#3971 (comment)):

import { useHeaderHeight } from "@react-navigation/elements";
import * as React from "react";
import { Keyboard, Platform, StatusBar } from "react-native";

export const useHeaderKeyboardVerticalOffset = () => {
  const [keyboardShown, setKeyboardShown] = React.useState(false);
  const headerHeight = useHeaderHeight();

  React.useEffect(() => {
    if (Platform.OS !== "android") {
      return;
    }

    const didShowListener = Keyboard.addListener("keyboardDidShow", () => {
      setKeyboardShown(true);
    });

    const didHideListener = Keyboard.addListener("keyboardDidHide", () => {
      setKeyboardShown(false);
    });

    return () => {
      didShowListener.remove();
      didHideListener.remove();
    };
  }, []);

  return keyboardShown ? headerHeight + (StatusBar.currentHeight ?? 0) : undefined;
};


// USAGE:

  const offset = useHeaderKeyboardVerticalOffset();

  return (
    <SafeAreaView style={[styles.container, { paddingBottom: offset }]}>