Post-Migration Issues with Rendering Inconsistencies and Modal-Related Screen Freezes

I am encountering some issues with my React Native project after migrating from version 0.63.3 to 0.64.2. I migrated the project to add support for react-native-vision-camera. However, I am now facing problems related to modal functionality and rendering inconsistencies. I would like to provide more details on the issues I am experiencing and seek assistance in resolving them.

Similiar issue Found on gitHub : https://github.com/facebook/react-native/issues/28567#issue-597106062

Issue Description:

Opening and closing a modal by touching the backdrop or using the hardware back press causes the screen to freeze. I have to reopen the app to restore functionality.
The error is observed in both iOS simulators and physical devices on my Mac during the development phase.
Notably, the issue does not occur when I debug the app using the Chrome debugger or when I release the app to TestFlight and test it from there.
However, after a few test releases, the problem started occurring in the release build as well, making it a blocker issue.

Additional Observations:

1.Occasionally, I noticed memory leak logs, but it is unclear if they are directly related to the current issues.

2.Another problem I encountered is with tab switching within the landing screen. When I switch back to a previous screen, the re-rendering does not work, and the screen appears blank. Reopening the app is required to resolve this issue.

Investigation Findings:

1.Upon inspecting the code, I found that concatenating an array and setting the updated list to the state for displaying pagination data items was causing issues. This function worked fine during the initial rendering, but switching to another tab after rendering the affected tab resulted in a white screen. As a temporary workaround, I commented out the concatenation code and set the state to the new data array only.

this.setState({
  myArray: [...this.state.myArray, ...newDataArray], // this function was working fine in pre migration app.
})

this.setState({
  myArray: newDataArray, // Temporary fix to make the app work
})

2.I also discovered that conditionally rendering a component using a ternary operation caused re-rendering issues. The problematic code looked like this:

{this.state.isLoading ? <View></View> : <View></View>}

Changing it to the following temporary fix resolved the rendering issue:
{this.state.isLoading && <View></View>}

Note:

1.Both of these issues are not due to code errors, as they were working fine before the React Native migration. 2.The problems only started appearing after the migration, and the temporary fixes described above were applied to ensure the app functions without blockers.

facebook / react-native