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).
Related
App is working fine. Also working fine on Emulator and my mobile phone. But the problem is that it is not showing this page on my browser. Open Image
I created this project in react native, Using following commands.
expo init DoneWithIt
choses a Manage workflow with blank template
When I type "npm start" in terminal (using VS code terminal)
it shows Open Image
It is not opening in browser like this
Open Image
Have you tried opening your browser manually at localhost and port 19000? Or simply press "w" in the same terminal after it starts so it opens for you the browser as you can see in the second image.
The Web UI is now deprecated in favor of a more advance terminal interface: https://blog.expo.dev/sunsetting-the-web-ui-for-expo-cli-ab12936d2206
To me the "w" option is grey out but I can still run it and it will let me know that some dependencies are missing. I try to install them but it doesn't succeed. I guess just made sure that the Web UI will not work anymore.
You will see the below error if the 'w' option is grayed out or if the 'w' doesn't work,
It looks like you're trying to use web support but don't have the required dependencies installed.
Please install react-native-web#~0.18.9, react-dom#18.1.0, #expo/webpack-config#^0.17.2 by running:
npx expo install react-native-web#~0.18.9 react-dom#18.1.0 #expo/webpack-config#^0.17.2
If you're not using the web, please ensure you remove the "web" string from the platform's array in the project Expo config.
install the mentioned packages and re-start the app(npm start).
Enter w, this should work.
The reason why the application is not giving you the web browser ability is because you're missing some packages. Thus far this is the version that's support out there. Try and run this code below:
npx expo install react-native-web#~0.18.9 react-dom#18.1.0 #expo/webpack-config#^0.17.2
this error appear suddenly after updating expo-cli to version 3.2.3
I can't manage to run the application, it displays error like this when I run expo start / yarn start
Trying to open the project in iOS simulator...
Opening exp://127.0.0.1:19000 in iOS simulator
Expo Press ? to show a list of all available commands.
Fetching the user profile failed
getaddrinfo ENOTFOUND exp.host
even I open expo.host from the browser loading.. I tried using 2 internet providers, change dns, flush dns, etc. still not loaded.
I solved this by deleting all expo related files and folders in my project
.expo and .expo-shared specifically.
when you run expo start, expo will automatically regenerate those files.
Make sure you are connected to the same network as your phone and PC,
you can try signing in and starting the project from your recent development tab on expo client.
if this dosen't work try reomving some devDependencies that you're not really using, then delete the node modules and install afresh.
I was facing the similar issue. It got resolved, as I logged in to the expo in my project folder.
Using expo w, you can check if you are logged-in in expo. and use expo login command to login
Is there a way to keep my react-native code in a separate folder, and be used by both android and iOS projects?
I currently have an application that exists for iOS and Android. I have a need to use react-native for the application, and am having some issues. I have a 3 folder structure to accomplish this: android, ios, and js. Currently, I have the iOS project working properly, but the android project is where the trouble comes in. When I run the android application on an emulator or device, I get the error Could not connect to development server.
My setup for my Activity is such:
reactRootView = new ReactRootView(this);
reactInstanceManager = ReactInstanceManager.builder()
.setApplication(getApplication())
.setJSMainModuleName("index.android")
.addPackage(new MainReactPackage())
.setUseDeveloperSupport(true)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
reactRootView.startReactApplication(reactInstanceManager, "SimpleApp", null);
setContentView(reactRootView);
When I run this, the error window indicates it cannot connect to the server, which is a completely different IP address than my localhost (on computer).
I have tried running on device, and doing the adb reverse command, but the result is the same.
I have also tried adding:
SharedPreferences preferences = PreferenceManager.getDefaultSharedPreferences(getApplicationContext());
preferences.edit().putString("debug_http_host", "localhost:8081").apply();
But this still results in the same error.
Using native code along with JS is a little cumbersome(i dont know if it will work or not) you can create your application for both ios and android by just writing the code once in js using react native.And as for your Could not connect to development server you have to go to the root folder of your app and run react-native start that will run the packager. read through the following link for a tutorial on react-native React-native
Kindly refer to my answer provided in following thread.
Packager not started after running "react-native run-android"
Hope it will help you.
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.
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.