Modal Animation Issue: Brief Left-to-Bottom Transition on Android/iOS

[Shivangigupta01]

Environment

System:
OS: macOS 14.0
CPU: (8) arm64 Apple M1
Memory: 102.61 MB / 16.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 20.8.0
path: /opt/homebrew/bin/node
Yarn:
version: 1.22.19
path: /opt/homebrew/bin/yarn
npm:
version: 10.1.0
path: /opt/homebrew/bin/npm
Watchman:
version: 2023.10.02.00
path: /opt/homebrew/bin/watchman
Managers:
CocoaPods:
version: 1.13.0
path: /opt/homebrew/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 23.0
- iOS 17.0
- macOS 14.0
- tvOS 17.0
- watchOS 10.0
Android SDK: Not Found
IDEs:
Android Studio: 2022.3 AI-223.8836.35.2231.10811636
Xcode:
version: 15.0.1/15A507
path: /usr/bin/xcodebuild
Languages:
Java:
version: 11.0.20.1
path: /usr/bin/javac
Ruby:
version: 2.6.10
path: /usr/bin/ruby
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.72.6
wanted: 0.72.6
react-native-macos: Not Found
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: true
newArchEnabled: true
iOS:
hermesEnabled: true
newArchEnabled: true

Platforms

The problem persists on both Android and iOS devices and can be reproduced on both simulators/emulators and actual devices.

Versions

• Android: 14
• iOS: iOS 17.0
• react-native-modal: 13.0.1
• react-native:0.72.6
• react:18.2.0

Description

I'm utilising the react-native-modal library in my project to customize and display modals within the app. Currently, I'm facing an issue where, upon attempting to open the modal, it initially appears from the left side of the device and then, within a fraction of a second, pops up from the bottom of the screen, which is the expected behavior. However, the brief appearance from the left side adversely affects the user experience. I have attached a screen recording below for reference. It's worth noting that I've enabled the new architecture in the app and migrated to the latest version of React Native, and it's after this update that I've encountered this issue.

Reproducible Demo

I have mentioned a basic code snippet to reproduce the issue in the below mentioned code snippet.

Screen.Recording.2023-11-20.at.5.37.15.PM.mov

https://snack.expo.dev/8XcNsPEd3

[rabbitmouse]

i have same problem....Do we have to wait for react-native to fix this problem now?

[SumitSharmaJii]

Try passing overflow:'hidden' in style of Modal

<Modal isVisible={isModalVisible} style={{overflow:'hidden'}}>