Modal jumps when keyboard is opening

[deiucanta]

When I focus on a text input inside a modal, you can see the keyboard pushing the modal and then the modal gets resized. That delay makes for an unpleasing user experience.

It happens on Android.

[whereiscode]

me too ,but iOS is not

[vforvasile]

try building your app again with this line in AndroidManifest: android:windowSoftInputMode="adjustResize"

[jeremybarbet]

Hi,

I've been able to find a way to not make it jump. I defined android:windowSoftInputMode="adjustResize|adjustPan". Let me know if it works for you.

Edit: it's half a solution. The scrollview is not scrolled anymore..

Edit 2: Well looks like both adjustResize|adjustPan together don't fire keyboard events anymore. Will have to look more into it

Edit 3: adjustNothing would probably be the best solution. Even though, none of the keyboards events are fired, so I don't know when the keyboard is shown to be able to scroll to the focused input.

[moxorama]

Maybe better solution is to remove all keyboard-related stuff from modalize and allow users to listen to keyboard events and set padding/height properties via Modalize props?

[jeremybarbet]

@moxorama I don't think so. Is there not only one way to handle the keyboard in Modalize context? I mean, if an input is defined in the footer then the keyboard has to move up when the keyboard show, right? and if multiple inputs are defined inside the children, then it should scroll when changing the focus, isn't it?

I'm scared by doing so, user has to deal with complicated stuff and has to do the same over and over for every new user.

Even though, we could have a props that disable all keyboard-related stuff and remove KeyboardAvoidingView components and replace with a simple View. I'm not sure if it would be ideal.

But if no keyboard stuff was shipped with Modalize, how would you do it? Maybe your solution could just replace the actual implementation. Another point of view on a code solution could help us fix that!

[jeremybarbet]

cc/ @xxsnakerxx maybe you have an idea about that since you work quite a bit on these behaviours

[xxsnakerxx]

Hm, it seems the keyboadShow event fires too late (after layout redraw). For Android, I would try to listen to height of the window via Dimensions (maybe it fires earlier) but I'm not sure

[jeremybarbet]

I gave it a try but the Dimensions listeners are not triggered at all. :/

[GollyJer]

Have you guys run into any other ideas? This makes the UX pretty unprofessional for an app. I'm running into this at the end of a project and am now dreading having to replace all the Modalize components. 😭

[Un3qual]

Any update on this? I have this issue on iOS as well

[Fortidude]

No iOS issue here, but android is pretty ugly because of that. I wish sometimes for similar keyboard behaviour like iOS have, with all the events ;)

[ArthurPedroti]

This modal is really awesome, but this behavior cost a lot for UX :/

[kalleriakronos24]

up, still looking for the fix :/

[OmgDef]

It's a known issue of KeyboardAvoidingView. Adding flex: 1 to modalStyle helps

[alexandermirzoyan]

Dear @OmgDef, I have tried with flex: 1 it resolved that issue for not pushing the screen when the keyboard is opened but now I have another issue my modal's height is not that much as I wanted.

[aprilmintacpineda]

It's a known issue of KeyboardAvoidingView. Adding flex: 1 to modalStyle helps

Doing this will partly prevent the jumping, BUT it still jumps, in this case when you open the keyboard, the modali jumps all the way to the top and then stays there until you close the keyboard again, I fixed it by doing:

<Modalize
  ref={modalizeRef}
- modalTopOffset={80}
+ modalStyle={{ flex: 1, marginTop: 80 }}
>

[b3hz4d]

It's a known issue of KeyboardAvoidingView. Adding flex: 1 to modalStyle helps

This will fix it, But now the problem is using adjustToContentHeight is not working with modalStyle={{ flex: 1 }} and the content is full always

[uffou]

I have a keyboard and focused input in the modal + I am using snapPoint and modalHeight to switch between 2 heights thus can't use the marginTop + flex:1 fix :(

[alexandermirzoyan]

I have a keyboard and focused input in the modal + I am using snapPoint and modalHeight to switch between 2 heights thus can't use the marginTop + flex:1 fix :(

Can you send a code snippet, please?

[KarthikMandava]

I'm facing the same issue in iOS when I set adjustToContentHeight and use text input, the view gets bounced when the keyboard opens. If I remove adjustToContentHeight the view gets the entire page but my content is half of the page only, which needs to look like a popup from the bottom. Any workaround to fix this behavior?

