How to prevent react native modal from moving up when keyboard opens in android?

Question

I have a very basic modal component(using React-native-modal) which render its given child views. However, I dont want the behaviour similar to KeyBoardAvoiding view, i.e. I don't want the modal to be pushed up when keyboard opens.

  <Modal
    isVisible={isVisible}
    onBackdropPress={onCartDismiss}
    style={CartStyles.cartModal}
    onSwipeEnd={this.onCartDismiss}
    onSwipe={this.onCartDismiss}
    swipeDirection="down"
    swipeThreshold={200}
    propagateSwipe
    avoidKeyboard={false}
   >
    {this.props.children}
    ....

On ios it is working fine i.e. the keyboard opens over the modal component, but not on android. avoidKeyboard={false} is not working.

This is my style for the modal (position:'absolute' didn't work too)

  cartModal: {
    position: 'absolute',
    justifyContent: 'flex-end',
    bottom: 0,
    left: 0,
    right: 0,
    zIndex: 1,
  },

I have even tried changing softinputmode in android manifest to :

  android:windowSoftInputMode="adjustPan"

Depraved

Try giving {position: 'absolute'} in its style props! – Sleave

try using github.com/zubricky/react-native-android-keyboard-adjust to handle android windowSoftInputMode dynamically – Looker

Answer 1

<Modal
 isVisible={modalVisible}
 animationInTiming={500}
 animationOutTiming={1000}
 backdropTransitionInTiming={500}
 backdropTransitionOutTiming={1000}
 onBackdropPress={() => setModalVisible(!modalVisible)}
 onBackButtonPress={() => setModalVisible(!modalVisible)}
 style={{
   justifyContent: 'flex-end',
   margin: 0,
   position:'absolute'
 }}
 avoidKeyboard={false}
>

try this, it works for me.

Kindling

Answer 2

I'm working with the vanilla modal component and after searching a lot and testing all solutions, setting the property statusBarTranslucent={true} solves my problem. I just need to adapt my style a little bit after

Pantywaist

Answer 3

Set you model height as integer value without percentage.

 <Modal
            // style={{backgroundColor:'red'}}
            deviceHeight={screenHeight}
            deviceWidth={screenWidth}
            transparent={true} visible={isVisible} animated={false}>
<View style={{
                backgroundColor: 'rgba(0,0,0,.6)',
                flex: 1,
                alignItems: 'center',
                justifyContent: 'center'
            }}>
                <View style={{
                    flexDirection: 'row',
                    height: 200,
                    width: '80%',
                    alignSelf: 'center'
                }}>
{content}
           </View>
     </View>
</Modal>

Canthus

Answer 4

Give the main view inside your modal a "fixed height value" and the containing view should have a "100%" view height. Like this:

<Modal animationType={fade} ...>
  <View style={{
      height: "100%",
      width: "100%",
      alignItems: "center",
      // justifyContent: "center",
      backgroundColor: "rgba(0, 0, 0, 0.4)",
    }}>
    <View style={{
      borderRadius: 10,
      marginHorizontal: width * 0.05,
      marginTop: height * 0.1,
      width: width * 0.9
      height: height * 0.8
    }}>
      ...`enter code here`
    </View>
  </View>
</Modal>

I solved the issue by removing justifyContent: "center"

Dextrosinistral

Answer 5

A potential solution:

<Modal
      avoidKeyboard={avoidKeyboard}
      ...
      style={{
        ...
        ...(!avoidKeyboard && isAndroid && {position: 'absolute',paddingBottom:20}),
        height: screen.height,
      }}
      >
      {children}
    </Modal>

Absolutely positioning the item is a fix for android, and this solution absolutely positions the element only for Android alone while keeping iOS as is

Rogation