CODEWITHSUNDEEP
androidreact-nativeuser-interfacedevicefreeze
MandelDuck
MandelDuck

Reputation: 461

React Native UI freeze on device android

I'm new to react native dev but I have an issue, my app calls some native modules and updates the UI based on the response from these modules, however after some time the UI freezes, I cannot change tabs or press buttons etc

It works fine on the emulator, it only happens when I install to device

Is this a common issue in react? anything I should look at? perhaps i'm making some common mistake

Thanks

Upvotes: 0

Views: 3940

Answers (2)

CrackerKSR
CrackerKSR

Reputation: 1907

I faced a similar problem and resolved it after extensive debugging.

I have a native module that performs heavy computation, which may take a few seconds. I wanted to display a waiting indicator until the task is done. For that, I used state (i.e., [wait, setWait]). So, before calling native methods, I set the wait state, and this caused the issue.

I was invoking that native module in onPress. I tried many ways to avoid the UI freezing of the Button.

Solution 1: Using setTimeout, I placed the code for invoking native methods inside setTimeout and set the time to 0.

  const onPress = () => {
    
    setWaitForSubmit(true);
    setTimeout(() => {
      handleSubmit().then(() => {
        setWaitForSubmit(false);
      });  
    }, 0);

  }

Solution 2: Using useEffect, I checked if wait is true, then called the native methods. This also solved the issue.

  useEffect(() => {
    if (waitForSubmit) {
      handleSubmit().then(() => {
        setWaitForSubmit(false);
      });  
    }
  }, [waitForSubmit]);

  const onPres = () => waitForSubmit(true)

Solution 3: You can also try: https://github.com/devfd/react-native-workers

Upvotes: 0

MobileDev
MobileDev

Reputation: 171

First I would like to describe the similar problem I faced in my React Native (v0.63.2) and solution to fix the problem.

Problem:

I had a simple React Native application with Scroll View as the main view and lot of other sub views containing buttons, Text etc. In the componentDidMount(), I was performing most of the native module calls and setting the state for each API call. So after sometime after getting the data, the UI elements begins to freeze and I am no longer able to click the buttons but able to scroll in the view. The scroll view works because it lives on the main thread. For more info on Scroll View performance, refer ScrollView-Performance.

Solution:

After thorough debugging using the native debugger in Android Studio, there were multiple threads being created in the native modules java side in the @ReactMethod and there was a heavy overhead on main thread, looks like the main JS thread becomes slow when updating the UI frame and breaks at some point and thereby resulting in UI freeze.

Thanks to V8 runtime, I was able to use an open source package called react-native-v8, which is easier to integrate V8 runtime into the React Native application. Currently this package supports only for Android.

V8 JS engine runs the tasks in background concurrently and therefore making any UI overhead tasks (calls from my native module in my case) execute in the background. This made my application smooth and there wasn't any UI freeze.

Thanks.

Upvotes: 5

Related Questions