While debugging JavaScript code, you may also encounter some problems. Keep it in mind, when your changes don’t seem to work :) Hot reloading does not always reload a screen properly, sometimes you just need to reload the app manually to get the changes visible (especially when you change the styles only). Here are some tips, what to do when things don’t go like clockwork. In fact, as of my experience, more often it does not work. The latter is extremely useful when you need to develop your own react-native-to-native bridge library.Īlthough it looks promising, not everything works like a charm. Now you can debug the native code - the app code itself (which is probably not that necessary) as well as included libraries.In Xcode open Debug -> Attach to Process and choose your app process (it will likely be named as your app). In Android Studio open Attach debugger to Android process, check Show all processes and choose the device that your app is running on. Open the native subproject of your React Native app (probably placed in android or ios directory) in Android Studio or Xcode.Run your React Native app (on a device or an emulator/simulator).Here is the way how to debug the native code inside a React Native app. Sooner or later, you will probably need to dive deep into it. While developing a React Native app, most often you are focused on the JavaScript code, but you cannot forget that the native code is still there under the hood. You can debug your app both on physical and virtual devices, on Android and iOS. Now you can debug your JS code either in the browser’s developer tool window or via the IDE. A web browser should open and display the debugger page. ![]() Once the app launches on your device, enter the in-app developer menu and choose Debug JS Remotely. Now we are almost ready to debug the JavaScript code. This is not the fully featured inspector a web developer may know from web browsers, but it may help from time to time. Once we are in the developer menu, there is another useful option - inspector. It will reload your app anytime you change the code, which means you will lose the current app state. There is also another option available: Live reload. This means you won’t need to reload your app. Hot reloading will reflect any changes you make in the JavaScript code right away in the running app. To enable it, open the in-app developer menu with CMD + D (iPhone simulator), or CMD + M (Android emulator), or shake gesture (physical device). Now that we can run the React Native app, there is a handy option, you may want to enable: Hot Reloading. ![]() Once you run the app, it will be installed on all devices connected (to view the devices list, you can run adb devices). To run the app on a physical device, you need to enable the developer mode on it. You can also use the command line for this, check the details here. To view and manage Android emulated devices, you may use Android Studio. It is shipped with Android Studio, which is convenient to have installed anyway. To run the app on a device or a simulator, you need to have adb installed. Add another React Native configuration, give it a name and choose Android as a Target Platform. Run the Android appĬreating the run configuration for Android is pretty similar. env file in the Environment property as follows: ENVFILE=.env.staging. If you leave the Arguments property empty, it will attempt to install the app on any connected device.To manage simulated devices, open Xcode, go to Window -> Devices and Simulators. The simulator is shipped with Xcode and you need a Mac to run it. To install and run the app on a simulator set Arguments property to -simulator="iPhone X" (or any other device with iOS you want to test on).The name of your device you can find and edit in Settings -> General -> About -> Name. To install the app on a physical device set Arguments property to -device="MyDevice".We can use either a physical device or a simulator to run the app on. Go to Add Configuration (or Edit configuration, if you happen to have any configuration created already).Ĭall it Run iOS or whatever is meaningful to you. I personally use IntelliJ IDEA, but WebStorm is pretty similar. ![]() It is quite convenient to create build configurations in your IDE. In this blog post you may find a short tutorial on how to debug your app on Android and iOS, on a physical device or a simulator/emulator, the JavaScript code and the native one. One of the reasons might be troublesome running and debugging the JavaScript code. Sounds great, right? Not everybody though is so enthusiastic about this approach. I have added jest-expo and react-test-renderer in the dev dependencies, and also have updated package.json like documented in the expo docs for testing.React Native is an abstraction over the native code, which allows us to have one code base for multiple platforms. I have a basic react-native/expo template app.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |