View moves out of the screen when Text Input is focused used on Bottom Sheet in React Native for Android

Question

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 in, the bottom sheet should remain at the same position. It works fine for iOS, shown in the below screenshot.

And when I focus the Text Input on Android, the bottom sheet moves up along with the keyboard, shown in below 2 screenshots.

(Bottom Sheet in Android not focused)

(Bottom Sheet in Android focused)

I've also tried wrapping my bottom sheet inside KeyboardAvoidingView and its props accordingly but it didn't work.

Cryo

Answer 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

Spermatocyte

Answer 2

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

Cryo

I am using expo, any ideas? – Carmelo

@Carmelo no I don't know – Cryo

Answer 3

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

import BottomSheet from 'reanimated-bottom-sheet'
import { View as Container, Dimensions } from 'react-native'

const { height } = Dimensions.get('window') // Magic value.


const Screen = () => (
  <Container style={{ height }}>
    {/* Your screen content here */}
    <BottomSheet {...yourBottomSheetParams} />
  </Container>
)

export default Screen

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).

Sprig