Issues with two providers and React Native Navigation (wix)

[Omelyan]

Describe the bug
Everything is fine with the first screen shown. We can receive keyboard events as usual. But as soon as the second screen pushed and then popped out, the first screen didn't receive any keyboard events anymore.
RNN needs declared providers for every screen. It seems that when two KeyboardProvider's are rendered with RNN the first one becomes unresponsive.
Reproducible in a clean project with the following requirements:

• OS: Android 10 API 29 (with API 30+ everything works fine; in iOS it's ok too)
• RN version: 0.71.2
• RN architecture: old
• RNN version: 7.32.1
• JS engine: Hermes
• Library version: 1.4.4

[kirillzyusko]

Hi @Omelyan
Thank you for reporting the issue. Could you please create a small reproducible example? 👀

[Omelyan]

Hi @Omelyan Thank you for reporting the issue. Could you please create a small reproducible example? 👀

Hi, thanks for fast response. Yeap I did some tests and found how this can be solved. This is interesting...
https://github.com/Omelyan/RNNKeyboardController-Test

Here's the starting point:
RNNKC1.webm
(you can see that after the second screen will be pushed and popped no keyboard events firing)

Interestingly, when you set https://github.com/Omelyan/RNNKeyboardController-Test/blob/6a4b942737ce1803f0ded0e727f29d1416f68f31/index.js#L14 to false (RNN can wait for initial screen rendering before push animation), then the first keyboard event will be skipped, but the next ones will work:
RNNKC2.webm

And finally, once navigationBarTranslucent is set for KeyboardProvider everything is fine:
RNNKC3.webm

[Omelyan]

@kirillzyusko sadly, but it seems not all are so good :(
Check this video. While keyboard is shown, I push a new screen. Keyboard hides while switching screens. Then on a new screen I focus input and keyboard showing again. But after closing current screen (keyboard hides) the first screen thinks that keyboard is still on. And the worst thing is that it happens from time to time, not always.
RNNKC4.webm

[kirillzyusko]

Well, thank you @Omelyan for providing repro and describing all your findings. It's very helpful!
I'm going to clone your repo and see what's going wrong with the app 👀

[Omelyan]

Well, thank you @Omelyan for providing repro and describing all your findings. It's very helpful! I'm going to clone your repo and see what's going wrong with the app 👀

that's great, you're the most responsive lib maint on my mind)) and the lib is great and really helpful.

[kirillzyusko]

What I've found today is:

1. The lifecycle methods onStart/onProgress/onEnd are not triggered because of this:

For some reasons after going back callback.mDispachedInsets and insets are equal 🤷‍♂️

2. I've tried to re-create next example:

/* eslint-disable react-native/no-inline-styles */
import React, {useState} from 'react';
import {
  Button,
  Keyboard,
  ScrollView,
  TextInput,
  TouchableOpacity,
  View,
} from 'react-native';
import {
  KeyboardProvider,
  useKeyboardHandler,
} from 'react-native-keyboard-controller';
import {Navigation} from 'react-native-navigation';
import Animated, {
  useAnimatedStyle,
  useSharedValue,
  withTiming,
} from 'react-native-reanimated';
import {SecondScreen} from './SecondScreen';

const FirstScreenA = ({componentId}) => {
  const y = useSharedValue(0);

  const style = useAnimatedStyle(() => ({
    height: withTiming(y.value),
  }));

  useKeyboardHandler({
    onStart(e) {
      'worklet';
      y.value = 40 * e.progress;
    },
  });

  return (
    <ScrollView
      style={{
        backgroundColor: 'blue',
      }}
      contentContainerStyle={{
        flexGrow: 1,
        paddingHorizontal: 20,
        paddingVertical: 30,
      }}>
      <View
        style={{
          alignSelf: 'center',
          width: 70,
          aspectRatio: 0.6,
          borderWidth: 5,
          borderRadius: 10,
          marginBottom: 20,
          borderColor: 'white',
        }}>
        <Animated.View
          style={[
            {
              position: 'absolute',
              left: -1,
              right: -1,
              bottom: -1,
              backgroundColor: 'white',
            },
            style,
          ]}
        />
      </View>

      <View
        style={{
          height: 200,
          borderWidth: 10,
          marginBottom: 20,
          padding: 10,
          backgroundColor: 'yellow',
        }}>
        <TouchableOpacity
          style={{height: 50, backgroundColor: 'tomato'}}
          onPress={() => {
            Navigation.push(componentId, {
              component: {name: 'Second screen'},
            });
          }}
        />
      </View>

      <View
        style={{
          height: 200,
          borderWidth: 10,
          marginBottom: 20,
          backgroundColor: 'yellow',
        }}>
        <TextInput style={{height: 40, backgroundColor: 'white'}} />
      </View>

      <View
        style={{
          height: 200,
          borderWidth: 10,
          marginBottom: 20,
          backgroundColor: 'yellow',
        }}>
        <TextInput style={{height: 40, backgroundColor: 'white'}} />
      </View>
    </ScrollView>
  );
};