[mmkhmk]

I'm facing the same issue. Adding flex: 1 to modalStyle solved the jumping issue, but still modal moves up with keyboard height when keyboard is opening. It happens only in Android. Any workaround?

[bryan229]

this solution works for me. https://github.com/react-native-modal/react-native-modal/issues/344#issuecomment-1061127501

[adriano-rodrigues99]

this solution works for me with adjustToContentHeight. avoidKeyboardLikeIOS={Platform.select({ios: true, android: true})} https://jeremybarbet.github.io/react-native-modalize/#/PROPS?id=avoidkeyboardlikeios

[AlexLacoste]

adjustToContentHeight={true}
modalStyle={[
          { flex: 1 },
          Platform.OS.includes('android') && { marginTop: 52 + insets.top },
        ]}
modalTopOffset={Platform.OS.includes('ios') ? 52 : undefined}

[mmkhmk]

statusBarTranslucent didn't solve my problem. Any solutions without adjustToContentHeight?

[Spice-Z]

This works for me ! https://github.com/jeremybarbet/react-native-modalize/issues/132#issuecomment-875458935

For modalHeight setting case:

// It's useful to define modalHeight before component props.
const modalHeight = 600

...

<Modalize
  ref={modalizeRef}
  modalHeight={modalHeight}
  modalStyle={{ flex: 1, marginTop: Dimensions.get('window').height - 600 }}
>

[Energieman]

I managed the following solution eventually

<Modalize

        ref={modalizeRef}
        withHandle={false}
        panGestureEnabled={false}
        rootStyle={{backgroundColor: '#fff'}}
        modalStyle={{flex: 1, marginTop: 80}}
        onOpened={onSearchModalShow}
      >
    {/*Content Here*/}</Modalize>

[kmsayem12]

It's a known issue of KeyboardAvoidingView. Adding flex: 1 to modalStyle helps

Doing this will partly prevent the jumping, BUT it still jumps, in this case when you open the keyboard, the modali jumps all the way to the top and then stays there until you close the keyboard again, I fixed it by doing:

<Modalize
  ref={modalizeRef}
- modalTopOffset={80}
+ modalStyle={{ flex: 1, marginTop: 80 }}
>

Lovely ❤️ ❤️. @aprilmintacpineda Thank you

[Aszurar]

This works for me ! #132 (comment)

For modalHeight setting case:

// It's useful to define modalHeight before component props.
const modalHeight = 600

...

<Modalize
  ref={modalizeRef}
  modalHeight={modalHeight}
  modalStyle={{ flex: 1, marginTop: Dimensions.get('window').height - 600 }}
>

thanks so muchhhhh, this work for me.

my code:

type behaviorType = 'height' | 'padding' | 'position' | undefined;
const MODAL_HEIGHT = Dimensions.get('window').height * 0.8;

  
const IOS_KEYBOARD_AVOIDING_VIEW_CONFIG = {
  behavior: 'padding' as behaviorType,
  keyboardVerticalOffset: 100,
  avoidKeyboardLikeIOS: true,
};

const ANDROID_KEYBOARD_AVOIDING_VIEW_CONFIG = {
  behavior: 'height' as behaviorType,
  keyboardVerticalOffset: 0,
  avoidKeyboardLikeIOS: true,
};


const KEYBOARDING_AVOIDING_VIEW_CONFIG = {
  ios: IOS_KEYBOARD_AVOIDING_VIEW_CONFIG,
  android: ANDROID_KEYBOARD_AVOIDING_VIEW_CONFIG,
};


  const platform = Platform.OS;
  const keyboardAvoidingViewConfig = KEYBOARDING_AVOIDING_VIEW_CONFIG[platform];

  return (
   <Modalize
      ref={outerRef}
      avoidKeyboardLikeIOS={keyboardAvoidingViewConfig.avoidKeyboardLikeIOS}
      keyboardAvoidingBehavior={keyboardAvoidingViewConfig.behavior}
      modalHeight={MODAL_HEIGHT}
      modalStyle={{
        flex: 1,
        marginTop: Dimensions.get('window').height - MODAL_HEIGHT,
      }}
      scrollViewProps={{
        keyboardShouldPersistTaps: 'handled',
      }}
`