Keyboard Avoiding View not working on both iOS and Android

[shridhar52war]

Describe the bug KeyboardAvodingView is not working for both platforms with TextInput

Dependencies:

• react-native-modalize-2.0.5
• react-native-0.61.5
• react-native-gesture-handler - 1.7.0

Sharing code snippet here:

<SafeAreaView style={{ flex: 1}}>
  <Button onClick={() => {
    modalizeRef.current.open();
  }}></Button>
  <Modalize
    ref={modalizeRef}
    snapPoint={300}
    panGestureComponentEnabled
    avoidKeyboardLikeIOS={true}
    HeaderComponent={
      <View style={{ padding: 30 }}>
        <Text>Header</Text>
      </View>
    }
  >
    <View
      style={{
        padding: 20,
      }}
    >
      <View style={{ paddingVertical: 20 }}>
        <TextInput placeholder="Write something here" />
      </View>
    </View>
  </Modalize>
</SafeAreaView>

[Cookizza]

I've got this working by using the keyboardAvoidingOffset prop.

I removed all height props and used keyboardAvoidingOffset={100}.

<Modalize
      disableScrollIfPossible
      adjustToContentHeight
      keyboardAvoidingOffset={100}
      scrollViewProps={{ keyboardShouldPersistTaps: 'handled' }}
    >

[ViniCleFer]

@shridhar52war try this, it worked for me

 <Modalize
    ref={modalizeRef}
    adjustToContentHeight
  >

[algokano]

@ViniCleFer did this work on android too?

[ViniCleFer]

@Sarvarr i don't remember, but try it and tell me, please.

I think yes.

[algokano]

@ViniCleFer when i enable adjustToContentHeight the content is not scrolling on android. disableScrollIfPossible={false} i added this line and it worked for me #219

[teuscm]

@shridhar52war try this, it worked for me

 <Modalize
    ref={modalizeRef}
    adjustToContentHeight
  >

That's not really fixing the problem. He's explicitly using snapPoint, which gets canceled by adjustToContentHeight, so I assume he wants the keyboard avoiding behavior by interacting with the text input while the modal is not fully opened (aka. on the snap point).

I can confirm that on iOS the keyboard avoiding is not working with snapPoint while using the flatlist renderer.

Adding adjustToContentHeight defeats the purpose of snapPoint while making the modal unscrollable at the moment.

Do we have any updates on this one @jeremybarbet ?

[manuelxaguilar]

Facing an issue with the keyboard avoiding view as well where the keyboard lands right on top of the list of results (as you can see my modal is opened at 65% of the screen from bottom to top). I have:

    <Modalize
      alwaysOpen={shouldStayOpen ? 100 : 0}
      handlePosition="inside"
      HeaderComponent={() => (
        <CustomHeaders handleCancel={handleForceClose} />
      )}
      keyboardAvoidingBehavior="padding"
      modalHeight={(Layout.window.height * 65) / 100}
      onClose={handleOnClose}
      onOpen={handleOnOpen}
      overlayStyle={modalizeStyle}
      ref={combinedRef}
      scrollViewProps={{
        scrollEnabled: currentStep < 2
      }}
    >
      {renderContent()}
    </Modalize>

[carissacks]

same issue. any update on this one?

[wdospinal]

Any update about this?

[mateuscesarglima]

@shridhar52war try this, it worked for me

 <Modalize
    ref={modalizeRef}
    adjustToContentHeight
  >

Worked for me! Thanks