export const FirstScreen = ({componentId}) => {
  const [show, setShow] = useState(false);

  return (
    <View style={{flex: 1}}>
      <View style={{flex: 0.5}}>
        <KeyboardProvider>
          <FirstScreenA componentId={1} />
        </KeyboardProvider>
      </View>
      <View style={{flex: 0.5}}>
        <Button title="toggle" onPress={() => setShow(c => !c)} />
        {show && (
          <KeyboardProvider>
            <SecondScreen componentId={2} />
          </KeyboardProvider>
        )}
      </View>
    </View>
  );
};

To verify the idea that unmounting of Provider can cause unresponsiveness of first mounted provider. But the idea was wrong - everything works fine, i. e. that react-native-navigation also has an influence on this.

I'll continue my research tomorrow.

P. S. you wrote:

then the first keyboard event will be skipped, but the next ones will work

The similar issue was reported here #113 (comment) I believe issues are similar and most likely fix also will be a similar 🙂 Just an assumption that potential fix could be just calling requestApplyInsets when screen becomes active again, though need to verify it 🤔

P. P. S. it seems like I found a fix. We just need to remove callbacks when the view is detached from window and set new callback when view is attached again. I'm going to do more tests today at evening. If everything is okay then I'll open a PR and ask you to verify my changes, if you don't mind 🙃

Screen.Recording.2023-03-28.at.11.48.51.mov

[Omelyan]

it seems like I found a fix. We just need to remove callbacks when the view is detached from window and set new callback when view is attached again. I'm going to do more tests today at evening. If everything is okay then I'll open a PR and ask you to verify my changes, if you don't mind

sounds great, will be waiting, thanks

[kirillzyusko]

@Omelyan could you install a version from this branch: https://github.com/kirillzyusko/react-native-keyboard-controller/tree/fix/invalidate-callbacks-when-view-is-detached and verify whether it fixes the problem or not?

To be honestly I've discovered another problem and applied ugly fix that I don't like. Since I'm handling status/navigation bar paddings like in onApplyWindowInsetsListener -> this listener can be called many times and as a result if you open a second screen, then return back to a first one - happens too many calls to methods which are changing layout and as a result view is getting not laid out properly and first keyboard appearance is getting ignored. I've fixed the problem by calling setPaddings only one time 😅 But in my opinion such fix can break something else in the future, so in a meantime while you are testing I'll try to come up with a better fix.

[Omelyan]

verify whether it fixes the problem or not?

unfortunately nothing seems changed :(

RNNKC5.mov

[kirillzyusko]

@Omelyan thanks, seems like I need to dive into the issue deeper 👍

[Omelyan]

@kirillzyusko btw, events are called several times for some reason on switching screens, while the keyboard is hidden all the time. I mean more than the number of providers...

[Omelyan]

@kirillzyusko Hello. One more thing noticed: screen resize events are fired, causing different layouts before and after the new screen is pushed:

RNNKC6.mov

I think these things are related

[kirillzyusko]

Well, I think yes, there are many related things...
Yesterday I've tried to attach a single listener to decorView but even in this case the listener is also getting broken 🤯
(Here is a patch in case if you are interested: react-native-keyboard-controller+1.4.4.patch)

@Omelyan maybe you have TG/Discord - we could have a conversation there and share all findings there in order to fix the issue faster 🙂 You can post your contact here (and the edit a message later in order not to share it for everyone) or send me a message on gmail if you want

[Omelyan]

@kirillzyusko good idea)