[android] Mounting multiple KeyboardAvoidingViews across different mounted screens cause conflicts with one another

[erickreutz]

• Screen 1 uses a KeyboardAvoidingView to keep a button fixed at the bottom of the view when the keyboard appears.
• Screen 1 pushes Screen 2
• Screen 2 uses a second KeyboardAvoidingView to keep a button fixed at the bottom of the view when the keyboard appears but it does not render correctly due to conflicts with what I assume to be is some shared state from the KeyboardAvodiingView on the previously screen

If I set enabled={false} on screen 1 then screen 2 works as expected.

It should also be noted that this does not seem to be an issue on iOS.

Screen 1	Screen 1 (input focused)	Screen 2	Screen 2 (with disabled avoiding view on the previous screen)

Both Screen 1 and Screen 2 use the exact same code

import { TextInput, Text, View, StyleSheet } from "react-native";
import { RectButton } from "react-native-gesture-handler";
import { useNavigation, useIsFocused } from "@react-navigation/native";
import { KeyboardAvoidingView } from "react-native-keyboard-controller";

export function ScreenOne() {
  const navigation = useNavigation();

  const onPress = () => {
    navigation.navigate("Two");
  };

  return (
    <KeyboardAvoidingView
      style={{ flex: 1 }}
      behavior="height"
      keyboardVerticalOffset={80}
    >
      <View style={styles.root}>
        <View style={styles.inner}>
          <TextInput style={styles.input} placeholder="Input" />
        </View>
        <RectButton onPress={onPress} style={styles.button}>
          <Text>Next</Text>
        </RectButton>
      </View>
    </KeyboardAvoidingView>
  );
}

const styles = StyleSheet.create({
  root: {
    flex: 1,
  },
  inner: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  input: {
    borderWidth: 1,
    borderColor: "black",
    padding: 8,
    width: "80%",
  },
  button: {
    backgroundColor: "lightblue",
    padding: 24,
    alignItems: "center",
  },
});

import { StyleSheet } from "react-native";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { NotificationsProvider } from "./notifs";
import { KeyboardProvider } from "react-native-keyboard-controller";
import {
  SafeAreaProvider,
  initialWindowMetrics,
} from "react-native-safe-area-context";
import { NavigationContainer } from "@react-navigation/native";
import { RootStack } from "./RootStack";

export default function App() {
  return (
    <SafeAreaProvider initialMetrics={initialWindowMetrics}>
      <GestureHandlerRootView style={styles.root}>
        <KeyboardProvider>
          <NavigationContainer>
            <RootStack />
          </NavigationContainer>
        </KeyboardProvider>
        <NotificationsProvider />
      </GestureHandlerRootView>
    </SafeAreaProvider>
  );
}

const styles = StyleSheet.create({
  root: {
    flex: 1,
  },
});

{
  "name": "my-test-app",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@react-navigation/native": "^6.1.9",
    "@react-navigation/native-stack": "^6.9.17",
    "expo": "~49.0.15",
    "expo-dev-client": "~2.4.12",
    "expo-status-bar": "~1.6.0",
    "react": "18.2.0",
    "react-native": "0.72.6",
    "react-native-gesture-handler": "~2.12.0",
    "react-native-keyboard-controller": "^1.9.0",
    "react-native-reanimated": "^3.5.4",
    "react-native-safe-area-context": "4.6.3",
    "react-native-screens": "~3.22.0",
    "expo-splash-screen": "~0.20.5"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
  },
  "private": true
}

[kirillzyusko]

Interesting, thank you for your report @erickreutz

Mat I ask you which Android version did you test?

[erickreutz]

@kirillzyusko Pixel 6 Pro API 31:5554

[kirillzyusko]

@erickreutz Do I correctly understand, that you are using next steps to reproduce?

• open Screen 1
• set focus on input
• press next button (keyboard must be opened)

If yes, then don't you mind to test #268 and see whether the issue has gone for you? 👀

[erickreutz]

@kirillzyusko yes, you understand correctly - just tried your branch out in my test app and it's working as expected now - thank you!!

[kirillzyusko]

@erickreutz awesome! I'll fix CI tomorrow and will try to prepare a new release! 😎

[erickreutz]

@kirillzyusko Great thank you! also, I thought I should let you know that after further testing the problem still seems to persist if you set autoFocus on the input inside the second screen. If you delay the autoFocus it seems to fix the issue.

[kirillzyusko]

I thought I should let you know that after further testing the problem still seems to persist if you set autoFocus on the input inside the second screen.

@erickreutz I can not reproduce it in my example app... Any ideas what I'm doing wrong?

Screen.Recording.2023-11-12.at.21.33.16.mov

[erickreutz]

@kirillzyusko Hmm yeah I think it may have been a bug in my own code - sorry about that.

[kirillzyusko]

@erickreutz ah, okay 🙂 Then I'm going to close this issue - feel free to open new one if you discover any issues 👀

[kirillzyusko]

Published under 1.9.1 version 👍