React native init not working - react-native

I posted this in the react native github but was asked to post here
I following the instructions on the website to get a react native app up and running.
I get the following messages
Genymotion Andriod simulator Reference Error: can't find variable _fbBatchedBridge
IOS simulator Unable to execute JS call: _fbBatchedBridge is undefined
React Package Manager synchonization failed
React native version 0.18.0
React native cli 0.1.10
Node 4.2.4
Mac Os X Yosemite
XCode Version 7.2
In researching this many claim that the issue is with the network. I opened a browser pointing at localhost:8081 and get a webpage with Cannot GET /
Currently I am not getting any error message on the IOS simulator, just a blank white screen. Android is still giving the same error message on both Genymotion and on my local android device.
There are no error messages on the Terminal or in XCode.
This is very frustrating to try to troubleshoot since I have no idea why it is not working and even where to start.

This error is because the script server is not running.
For Android version, in addition to execute 'react-native run-android' to build the app, you need to execute 'react-native start' to start the script server.
In XCode when you run the application the terminal should be started automatically, but it seems something is wrong in your case. Did you try to close the terminal window and start over?
==============================
when you first start the script server, the console should show
[18:07:15] <START> Building Dependency Graph
[18:07:15] <START> Crawling File System
[18:07:15] <START> Loading bundles layout
[18:07:15] <END> Loading bundles layout (1ms)
React packager ready.
When your client connects to the server, the console should show
[18:07:25] <START> request:/index.android.bundle?platform=android&dev=true
[18:07:25] <START> find dependencies
[18:08:01] <END> Crawling File System (45771ms)
[18:08:01] <START> Building in-memory fs for JavaScript
[18:08:04] <END> Building in-memory fs for JavaScript (3382ms)
[18:08:04] <START> Building in-memory fs for Assets
...
if the second part was not showing up, you may want to check whether you can use the port:
With this image you can see the url should be http://localhost:8081/index.android.bundle?platform=android&dev=true . If you cannot open it in your browser you may need to check your firewall setting or anything else blocking the access.
Also you may want to search index.android.bundle in your native code to check whether the dev url has been modified.

Related

React Native Android debug build is using the prebuilt bundle instead of connecting to Metro

When I try to run my application on android using react-native run-android the app is not connecting to the Metro server but is using the bundle file in android/app/src/main/assets instead.
When I delete the bundle file I get two error screens that tell me that a bundle file could not be found and that a connection to the Metro server could not be made:
This happens on both my physical device and a local emulator, but on iOS devices everything works as expected. I'm pretty clueless what might be causing this. I've also tried deleting all the build output and node_modules without any result.
So after a lot of googling I found out what the issue was...
Some time ago the android API level was updated to level 28, and since API level 28 you need to specify if you want to use HTTP.
Metro uses HTTP for bundling so that's why it wasn't working.
I solved it by adding this line in the application part of AndroidManifest.xml:
android:usesCleartextTraffic="true"

IOS on device debugging the sample code provided by Realm not working with Chrome dev tool

