How to debug react native app without internet? - react-native

As far as I know, build React Native projects have to boot up Node server.
I want to create offline mode with my app.
How can I achieve this?

Currently, if you want to run an app offline, it can be resolved through settings. But if you want to debug, there are currently no modules that have been developed for offline debugging.
The link are currently available for debugging. But you have to have an Internet connection.

Related

React Native CLI Setup for both IOS and android

I am trying to start a react native project using the React Native CLI method (https://reactnative.dev/docs/environment-setup). My first question is, if I have a mac and my friend has a windows computer can we both work on the same app? Also, how do I configure one single code base for both ios and android? Do I just follow the installation instructions for both in a single project? Thanks!
Yes, you can work separately on windows and mac for the same app and you don't have to configure any kind of codebase as react native is hybrid app development technology, you just have to write a single code for both the android and ios platforms.
To install react native CLI just follow the official document on your specific platforms because both of them have a slight difference in the installation process, after successful installation, I would suggest you to use some kind of VCS(Version controlling system) like git or svn.
I am also working in the same process as you have described I am developing in windows and my friend is working on the mac.
feel free to contact me I will help you if you have any kind of queries

How do I choose a default React Native debugging tool when I `Open the Dev Tools`

I am using both the Flipper and React Native Debugger on a React Native project.
I find JavaScript logging by React Native Debugger to be much richer given JSON formatting than Flipper (logs dumped as serialized strings). I however love the additional log tooling(especially for native logs) that Flipper provides.
Is it possible to setup choose the default Dev tool?
Opening the dev tools on the iOS simulator, all logs open with Flipper even if it was quit and the React Native Debugger was already open.
I have tried to configure a different port listened to by the debugger and dev tools but a flipper is still given the lead.
Has anyone tried to you both successfully?
Not tried but seems like this article can help you out:
Medium
Already given on React-Native official doc to setup default debugging tool.
If nothing messed up with your local setting then simple disabling can help.

How can I debug JS remotely when using React Native Firebase

So I have a React Native app based on react-native-firebase-starter that I'd like to debug using better tools than just console.log output via react-native log-android. Debugger breakpoints, object inspection etc.
For a standard React Native app, this would be possible using the "Debug JS remotely" option which, as I understand it, runs the app's JS inside desktop Chrome and hence can use it's dev tools.
This does not seem to work for React Native Firebase however. I presume this is because it uses a lot of native Android/iOS modules along with mobile-only Firebase auth, and thus is only happy running entirely on the device. ...or something like that.
Am I doing something wrong or is there a way round this? What debugging setup will give me the best DX here?
The example project react-native-firebase-starter is natively built (as opposed to being created with Expo) and will therefore work as expected with the debugging tools you have mentioned.
Make sure when running the app the build variant Debug is selected, as in Release mode Metro Bundler / Packager and the debugging tools are not available.
If the debugging level via Chrome Dev Tools does not suffice, there are other tools created for React Native with better functionality (such as breakpointing). The most notable ones are:
React Native Tools extension for Visual Studio Code. Allows setting breakpoints and iterating through code in the editor.
React Native Debugger, which has a similar interface to Chrome Dev Tools and allows breakpoints to be set in the Sources tab.
Up-to-date installation instructions and configuration are provided in their respective repositories.

Does Expo required a internet connection for React native build?

So I just finish the project, detached, using expoKit. Uploaded it to the testflight. And it pops out an error message said:"This experience uses an unsupported version of Expo(v22.0.0)..." So I re-publish my project in Expo XDE and the error message gone.
Now I am just confused, dose expoKit require a user to have an internet connection to use the app in order to download data from expo server?
What does expo really do?
you need to clear cache and storage in setting in emulator for expo.
in ur emulator go to settings/apps/expo/storage/clear...
it will work right now.
br
Yes, expo required internet connection, it will generate link and you need to open it in your device to see output
from it's doc
Expo apps are React Native apps which contain the Expo SDK. The SDK is a native-and-JS library which provides access to the device's system functionality (things like the camera, contacts, local storage, and other hardware). That means you don't need to use Xcode or Android Studio, or write any native code, and it also makes your pure-JS project very portable because it can run in any native environment containing the Expo SDK.
for more please see https://docs.expo.io/versions/latest/ and https://docs.expo.io/versions/latest/guides/up-and-running.html

React native takes very long to load on device

I've been developing a react-native app using the simulator for a while. On the simulator (iOS), the app loads very fast (on reload for eg). However, when I tried to load the app to the device, it spends between 1-3 minutes in the splash screen before loading into the app.
My project is fairly small, and has no extra resources other than the javascript. Looking at the documentation I couldn't find what might be the cause of the issue, though I suspect it has to do with the fact that it is not getting the JS from the packager local server.
What am I doing wrong?
(btw - react-native v0.31)
I ran into the same issue and discovered that it was because I was running my app on device in development mode. To get the performance you're looking for, you'll need to build and run the app in production or "release" mode. You can do this by passing in a --configuration option and setting it to Release using the React Native CLI:
$ react-native run-ios --configuration Release
If that doesn't do the trick, then you may need to build your app in "Release" mode from Xcode. To do that, navigate to your projects /ios directory and open the .xcodeproj file in Xcode. Choose your build target in the Toolbar. Scroll to the bottom and choose "Edit Scheme...". Then under Build Configuration, switch from "Debug" to "Release". Now build your app on your target device and it should be much more performant than before.
You can read more in the official React Native documentation under Running on Device: Building your app for production.
For me the issue was related to the wifi network of my development machine. I was using WPA2 Enterprise auth to connect to wifi on my development machine. I found that if I used a wired connection to connect to my network or if I used another wifi connection that used a different form of auth then the delay went away. I think the delay is a network timeout.