[Android] KeyboardStickyView used with OverKeyboardView crashes app.

[Mako-L]

Describe the bug
When we use KeyboardStickyView with OverKeyboardView, set OverKeyboardView visible to true and clicked on it it crashes the app and doesn't put the elements correctly where they should be.

Code snippet

<KeyboardStickyView style={styles.keyboardStickyView}>
        <TextInput style={styles.input} testID="over_keyboard_view.input" />
        <Button
        testID="over_keyboard_view.show"
        title="Show"
        onPress={() => setShow(true)}
      />
      </KeyboardStickyView>
      
  
   
      
      {/* OverKeyboardView outside of KeyboardStickyView but in same parent */}
      <OverKeyboardView visible={isShow}>
        <GestureHandlerRootView style={styles.fullScreen}>
          <TouchableWithoutFeedback
            style={styles.fullScreen}
            testID="over_keyboard_view.background"
            onPress={() => setShow(false)}
          >
            <View style={styles.overlayContainer}>
              <TouchableOpacity
                testID="over_keyboard_view.content"
                onPress={() => setShow(false)}
              >
                <View style={styles.background} />
              </TouchableOpacity>
            </View>
          </TouchableWithoutFeedback>
        </GestureHandlerRootView>
      </OverKeyboardView>

Repo for reproducing
Repo with example

To Reproduce
Steps to reproduce the behavior:

1. Go to main home
2. Click on input
3. Click on show
4. press on the right of the blue box.
5. app crashes.

Expected behavior
The blue box should be on the bottom in center and when clicked outside of it it should close the "modal"

Screenshots

Smartphone (please complete the following information):

• Desktop OS: Mac os
• Device: Pixel 8
• OS: latest
• RN version: 0.76.7
• RN architecture: [new
• JS engine: idk
• Library version: main branch.

Additional context
None

[Mako-L]

To also mention that when i use the OverKeyboardView inside the KeyboardStickyView the taping surface is not full screen is where the KeyboardStickyView ends.

[Mako-L]

It should also have repo provided label too 😄

[kirillzyusko]

@Mako-L well, it seems I know what causes this problem 😅 Basically it's this problem: software-mansion/react-native-reanimated#6659

And I see two options:

• re-write KeyboardStickyView to Animated and the issue will gone; PR: feat: KeyboardStickyView using plain Animated #898
• wrap OverKeyboardView in additional View (should it be done in this package?) - so it looks like <View><OverKeyboardView /></View>

Both approaches work - what do you think about this? 👀

[Mako-L]

@kirillzyusko Does it fixes the problem that when OverKeyboardView is inside of KeyboardStickyView the taping surface is not full screen is where the KeyboardStickyView ends? Cause i tried With wrapping the OverKeyboardView in a view and didn't fix it. I'm trying on my repo to see if it fixed the other issue now.

[Mako-L]

@kirillzyusko I updated the repo to showcase the bug I'm referring to. I'm not sure if i need to open a new ticket for it I thought is gonna solve both issues the fix. In repo when clicking on top green screen it doesn't react to tap and when clicking bottom where the keyboardsticky height ends it works. Repo

[Mako-L]

@Mako-L well, it seems I know what causes this problem 😅 Basically it's this problem: software-mansion/react-native-reanimated#6659

And I see two options:

• re-write KeyboardStickyView to Animated and the issue will gone; PR: feat: KeyboardStickyView using plain Animated #898
• wrap OverKeyboardView in additional View (should it be done in this package?) - so it looks like <View><OverKeyboardView /></View>

Both approaches work - what do you think about this? 👀

To answer your question. I would use the first approach because I believe the wrapping the OverKeyboardView looks like a hackinsh way of fixing it and that if we can make the user use less code is better.

[kirillzyusko]

Does it fixes the problem that when OverKeyboardView is inside of KeyboardStickyView the taping surface is not full screen is where the KeyboardStickyView ends?

What is the point to embed OverKeyboardView inside KeyboardStickyView? 🤔 I haven't checked repo yet - I was testing my example project with KeyboardToolbar near OverKeyboardView and the issue was reproducible, so I posted my update 🙈