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.
Related
I was trying execute myapp to android but an error occurred.
To clarify what happened, first time I install nodejs and Android Studio.
Later I used the following commands:
npx react-native init 'app'
cd app
npx react-native run-android
Its my fisrt time messing with react native, I was following this page:
https://learn.microsoft.com/pt-br/windows/dev-environment/javascript/react-native-for-android
And the error is:
The error
I want coding in real time for android app.
How can I fix this?
Looks like the terminal output gives you several steps to do/check.
Make sure you have properly set up your android environment. Use this link to do so. You can use Expo-Cli or React-Native-Cli.
SDK location not found. This could be an off-shoot error of not properly doing step 1. However, to cover all of your bases, ensure you have properly set up your Android Emulator. This doc is a great walkthrough.
Once your Android studio and AVD Manager is properly set up, and your development environment is properly set, you should have no issues!
Please let me know if doing the above to steps did or did not solve your errors.
If you follow the steps, https://reactnative.dev/docs/environment-setup and https://developer.android.com/studio/run/emulator there will be no problem.
As a React Native fan on Windows 10, I'd like to mention just few points you need to check.
First, please check following user variables in Environment Variables ( You can see it from System Properties).
adb="C:\Users{username}\AppData\Local\Android\Sdk\platform-tools"
ANDROID_HOME="C:\Users{username}\AppData\Local\Android\Sdk"
JAVA_HOME="C:\Program Files\OpenJDK\openjdk-11.0.15_10"
Path: check if contains {ANDROID_HOME}\platform-tools
Eg:"C:\Users{username}\AppData\Local\Android\Sdk\platform-tools"
Second, if you are using Android Sdk emulator, please make sure that it configured correctly in emulator list in Android Studio.
For an instance, I created a android emulator using android sdk-29 and you can check the followings.
Third, I recommend you, deploy first app on emulator in Android Studio.
Because we need to download gradle zip file and others, it's essential to run your first android app in Android Studio.
When you confirmed your first android app(Deploy empty project app is also okay), you can run your React Native App by Expo-cli or react-native-cli.
I'm trying to run my React Native app as a web site, on a browser.
I tried to go according to https://necolas.github.io/react-native-web/docs/installation/ but the instructions on the Setup page are not clear.
I found some (rare) posts regarding this, but they are old (2019) and seem to deviate from the info in the link above.
I use yarn android to run it on android.
So, I tried using yarn web. Didn't work.
Also, tried the basic react-native start followed by react-native run-web.
It seems the run-web command is not what is needed.
Any assist appreciated.
P.S. I initialized my project through Expo, as a Bare Workflow project. Hope that helps
According to the docs:
Expo for web can work on any React Native project. When you initialize a new project with a bare workflow template using expo-cli, if you run yarn web or npm run web it will start up expo-cli and open your project in a web browser.
The same guides for web from the managed workflow apply here.
So basically just initialise your project using expo init project-name and then select bare workflow or managed workflow. After that you can execute npm run web. It will open up the browser and run the web version of it. Keep in mind that there are some incompatibility of libraries from expo, for example, the Webview is incompatible on the web so you need to switch when on web to an iframe or so.
I have build a project in react-native, for now I am testing the android app by using Expo Client App. I am using Visual Code in Ubuntu 18.04.
So the problem is, now I want to test the project for IOS, but unfortunately i can't test the app, because I don't have MAC OS.
Can anyone tell me the alternative solution of testing react-native project on IOS?
And if somehow there is a solution of creating IPA,then can I use that IPA in IOS without uploading it in AppStore?
You can use snack :
Snack lets you run complete react native project in a web browser,you can set it up on your local machine directly use it from snack.io which also let's you test for android and ios as well
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"
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).