backdrop opacity sometimes seems to flicker at full opacity

[megantaylor]

Description

Using react-native-modal for a modal component with a backdropColor of #1d2441 and a backdropOpacity of 0.2. A button in the modal starts an expo sendSMSAsync action. During the transition to/from the SMS app, the backdrop of the modal is briefly displayed with (what looks like) full opacity.

Potential Solution?

I replaced every instance of this.backdropRef.transitionTo in modal.js with this.backdropRef.transition and passed in {opacity: this.props.backdropOpacity} as the fromValues. This seemed to fix my problem, but I'm not 100% sure it doesn't also create new ones. So far, in testing, it's been good.

Environment

System:
OS: macOS 12.6.2
CPU: (8) x64 Intel(R) Core(TM) i7-1068NG7 CPU @ 2.30GHz
Memory: 199.63 MB / 32.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 16.10.0 - /var/folders/1d/q81r_4ns49s0ydl_w32ygtp00000gn/T/yarn--1675268313113-0.9465853772770727/node
Yarn: 1.22.17 - /var/folders/1d/q81r_4ns49s0ydl_w32ygtp00000gn/T/yarn--1675268313113-0.9465853772770727/yarn
npm: 7.24.0 - /usr/local/bin/npm
Watchman: Not Found
Managers:
CocoaPods: 1.11.2 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1
Android SDK: Not Found
IDEs:
Android Studio: 2020.3 AI-203.7717.56.2031.7935034
Xcode: 14.2/14C18 - /usr/bin/xcodebuild
Languages:
Java: 16.0.1 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 18.1.0 => 18.1.0
react-native: 0.70.5 => 0.70.5
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Platforms

Both Android and iOS

Versions

• Android: 13
• iOS: 16
• react-native-modal: 13.0.1
• react-native: 0.70.5
• react: 18.1.0

[megantaylor]

update: this seems to be working pretty well on android, but still getting a brief flash of the solid bg color on iOS. continuing to dig into it.

[megantaylor]

final solution handles both ios and android: patch with transition changes mentioned above, plus modified backdrop props:

backdropColor={color.baseOpacity20}
backdropOpacity={1}

instead of

backdropColor={color.base}
backdropOpacity={0.2}

[rviramotnes001]

@megantaylor did you find out a solution for IOS on the issue when Modal closes there is a flicker?

[ngochituong]

add this
backdropTransitionOutTiming={0}

[finnmerlett]

add this backdropTransitionOutTiming={0}

Oh damn! This totally fixed the backdrop flicker on modal dismiss issue I was having on android 😲 I wasn't using any custom backdrop or background color either, just the default. Man I can't tell you how much of a difference no flicker makes. So smooth, so professional.