Crash on Interactive Keyboard [Android only]

[ImBeCiliC]

Describe the bug
Hard crash with this error been thrown

react-native-keyboard-controller/android/src/main/java/com/reactnativekeyboardcontroller/extensions/View.kt

Line 47 in 756be07

" or attached to window",

Reproduction is possible in your example repo.

Upon routing into a deeper stack. Home -> Chat with Keyboard Handler -> Forward Friend --- Back Button ---> Chat with Keyboard Handler -> Open Keyboard -> Full Android Crash

java.lang.IllegalArgumentException: Can not copy bounds as view is not laid out or attached to window
08-11 12:59:11.486  4446  4446 E AndroidRuntime: 	at com.reactnativekeyboardcontroller.extensions.ViewKt.copyBoundsInWindow(View.kt:45)

Repo for reproducing
https://github.com/ImBeCiliC/keyboard-controller-crash-1

To Reproduce
Steps to reproduce the behavior:

1. Go to 'interactive keyboard'
2. Open Keyboard
3. Press Yellow Navigation Button
4. Navigate Back
5. Open Keyboard
6. Try to Scroll the Chat View
7. CRASH

Smartphone (please complete the following information):

• OS: Android only
• RN version: as in example repo
• RN architecture: as in example repo
• JS engine: as in example repo
• Library version: 1.5.8

Additional context
In the Example the height of the fake view is strange after back navigation

Removing the KeyboardGestureArea removes the crash. Also in my example repo so you can check it out.

Appreciate the nice library and helped improve the React Native Keyboard issues we had in the past 🎉

[kirillzyusko]

Thanks @ImBeCiliC for reporting the problem! I'll have a look and will try to reproduce/fix the problem!

[kirillzyusko]

Okey-dokey, I figured it out.

The problems occurs because isLaidOut=false. It happens because of "height of the fake view is strange after back navigation" (view is not fully visible and thus it's not laid out).

"height of the fake view is strange after back navigation"

I think you are referring to this anomaly:

It happens because of the fact, that hooks by default changes inputMode to adjustResize on mount and to default on unmount. Since you are entering new screen - it'll change input mode to adjustResize. When you go back - it'll unmount component and will restore default mode (default mode is adjustPan in example app). So when you opened interactive keyboard by navigation back your inputMode will be adjustResize and it'll produce such "anomaly" (actually it's not an anomaly - that's how android works).

Try to replace KeyboardAnimation content with following code and reproduce your issue. I've tried and it has gone for me:

import React, { useContext } from 'react';
import { Animated, TextInput, View } from 'react-native';
import {
  KeyboardContext,
  useKeyboardAnimation,
  useKeyboardAnimationReplica,
} from 'react-native-keyboard-controller';
import styles from './styles';

const useKeyboardAnimationInNativeStack = () => {
  const context = useContext(KeyboardContext);

  return context.animated;
};

export default function KeyboardAnimation() {
  const { height, progress } = useKeyboardAnimationInNativeStack();

  return (
    <View style={styles.container}>
      <View>
        <Animated.View
          style={{
            width: 50,
            height: 50,
            backgroundColor: 'green',
            borderRadius: 25,
            transform: [
              {
                translateX: progress.interpolate({
                  inputRange: [0, 1],
                  outputRange: [0, 100],
                }),
              },
            ],
          }}
        />
      </View>
      <View>
        <TextInput
          style={{
            width: 200,
            marginTop: 50,
            height: 50,
            backgroundColor: 'yellow',
          }}
        />
        <View style={[styles.row, styles.center]}>
          <Animated.View
            style={{
              width: 50,
              height: 50,
              backgroundColor: 'red',
              borderRadius: 25,
              transform: [{ translateY: height }],
            }}
          />
        </View>
      </View>
    </View>
  );
}

Basically I highly recommend you to create your own versions of useKeyboardAnimation and other hooks - the default behavior (change soft input mode on mount/unmount) is suitable for a lot of use cases, however in a lot of use cases you may need to control inputMode granularly (for example use it in specific stack).

The common use case also would be to change input mode on focus event of react-navigation (it's better, than mount/unmount lifecycles).

And another common use case is to enable adjustResize globally for all application and change to other inputModes only when it's needed. In this case you also can create your own versions of hooks from this library:

const useKeyboardAnimationInNativeStack = () => {
  const context = useContext(KeyboardContext);

  return context.animated;
};

Let me know if something is unclear. Do you think I should add a page to the documentation explaining this concept in details?

[ImBeCiliC]

@kirillzyusko thanks for the detailed clarification. It is now working for me 🎉

Could be really helpful to others to have this section in the documentation.
If you don't need any code changes feel free to close the issue.

[kirillzyusko]

@ImBeCiliC actually I already wrote about this https://kirillzyusko.github.io/react-native-keyboard-controller/docs/guides/building-own-hook

Maybe it can be somehow improved? What do you think I should add to be sure that people are aware about this?

[4yki]

Hi @kirillzyusko ! First of all - huge thx for this lib.
I have this sort of crash right now ... and I'm sure that the problem is not because of changing windowSoftInputMode as I have "adjustResize" by default in the manifest.
So basically I have native stack (react-navigation):

1. Screen A (uses , everything works fine);
2. navigate to Screen B (uses , everything works fine);
3. navigate back from Screen B to Screen A;
4. try to focus input -> crash with the log "Can not copy bounds as view is not laid out or attached to window" ;

[4yki]

the structure of every screen is

<View>
<KeyboardGestureArea>
<ScrollView>
<View ..../>
</ScrollView>
</KeyboardGestureArea>
</View>

[kirillzyusko]

Hello @4yki 👋

It's hard to say what is going wrong here because input information is limited. May I kindly ask you to create a new issue and provide a minimal reproduction example?

[kirillzyusko]

@4yki I could reproduce this crash using native-stack navigator. I fixed a problem and published a new 1.9.3 version 👀

[Karthik-B-06]

It seems like it is still crashing on Android. I am wrapping the FlashList inside KeyboardGestureArea. Using the latest version of package

"react-native-keyboard-controller": "^1.10.1",

[kirillzyusko]

@Karthik-B-06 please, open a new issue and provide minimal reproduction example 🙏

Basically it can not crash with this exception anymore, because I removed throw construction.