Modal animations jitter on iPhone X and 11

If you’re using a modal that takes up part of the screen and animating it in (as in, sliding up from the bottom) then it will occasionally “jitter” (move around and appear to be vibrating) which makes it impossible to hit a tap target cleanly and is clearly just a poor UX all round.

I’ve been able to repro this on iPhone X and iPhone 11 on the simulator and physical devices.

React Native version: 0.61.2

info Fetching system and libraries information...
System:
    OS: macOS 10.15
    CPU: (4) x64 Intel(R) Core(TM) i5-8210Y CPU @ 1.60GHz
    Memory: 377.91 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 10.15.3 - /usr/local/bin/node
    Yarn: 1.16.0 - /usr/local/bin/yarn
    npm: 6.4.1 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.0, DriverKit 19.0, macOS 10.15, tvOS 13.0, watchOS 6.0
    Android SDK:
      API Levels: 26, 27, 28, 29
      Build Tools: 27.0.3, 28.0.3
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.5900203
    Xcode: 11.0/11A420a - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0
    react-native: 0.61.2 => 0.61.2
  npmGlobalPackages:
    react-native-cli: 2.0.1
    react-native-create-library: 3.1.2
    react-native-git-upgrade: 0.2.7

Steps To Reproduce

1. Open a modal that slides in from the bottom
2. Observe that it will jitter around

Describe what you expected to happen: Modal animates up from the bottom cleanly and stops moving.

Snack, code example, screenshot, or link to a repository:

import RNCModal from 'react-native-modal';
export default class SimpleModal extends React.Component<SimpleModalProps> {

  render(): React.ReactNode {
    return <RNCModal
      useNativeDriver={false}
      hideModalContentWhileAnimating={true}
      style={{justifyContent: 'flex-end', margin: 0}}
      isVisible={this.props.visible}>
      <View style={{backgroundColor: Styles.colors.white, margin: 0, borderTopLeftRadius: 16, borderTopRightRadius: 16}}>
        {this.props.children}
      </View>
    </RNCModal>
  }

}

I know this is a third party library, but it’s just a wrapper around the Modal component under the hood, and this is clearly a problem with react-native, since you can see this happening on yellow box modals too:

Would love help fixing this!

Cheers.

[janvdt]

any solution to this? i have the same problem

[jakebloom]

@jsartisan we ended up redesigning our UI to avoid this problem. Given how prevalent the ‘sheet’ component of SwiftUI is, this will hopefully get fixed soon