Bottom Sheet moves up along with Keyboard in Android and not iOS

shubh007-dev commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

shubh007-dev commented 4 years ago

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

karimcambridge commented 4 years ago

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

gabimoncha commented 4 years ago

@shubh007-dev your solution worked for me too

karimcambridge commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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} />

)

export default Screen

yzalvov commented 4 years ago

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 commented 4 years ago

That should work.

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

yzalvov commented 4 years ago

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

karimcambridge commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

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

mayconmesquita commented 3 years ago

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!

Alix-stack commented 3 years ago

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

yes it's works in android but not working in ios

ansarikhurshid786 commented 3 years ago

there is no issue in ios and in android android:windowSoftInputMode="adjustPan" works

osdnk / react-native-reanimated-bottom-sheet