View Moves Out Of The Screen When Text Input Is Focused Used On Bottom Sheet In React Native For Android

I'm using the library - https://github.com/osdnk/react-native-reanimated-bottom-sheet I'm using a TextInput on this bottom sheet. And now when the Text Input is focused or typed i

Solution 1:

I solved the same problem in my project using Expo Kit 38

Just add this to your app.json file:

"android":{"softwareKeyboardLayoutMode":"pan"}

Here’s how to upgrade your app to Expo SDK 38.0.0 from 37.0.0:

1. Update expo-cli by running npm i -g expo-cli
2. Run expo upgrade in your project directory

You may want to check the documentation for more details

Solution 2:

Using android:windowSoftInputMode="adjustPan" in AndroidManifest.xml worked! :D

Solution 3:

Set the device screen height to your BottomSheet's parent container. Example code:

importBottomSheetfrom'reanimated-bottom-sheet'import { ViewasContainer, Dimensions } from'react-native'const { height } = Dimensions.get('window') // Magic value.constScreen = () => (
  <Containerstyle={{height }}>
    {/* Your screen content here */}
    <BottomSheet {...yourBottomSheetParams} /></Container>
)

exportdefaultScreen

1. Works for Expo Managed Workflow projects. While setting the android:windowSoftInputMode="adjustPan" is not possible there.
2. height: 100% did not work for me (was suggested here on GitHub Bottom Sheet moves up along with Keyboard in Android and not iOS #203).