React-native-modal: Modal animation is shaking when have a content aligned to bottom in IOS

[rodrigowpl]

Environment

System:
    OS: macOS 10.15.5
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
    Memory: 1.54 GB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.18.2 - /usr/local/bin/node
    Yarn: 1.22.4 - ~/.yarn/bin/yarn
    npm: 6.14.5 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.5, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK:
      API Levels: 23, 25, 26, 27, 28
      Build Tools: 23.0.1, 23.0.2, 25.0.0, 25.0.2, 25.0.3, 26.0.1, 26.0.2, 26.0.3, 27.0.3, 28.0.2, 28.0.3
      System Images: android-25 | Google APIs Intel x86 Atom, android-26 | Google APIs Intel x86 Atom_64, android-26 | Google Play Intel x86 Atom, android-27 | Google APIs Intel x86 Atom
  IDEs:
    Android Studio: 3.4 AI-183.6156.11.34.5522156
    Xcode: 11.5/11E608c - /usr/bin/xcodebuild
  npmPackages:
    react: ^16.12.0 => 16.13.1 
    react-native: ^0.61.5 => 0.61.5 
  npmGlobalPackages:
    react-native-cli: 2.0.1
    react-native-git-upgrade: 0.2.7

Platforms

IOS

Versions

• Android: -
• iOS: IPhone XR, 11 IOS 13>
• react-native-modal: 11.5.6
• react-native: 0.61.5
• react: 16.12.0

Description

Modal animation is shaking when having content align to bottom. Is basically the same as related here: https://github.com/facebook/react-native/issues/27049

Reproducible Demo

It happens when having a content align to bottom, it happens with this code:

  <Modal
    propagateSwipe
    isVisible={active}
    swipeDirection={['down']}
    hideModalContentWhileAnimating
    style={{
        justifyContent: 'flex-end',
        margin: 0
    }}
  >
    <Container>
         ...
    </Container>
  </Modal>

just that, if remove justifyContent: 'flex-end', it works normally, you can see a video regarding what's going on in the video in the issue that I've attached above

[akhilsanker]

Hi,
Facing the same
Any solution?

Thanks

[alexanderstrom]

Experienced the same issue. Used SafeAreaView inside the modal which was wrapped in a view with padding. Moved the padding down inside SafeAreaView solved it for me.

[nadav2051]

Figured a different solution, looks like the combination of justifyContent: flex-end and margin: 0 causes this behaviour.

Try replacing margin:0 with marginHorizontal: 0, marginTop: 0, and I suspect it will work. (Worked for me)