KeyboardGestureArea + nested native-stack causes a crash

[kirillzyusko]

Describe the bug

A combination of KeyboardGestureArea and nested native-stack causes a crash.

Code snippet

• replace createStackNavigator -> createNativeStackNavigator in example app
• add this code in InteractiveKeyboard

<Button title='Go to' onPress={() => {navigation.navigate(ScreenNames.ANIMATED_EXAMPLE)}} />

• remove implementation of KeyboardAnimation component (return null).

Repo for reproducing

Example app with modifications above.

To Reproduce
Steps to reproduce the behavior:

1. Go to InteractiveKeyboard (android)
2. Click on "Go to" button
3. Go back
4. Try to scroll a screen

Expected behavior

No crash. InteractiveKeyboard should work as before.

Screenshots

Smartphone (please complete the following information):

• Desktop OS: [e.g. Windows 10, MacOS 10.15.5]
• Device: Pixel 7 Pro
• OS: Android 14
• RN version: 0.72.5
• RN architecture: old
• JS engine: Hermes
• Library version: 1.9.2

Additional context

Need to understand why isLaidOut is false.

[kirillzyusko]

Patch with changes for testing purpose:

diff --git a/example/src/navigation/ExamplesStack/index.tsx b/example/src/navigation/ExamplesStack/index.tsx
index 95d2e456..b3b7dde4 100644
--- a/example/src/navigation/ExamplesStack/index.tsx
+++ b/example/src/navigation/ExamplesStack/index.tsx
@@ -17,6 +17,7 @@ import KeyboardAvoidingViewExample from '../../screens/Examples/KeyboardAvoiding
 import ReanimatedChatFlatlist from '../../screens/Examples/ReanimatedChatFlatlist';
 import EnabledDisabled from '../../screens/Examples/EnabledDisabled';
 import AwareScrollViewStickyFooter from '../../screens/Examples/AwareScrollViewStickyFooter';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
 export type ExamplesStackParamList = {
   [ScreenNames.ANIMATED_EXAMPLE]: undefined;
@@ -34,7 +35,7 @@ export type ExamplesStackParamList = {
   [ScreenNames.ENABLED_DISABLED]: undefined;
 };
 
-const Stack = createStackNavigator<ExamplesStackParamList>();
+const Stack = createNativeStackNavigator<ExamplesStackParamList>();
 
 const options = {
   [ScreenNames.ANIMATED_EXAMPLE]: {
diff --git a/example/src/navigation/RootStack/index.tsx b/example/src/navigation/RootStack/index.tsx
index 353a1491..cee87187 100644
--- a/example/src/navigation/RootStack/index.tsx
+++ b/example/src/navigation/RootStack/index.tsx
@@ -4,13 +4,14 @@ import { createStackNavigator } from '@react-navigation/stack';
 import { ScreenNames } from '../../constants/screenNames';
 import ExamplesStack from '../ExamplesStack';
 import ExampleMain from '../../screens/Examples/Main';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
 export type RootStackParamList = {
   [ScreenNames.EXAMPLES]: undefined;
   [ScreenNames.EXAMPLES_STACK]: {};
 };
 
-const Stack = createStackNavigator<RootStackParamList>();
+const Stack = createNativeStackNavigator<RootStackParamList>();
 
 const options = {
   [ScreenNames.EXAMPLES_STACK]: { headerShown: false },
diff --git a/example/src/screens/Examples/InteractiveKeyboard/index.tsx b/example/src/screens/Examples/InteractiveKeyboard/index.tsx
index 3332cf43..958a5056 100644
--- a/example/src/screens/Examples/InteractiveKeyboard/index.tsx
+++ b/example/src/screens/Examples/InteractiveKeyboard/index.tsx
@@ -1,8 +1,9 @@
 import { StackScreenProps } from '@react-navigation/stack';
 import React, { useEffect, useState } from 'react';
-import { Text, TextInput, View } from 'react-native';
+import { Button, Text, TextInput, View } from 'react-native';
 import {
   KeyboardGestureArea,
+  useGenericKeyboardHandler,
   useKeyboardHandler,
 } from 'react-native-keyboard-controller';
 import Reanimated, {
@@ -14,6 +15,7 @@ import Message from '../../../components/Message';
 import { history } from '../../../components/Message/data';
 import { ExamplesStackParamList } from '../../../navigation/ExamplesStack';
 import styles from './styles';
+import { ScreenNames } from '../../../constants/screenNames';
 
 const AnimatedTextInput = Reanimated.createAnimatedComponent(TextInput);
 
@@ -88,6 +90,7 @@ function InteractiveKeyboard({ navigation }: Props) {
         interpolator={interpolator}
         showOnSwipeUp
       >
+        <Button title='Go to' onPress={() => {navigation.navigate(ScreenNames.ANIMATED_EXAMPLE)}} />
         <Reanimated.ScrollView
           showsVerticalScrollIndicator={false}
           style={scrollViewStyle}
diff --git a/example/src/screens/Examples/KeyboardAnimation/index.tsx b/example/src/screens/Examples/KeyboardAnimation/index.tsx
index 7da048df..7da7a452 100644
--- a/example/src/screens/Examples/KeyboardAnimation/index.tsx
+++ b/example/src/screens/Examples/KeyboardAnimation/index.tsx
@@ -3,5 +3,5 @@ import React from 'react';
 import KeyboardAnimationTemplate from '../../../components/KeyboardAnimation';
 
 export default function KeyboardAnimation() {
-  return <KeyboardAnimationTemplate />;
+  return null;
 }