Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Modal animation is shaking when have a content aligned to bottom in IOS

See original GitHub issue

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

Issue Analytics

State:
Created 3 years ago
Reactions:8
Comments:5

Top GitHub Comments

6reactions

alexanderstromcommented, Oct 20, 2020

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.

2reactions

lfoliveir4commented, May 20, 2021

@rodrigowpl <SafeAreaView style={{ flex: 1 }}> work for me!

Top Results From Across the Web

Modal animation is shaking when have a content aligned to ...

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

Content Jumping (and How To Avoid It) | CSS-Tricks

Few things are as annoying on the web as having the page layout unexpectedly change or shift while you're trying to view or...

Align To behavior in Motion - Apple Support

Ignore Sequencing: A checkbox that instructs the Align To behavior to ignore any source object animation created by a text sequence behavior. Note:...

Background image jumps when address bar hides iOS ...

It does mean we don't get to see the bottom 60px of the background image when the URL bar is present, but it...

Building a Shake Animation - Swift Talk - objc.io

But we don't have a reference to the rectangle in SwiftUI, because SwiftUI View s are simple structs that don't have a direct...