Im new on react native. npm start is starting the Metro Bundler on Terminal but no on the Browser.by "w" cmd Metro Bundler THE MENU ON THE LEFT is NOT displayed on Browser
I am assuming that you would like to open the additional debug tools that are available with React Native.
In the terminal that is spawned by the Metro bundler you can enter the "d" key and it should open the developer menu for both the iOS and Android device that you have connected. In the developer menu you can then launch additional debug tools like Flipper by choosing "Open Debugger" or React DevTools in Chrome by choosing "Open React DevTools".
If that doesn't work, what usually works for me is entering the key combination - ⌘ + D [On Mac for iOS] or ⌘ + M [On Mac for Android] | Ctrl + M [On Windows for Android]. This will also open the developer menu on the device or emulator/simulator that you have connected to Metro.
NOTE - You tagged microsoft-metro when it should've been metro-bundler
Additional Resources:
React-Native Debugging
Metro Docs
What you should expect:
Related
I'm new to React Native and I'm just starting to learn about it but I noticed from different tutorials that expo has a dev tool that open in web browser which don't work for me.
I'm using expo-cli: version 6.0.2 and 46.0.7.
What should I do to solve this issue.
The way you open developer menu is a bit different depending on where you're running the Expo Go app:
iOS Device: Shake the device a little bit, or touch 3 fingers to the screen.
iOS Simulator: Hit Ctrl + Cmd ⌘ + Z on a Mac in the emulator to simulate the shake gesture, or press Cmd ⌘ + D.
Android Device: Shake the device vertically a little bit, or run adb shell input keyevent 82 in your terminal window if your device is connected via USB.
Android Emulator: Either hit Cmd ⌘ + M or Ctrl + M or run adb shell input keyevent 82 in your terminal window.
Check the expo doc...
Starting my app with react-native start (when debug mode is enabled) open a tab in my default webbrowser (after the log info Launching Dev Tools... displayed in the terminal).
How can I disable it?
In menu of the device press 'Stop Debugging'.
In my case (Android, Samsung phone), it's 2nd point, the 1st is 'Reload'.
If debug is stopped all console.log go to the terminal where Metro Bundler is run.
I wanna be able to use my app on my iPhone or my Android phone without the need of releasing it to App Store or Google Play Store.
or just use EXPO tools if you are open to using expo development environment for react native
If your project is based on React-Native-CLI and your development environment is all set-up then just run command 'react-native run-android' in the terminal. It will generate a debug apk file which you can be found in the directory:
android > app > build > outputs > apk > debug > app-debug.apk
You can directly install this debug apk in your android phone by connecting the device in the debugging mode and run the above command!
In Xcode, add your Apple ID to Accounts preferences, described in
Adding Your Apple ID Account in Xcode.
In the project navigator, select the project and your target to
display the project editor.
Click General and choose your name from the Team pop-up menu.
Connect the device to your Mac and choose your device from the Scheme
toolbar menu.
Below the Team pop-up menu, click Fix Issue.
Xcode creates a free provisioning profile for you and the warning text
under the Team pop-up menu disappears.
Click the Run button.
Xcode installs the app on the device before launching the app.
Test iOS app on device without apple developer program or jailbreak
For IOS you must have a developer account firstly. And then, you can send your app to itunesconnect and get the app from testflight. Or You can run your ios app on device by using cable. But you dont run your app in developer mode.
For android you just need get the apk from android studio. But some steps there are. Follow this steps for get the apk.
How can I generate an apk that can run without server with react-native?
You can Side load your react native app in iPhone or iPad using Xcode
Open your_projectname.xcworkspace from ios folder in Xcode
XCode - Choose your destination device simulator or device from
Product -> Destination -> Select the device
Create a Temporary provision profile From project Target -> Signing
& Capabilities (Required only for physical device, for simulator don't
require this)
Build and Run your project
React Native's official site has a guide on how to install your app without releasing it.
The tl;dr is as follows:
For ios:
cd AwesomeProject
react-native run-ios
For android:
cd AwesomeProject
react-native run-android
I’m doing a React Native project. It has a bug.
The bug make the APP just exit(it can functional run a while, but suddenly...just gone). So it dose not report error. How can I find out where the problem is?
My APP used react-native-bluetooth-serial.
My code on Github
Are you running it on you simulator.
If that is so you have to use real device for testing it as simulators do not have access to bluetooth peripherals.
Hope this helps.
You can use Genymotion or real device to use bluetooth enabled app. To test your bug you can also use "Debug JS remotely" feature of react native dev tools.
To enable dev tools in your real device, shake your device and dev menu will appear. In emulator you can press Ctrl + M to enable dev menu. then you can choose "Debug JS remotely" which will open in chrome. If you are familiar with web development then you might have used "Inspect element" feature which will open dev tools.
The answers are right. You might be using a simulator which doesn't support bluetooth.
To know more about the crash you can check the logs natively. For android just run this inside your android folder
adb logcat
Or you can use
react-native log-ios
react-native log-android
As you see,when I open dev tool in chrome,It will soon turn into this red screen.If I do not open dev mode,it works, and console.log can log infomations in Xcode console.(this way is not use Xcode)
just open localhost:8081/debugger-ui and press Cmd+R in simulator, or dismiss this error, open developer menu in App and disable "Debug in Chrome" option
try to update your react-native version to more stable version may be 0.35 or 0.38.
this basically happens when react-native is not able to load the bundles into developer tool.