Crash on `react-native@0.66`

malzaid0 commented 2 years ago

Environment

System: OS: macOS 11.6 CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz Memory: 56.37 MB / 8.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 16.10.0 - /usr/local/bin/node Yarn: 1.22.11 - /usr/local/bin/yarn npm: 7.24.0 - /usr/local/bin/npm Watchman: 2021.09.13.00 - /usr/local/bin/watchman Managers: CocoaPods: 1.11.2 - /usr/local/bin/pod SDKs: iOS SDK: Platforms: iOS 15.0, DriverKit 20.4, macOS 11.3, tvOS 15.0, watchOS 8.0 Android SDK: Not Found IDEs: Android Studio: Not Found Xcode: 13.0/13A233 - /usr/bin/xcodebuild Languages: Java: Not Found npmPackages: @react-native-community/cli: Not Found react: 17.0.2 => 17.0.2 react-native: 0.65.1 => 0.65.1 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

Platforms

iOS

Versions

Android: n/a
iOS: 15.0
react-native-modal-datetime-picker: "^11.0.0"
react-native-community/datetimepicker: "^3.5.2"
react-native: "0.65.1"
react: "17.0.2"

Description

The modal opens normally and everything works great, but when I close the modal everything freezes, and the app stops responding to any press. It doesn't matter in what way I close the modal. I tried confirm, cancel, and pressing on the backdrop, they all have the same result. I tried changing some of the props, but it didn't fix the issue.

Even the quick reload wouldn't solve the issue and make the app work and response to pressing again. The only way to make the app work again is by completely closing the app from the background and reopening it again.

And yes I tried different iOS simulators and they all acted the same.

Reproducible Demo

import React, { useState } from 'react';
import { View, Text, TouchableWithoutFeedback } from 'react-native';
import DateTimePickerModal from 'react-native-modal-datetime-picker';

const MyComponent = () => {
  const [dateOpen, setDateOpen] = useState(false);

  return (
  <View>
    <TouchableWithoutFeedback onPress={() => setDateOpen(true)}>
      <View>
        <Text>Select</Text>
      </View>
    </TouchableWithoutFeedback>

    <DateTimePickerModal
      isVisible={dateOpen}
      mode="date"
      onConfirm={() => setDateOpen(false)}
      onCancel={() => setDateOpen(false)}
    />
  </View>
  )
}

mmazzarolo commented 2 years ago

Hi. Your code is working fine for me. I've seen cases of the app freezing in developer mode in the past because of the Modal component (which we're using in react-native-modal-datetime-picker). Could you check if everything works fine in production mode?

malzaid0 commented 2 years ago

I just tried running the app using this command

npx react-native run-ios --configuration Release

but it didn't fix the problem

mmazzarolo commented 2 years ago

Yeah, that's the right command. No idea what is happening, everything is working fine on my side. I'll keep the issue open to see if anyone else is experiencing the same issue.

fitted-dan commented 2 years ago

This also happening to me on a real device. Here is my configuration:

react-native-modal-datetime-picker v11.0.0
iPhone 7 Plus with iOS 14.7.1
React-Native 0.66.0
My app was compiles in Ad-Hoc and uploaded to Firebase App Distribution for QA testing. I didn't notice the freezing while in Debug mode.

mmazzarolo commented 2 years ago

I think it's related to https://github.com/facebook/react-native/issues/32329

jonra1993 commented 2 years ago

Hello, @malzaid0 @fitted-dan I am facing a similar bug on my app. I tested on simulators and real devices this happens only on iOS devices. Did you were able to find a solution??

These are my packages.

react-native-modal-datetime-picker v12.0.0 React-Native 0.66.1

mmazzarolo commented 2 years ago

danielmark0116 commented 1 year ago

Hi, just writing a small FIY for anyone having a similar issue with modals freezing (it was a freeze in my case, not a crash) the app on iOS.

In my case it was happening only on release type of builds.

What was causing the issue was the animated bar component (simple line that was being animated over time). Basically the bar was representing a countdown and the modal could be opened during the animation.

The line had width property animated with reanimated (v2). After changing the animation to target translateX in place of width, the problem disappeared :)

mmazzarolo / react-native-modal-datetime-picker