Currently I am working on a app which does a lot of background tasks due to which JS thread is blocked for long time. Now currently I am using react-navigation/native-stack and react-navigation/bottom-tabs for navigation. When the JS thread is blocked I am not able to switch between tabs quickly and it takes 5 to 10 seconds to do it. This happens because react-navigation lib base code works on JS thread. If I use react-native-navigation library will it solve my issue? Does all the UI interactions in react-native-navigation library work on Main thread? If the JS thread is blocked will react-native-navigation work properly? I would really appreciate your guidance.
These are the libraries i am using currently:
react-navigation/bottom-tabs
react-navigation/native
react-navigation/native-stack
2
Answers
React Native Navigation (RNN) primarily operates on the main thread of the application. This means that UI-related tasks, such as navigation transitions and screen updates, are handled on the main thread. However, RNN also uses a JavaScript bridge to communicate with the JavaScript code running in a separate thread, commonly known as the JS thread.
If the JS thread is blocked, it can cause issues with React Native applications, including React Native Navigation. When the JS thread is blocked, JavaScript execution halts, which can lead to unresponsive UI, delayed updates, and potentially navigation issues in React Native apps, including RNN.
To ensure smooth functioning of React Native Navigation and other parts of a React Native app, it’s crucial to avoid blocking the JS thread. This can be achieved by optimizing JavaScript code, using asynchronous operations where appropriate, and offloading heavy computational tasks to separate threads or native modules.
Yes,
It will work while JS thread is blocked.