React-native-reanimated-bottom-sheet: Bottom Sheet moves up along with Keyboard in Android and not iOS

[shubh007-dev]

I guess my question is similar to the below question
https://github.com/osdnk/react-native-reanimated-bottom-sheet/issues/63

And I've posted my question on Stack Overflow, please check the below link for it.

https://stackoverflow.com/questions/61040063/view-moves-out-of-the-screen-when-text-input-is-focused-used-on-bottom-sheet-in

[karimcambridge]

Yea it's happening when the top container is flex: 1, if you remove flex and set height to 100%, it fixes it, but this causes issues if you have your map with flex: 1

I have this same issue how do we fix this?

[shubh007-dev]

@osdnk @brentvatne can you please help us with this problem? :)

[shubh007-dev]

@karimcambridge using android:windowSoftInputMode="adjustPan" in AndroidManifest.xml worked for me! :D

[karimcambridge]

Yes, I use expo tho so that can't help me sadly.

[gabrielmoncea]

@shubh007-dev your solution worked for me too

[karimcambridge]

Yes that solution is garanteed for now.

For people using Expo and cannot eject, you have to not use flex in your views. Use heights.

[ljmocic]

In my case it was not easy adjustable for switching from flex to height inside sheet.
I've added onFocus to TextInput for snapping to the highest snap point and added listener to bring sheet back to starting point when keyboard closes.

onFocus={() => bottomSheetRef.current.snapTo(2)}
Keyboard.addListener('keyboardDidHide', () => bottomSheetRef.current.snapTo(0));

[yzalvov]

Why?

• height: 100% didn’t work for me.
• Works in Expo Managed Workflow project for me where android:windowSoftInputMode="adjustPan" is not possible.
  

  Code

import React from 'react'
import { View as Container, Dimensions, StyleSheet } from 'react-native'
import BottomSheet from 'reanimated-bottom-sheet'
import { heightPercentageToDP as hp } from 'react-native-responsive-screen' // final magic
import MapView from 'react-native-maps' // If you use one.

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

const MapViewContainer = Container

const Screen = () => (
  <Container style={{ minHeight: hp('100%') }}> {/* Fix 1 */}

    {/* May help for a MapView */}
    <MapViewContainer style={{ maxHeight: height, minHeight: `100%` }}> {/* Fix 2 */}
      <MapView style={StyleSheet.absoluteFill} {...yourMapViewParams} />
    </MapViewContainer>

    <BottomSheet {...yourBottomSheetParams} />
  </Container>
)

export default Screen

[yzalvov]

Well, as it turned out by testing on different Android devices, the device screen height for the Container was not magical enough. Plus I have a MapView (react-native-maps) inside it, which revealed its own problems. I guess @karimcambridge told about them. So I had to tune this up too. It works almost fine now. The sheet content still has a small bump, but at least the Container and the MapView are as expected.

I updated the code above respectively:

• minHeight: '100%' for the Container.
• The device screen height as maxHeight and minHeight: '100%' for the MapViewContainer

[karimcambridge]

That should work.

I use https://github.com/marudy/react-native-responsive-screen so using height: hp('100%'); is enough for me.

[yzalvov]

Thanks @karimcambridge ! Now it's perfect. With minHeight: hp('100%') for my screen Container (minHeight in my case) 🙏🏽

[karimcambridge]

Thanks @karimcambridge ! Now it's perfect. With minHeight: hp('100%') for my screen Container (minHeight in my case) 🙏🏽

Glad we can help each other. You've completed my app with the patch you posted earlier.

I'll be notifing the repo owner about these fixes and issues by email so hopefully when he has some time everyone can enjoy these fixes smoothly.

[paolosantarsiero]

I tried to implement with react native maps and it works fine. But when keyboard is opened after the map not works! Any suggestions? I try to put minHeight: hp('100%') in the container and in the map but not works!

I fixed it with KeyboardAvoidingView behavior="height" as a container

[brentvatne]

if you're using the expo managed workflow then in sdk 38 (soon to be released) you will be able to toggle between the android:windowSoftInputMode adjustPan and adjustResize in app.json as described and implemented in this pr https://github.com/expo/expo/pull/8842

[karimcambridge]

if you're using the expo managed workflow then in sdk 38 (soon to be released) you will be able to toggle between the android:windowSoftInputMode adjustPan and adjustResize in app.json as described and implemented in this pr expo/expo#8842

Thank you.

[martppa]

I solved the issue changing the snapTo height which is the dynamicBottomSheetHeight

private initializeKeyboardConfiguration(): void {
        const screenHeight = Dimensions.get('screen').height;
        const defaultBottomSheetHeight = screenHeight * 0.70;
        if (Platform.OS === 'android') {
            Keyboard.addListener('keyboardDidShow', event => {
                const keyboardHeight = event.endCoordinates.height;                
                this.dynamicBottomSheetHeight = defaultBottomSheetHeight - keyboardHeight;
            });
            Keyboard.addListener('keyboardDidHide', event => {
                this.dynamicBottomSheetHeight = defaultBottomSheetHeight;
            });
        }
    }

[jbolotin]

Simple solution that worked well for me: instead of having a snapPoint at 0%, set it to -100%. Everything seems to work the same, but they keyboard issue is fixed

[PedroBern]

This worked for me on Expo SDK 39, in app.json:

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

[mayconmesquita]

I solved the issue changing the snapTo height which is the dynamicBottomSheetHeight

private initializeKeyboardConfiguration(): void {
        const screenHeight = Dimensions.get('screen').height;
        const defaultBottomSheetHeight = screenHeight * 0.70;
        if (Platform.OS === 'android') {
            Keyboard.addListener('keyboardDidShow', event => {
                const keyboardHeight = event.endCoordinates.height;                
                this.dynamicBottomSheetHeight = defaultBottomSheetHeight - keyboardHeight;
            });
            Keyboard.addListener('keyboardDidHide', event => {
                this.dynamicBottomSheetHeight = defaultBottomSheetHeight;
            });
        }
    }

Thank you! Its working!