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 gets stuck visible when rendered in Storybook on iOS

See original GitHub issue

(works fine with default RN modal)

Environment

System:
    OS: macOS 11.4
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 25.61 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 14.16.0 - ~/.nvm/versions/node/v14.16.0/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v14.16.0/bin/yarn
    npm: 6.14.11 - ~/.nvm/versions/node/v14.16.0/bin/npm
    Watchman: 2021.06.07.00 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.10.1 - /Users/brian/.rbenv/shims/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 14.5, DriverKit 20.4, macOS 11.3, tvOS 14.5, watchOS 7.4
    Android SDK:
      API Levels: 23, 28, 29, 30
      Build Tools: 29.0.2, 30.0.3
      System Images: android-30 | Google APIs Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.2 AI-202.7660.26.42.7351085
    Xcode: 12.5.1/12E507 - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_292 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.1 => 17.0.1
    react-native: 0.64.2 => 0.64.2
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Platforms

iOS

Versions

iOS: 14.5
react-native-modal: 12.0.2
react-native: 0.65.2
react: 17.0.1

Description

This seems similar to an issue I’ve had with this library (and the RN Modal for years now) - It seems like it can often cause soft locks, especially when other native views are involved. BUT, I don’t think that is the case here. I’m not totally sure what storybook does under the hood, but seems to break this and not the Modal component in react native

Reproducible Demo

I will see if I can get to this 😃

Issue Analytics

State:
Created 2 years ago
Reactions:1
Comments:7

Top GitHub Comments

3reactions

Artem-Kalugincommented, Aug 29, 2022

For anyone else who is still facing this issue I was able to workaround this in stories using key prop with isVisible state as value <Modal isVisible={modalShown} key={modalShown}>{content}</Modal

1reaction

Artem-Kalugincommented, Nov 10, 2022

For anyone else who is still facing this issue I was able to workaround this in stories using key prop with isVisible state as value <Modal isVisible={modalShown} key={modalShown}>{content}</Modal

Hey @Artem-Kalugin, this fixes the issue. But any idea why ? 🤔

Its just triggers additional rerender while changing visibility. Seems that this disables optimizations that lib uses under the hood. Also it’s disables animations too. So don’t use it directly inside your components, use it in stories instead.