React native Keyboard pushes Bottomsheet out of screen / to top

user_12900361 0
Viewed 6606

I am struggling with this issue now for over three weeks. I am using the package osdnk/react-native-reanimated-bottom-sheet and I want to use textinputs inside the bottomsheet. The problem appears when opening the keyboard. The bottomsheet is pushed out of the screen.

There is already a github issue about this but everyone seems to get the problem solved. Except me? Also no one answers my questions there.

Steps I tried:

  • Android.xml: android:windowSoftInputMode="adjustPan"I am using expo and don't want to escape, so please don't provide solutions with the Android.xml file.
  • Replaced all flex:1 with height:100%
  • I tried different variations with wrapping the whole Bottomsheet / Content
  • Tried to create a 3rd snapping point with 100% and snap to this point as soon as an Inputfield is focused. However, this also results in the bottom sheet beeing out of the screen.
  • On IOS its working fine.

My code looks like the following: (simplyfied)

const renderInner = () => (
    <View>
        <FormTextInput/>
    </View>)

return (
<BottomSheet
        snapPoints={['100%']}
        renderContent={renderInner}
        renderHeader={renderHeader}
        initialSnap={0}
    />
)

How can I fix this weird behaviour? Please provide an example. Its enough to just use an example provided inside the git-repo, clear everything inside the bottom sheet and add a simple text-input.

enter image description here

SOLUTION

Your BottomSheet parent container should have the device screen height instead of height: 100%. There is no need for the android:windowSoftInputMode="adjustPan".

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

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


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

export default Screen
bottom-sheet react-native android
1 Answers

android:windowSoftInputMode already available in EXPO

Referance

you have to Wrap BottomSheet into View with full height like this

import React, { Component } from "react";
import { Text,TextInput, StyleSheet, View, Dimensions } from "react-native";
import BottomSheet from "reanimated-bottom-sheet";
const height = Dimensions.get("window").height;
export default class App extends Component {
  renderInner = () => (
    <View style={{ height: height,backgroundColor:"#eee00e"}}>
    <Text>This is Bottomsheet</Text>
      <TextInput style={{ backgroundColor: "blue",color:"#FFFFFF",marginTop:30 }} />
    </View>
  );
  render() {
    return (
      <View style={{ height: height,backgroundColor:"red"}}>
      <BottomSheet
        snapPoints={["60%"]}
        renderContent={this.renderInner}
        // renderHeader={renderHeader}
        initialSnap={0}
      />
      </View>
    );
  }
}

const styles = StyleSheet.create({});

enter image description here

user_80798680
Related