Strictly followed the description listed on Realm's website
react-native init myproj
cd myproj
npm install
npm install --save realm
react-native link realm
now running npm list to verify some versions
react#16.3.1
react-native#0.55.4
realm#2.8.1
Now modify the shipped App.js based on the "Number of dogs" example in Realm's Getting Started page (directly replace the class body).
Now open myproj.xcodeproj in XCode(v9.4), fix the signing error. Make sure there's no other running bundler thread. Choose the ipad mini that's connected in xcode and hit 'build and run'
Once the app is loaded in the ipad mini, I can see
Number of dogs in theis Realm: 1
which means Realm is loaded and working correctly. Now shake the ipad mini and tap on the "Debug JS Remotely" menu, I got this error in red background:
Failed to execute 'send' on 'XMLHttpRequest':Failed to load
'http://[IP_of_the_IPAD_mini]:8083/create_session'
Chrome React Native Debugger says "Status: Debugger session #10000 active", so it's connected to the ipad mini.
Did the same test on my iphone 7, but got the same error. I do need on device debugging because our project needs to use the camera of the device. Any suggestions?
Thanks.
Found some clues in here
to fix the issue, open RealmReact.mm file, search for
"Access-Control-Allow-Origin"
and change that line to
[response setValue:#"*" forAdditionalHeader:#"Access-Control-Allow-Origin"];

React-Native packager stuck on `Requesting bundle`

I'm trying to run a boilerplate react-native app and the packager seems to stall out right at the beginning when the javascript bundle is requested. Eventually the iOS simulator gives up and throws Could not connect to development server.
Here is the terminal output:
[01/17/2017, 10:48:00] <START> Initializing Packager
[01/17/2017, 10:48:00] HMR Server listening on /hot
React packager ready.
[01/17/2017, 10:48:47] <START> Requesting bundle
bundle_url: /index.ios.bundle?platform=ios&dev=true&minify=false
I haven't been in react-native for a few months but I used to be able to specify whether the app should load from a bundle or just load the js directly. I would load directly when the xCode project was in debug mode or from a bundle when in release mode.
Again this is just straight boilderplate - no external packages or anything. Just using react-native init TestProj and then cd TestProj/ && react-native run-ios
I'm using the last version of react-native 0.40.0 and the expected react dependency of react#~15.4.0-rc.4.
Thanks for any help on this.
I'm not sure what the issue was but it was fixed after I restarted my computer. I also had issues getting the code to refresh once the app was loaded. That was fixed by uninstalling nodemon globally.

Could not determine wrapper version

I've created a react native app, by simply doing:
react-native init app
I've followed this tutorial: Facebook Getting Started (I use Linux)
and I have done exactly what it says.
However, when I try to run the app (react-native run-android), I got the following message:
Starting JS server...
Building and installing the app on the device (cd android && ./gradlew installDebug)...
Exception in thread "main" java.lang.RuntimeException: Could not determine wrapper version.
at org.gradle.wrapper.GradleWrapperMain.wrapperVersion(GradleWrapperMain.java:111)
at org.gradle.wrapper.GradleWrapperMain.main(GradleWrapperMain.java:61)
Caused by: java.lang.RuntimeException: No build receipt resource found.
at org.gradle.wrapper.GradleWrapperMain.wrapperVersion(GradleWrapperMain.java:97)
... 1 more
Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:
https://facebook.github.io/react-native/docs/android-setup.html
```
How can I solve this problem?
According to this link
https://github.com/MinecraftForge/ForgeGradle/issues/227
it's because you have some special character in your project path (like "!")
I got the same issue in a Flutter project as I was organizing some of my projects. In my case also found that my source path contained special characters when I change the folders, after removing it works perfectly fine. This will usually happen to project that contains java code and I think this is because java is compiled based on the path you provide, so the compiler does not understand the special characters we used

React native Android Example does not work

I cloned the repository: https://github.com/facebook/react-native and try to run the UIExplorer example on Android emulator.
./gradlew :Examples:UIExplorer:android:app:installDebug
./packager/packager.sh
I got this error message on the Android emulator:
Unable to download JS Bundle, Did you forget to start the development server or connect your device?
I understand this is somewhat similar to this one:
react native android failed to load JS bundle
But here I had to use the command "./packager/packager.sh" to run the example. So the answer above does not apply to this case.
In order for the app to be able to download the JS Bundle, the packager has to create and serve the JS bundle, and the emulator has to be able to connect to it.
To verify that the bundle is created and served correctly, try browsing to this page in your web browser. This should connect to the packager and get the bundle as the answer. If the packager received the request, the following request message should appear in the packager console:
<START> request:/Examples/UIExplorer/UIExplorerApp.android.bundle?platform=android
If the packager created the correct bundle, it would return get a huge file that starts with something like "__DEV__ = true;. If these two steps did not work, then there's an issue with the packager and you can report the issue on github.
To verify that the emulator can connect to your packager, when you tap Reload JS you should see the same request message in the packager console as above. If no such message appears, then the emulator can't connect to your machine.
It looks like your packager is not accessible from application. You should start React Native Packager at first. It could be done various ways - it depends on your OS and project, examples:
./packager/packager.sh
packager\packager.bat
npm start
react-native start
node "local-cli\cli.js" start
node node_modules/react-native/local-cli/cli.js start
Also check packager configuration in your project (hostname and port at least).