I have been having some trouble finding some straight answers in generating android and ios packages in a pre-existing react-native project.
yarn start works for me to view my project in on the web browser but I am trying to create an ios and android native project from this pre-existing website. Right now I have an empty template project that can be made using these commands on Mac Os after installing yarn:
yarn create react-app website
Now here is what my directory looks like. It is missing the android and ios directories that I will use and then run the command
yarn ios
or
yarn android
Thanks I really appreciate the help. I have never worked with react-native so if the answer is obvious please explain anyways.
yarn create react-app website
It will create website only, if you want to create react native app use
expo init AwesomeProject
or
npx create-react-app my-app
or
npx react-native init AwesomeProject
If you want to give support of web inside your react-native app, you can use react-native-web
Related
I have tried to install app using
npx react-native init ProjectName
But it has just created package and node module files and not created Platform-specific folders like android and ios.
Try rerunning this command in another folder.
Check if there any errors in terminal where you ran that command
I have been using react native for a couple months now. However, I really don't know the difference between the starting commands. Currently, I use npm on my project. However, I know yarn can be used. These are the commands I really don't understand the difference with:
exp start, exp ios, exp android
react-native run-ios, react-native run-android
npm start, npm ios, npm android
Which ones are better in what cases and why? Currently, I am using exp but others use react-native run-ios. I used to use npm ios.
Thank you in advance.
It might help to have an overview of the React Native architecture.
In react native, when you write, say, <View/>, it gets sent across the bridge to the native code and dynamically translated into UIView on iOS or android.view.View on Android. Every basic component in the react-native package has been implemented this way. If you want additional native functionality on both platforms, say a library which uses native map components, you will end up having to include the native libraries separately into your Android build.gradle and your iOS .xcodeproj.
The exp CLI is used to start apps built with the Expo SDK. Expo is essentially a prebuilt app with a certain set of native components already included for convenience; all you supply is your JSX; thus the recommendation to "eject" to a regular react native app if you need to use any other libraries.
react-native run-ios and run-android builds the native .app or .apk using the iOS or Android toolchains, starts the Metro Bundler, which minifies and serves the JSX and other assets such as images over to your device in debug mode (You might see something like Loading from localhost:8081).
On Android, it starts the adb server to push the APK with all the native libraries included onto your device, if you have USB debugging enabled. run-ios does the same with the .app; if you install to a simulator it has automatically configured AppDelegate.m to communicate with localhost:8081, whereas live reload over USB has to be configured manually on a physical device.
react-native start simply starts the Metro bundler, which is useful if you already have the app installed.
Commands that begin with npm are defined as scripts in your package.json file. As of RN 0.57, npm start simply calls node node_modules/react-native/local-cli/cli.js start; which is the same as running react-native start; according to the docs react-native-cli installed separately will call the locally installed version of the CLI in node_modules.
My Expo-based React Native App works without a problem when run in the Expo tool but gave the following errors when built as an APK to be installed and run standalone.
A series of white screens keep flipping before the blue screen comes up.
Here are my App.JSON and Package.JSON files
Package.json
App.json
And here are the screen capturing the error message.
Actually there are two ways to create a React Native application
create-react-native-app (CRNA)
react-native init
As you stated in comment section, You created your project using CRNA
CRNA will gave you some form of solid project structure, which is really useful for beginners to get started with react native, you code the app with pure javascript and the app will work inside Expo.
Now if you want to take build and run as a standalone apk for android,
There are two methods
You can run command: exp publish:android
You can eject your app from expo
Dont use exp publish for standalone apks,
You can use second method:
To eject your app:
First if you dont use any expo apis inside your apps, it is very easy to eject and build as a stand alone apk.
just do yarn eject
This will gave you some instructions and follow that.
After that your CRNA project structure will be converted into react-native init project structure, now you will be able to see "Android" and "iOS" folders inside your application
To take build Run: connect your phone with USB debugging ON and react-native run android.
That's all.
Solved my own problem. The 'eth-lightwallet' library works perfectly within the Expo development tool but when I build into an APK, it just made the white screen turns up with no meaningful error messages.
The solution is to replace it with a pure web3js implementation.
This may be useful if you are developing a mobile app for Ethereum.
I am familiar with React Native. I got a new macbook and I am trying to create a new file. However, when I run create-react-native-app [name of app] I am greeted with:
This command requires Expo CLI.
Do you want to install it globally [Y/n]?
When I pressed Y it created the file, however, in a complete file layout. It looked so odd and there were some files missing too.
Normally, when I run create-react-native-app it created the file without asking anything about expo. I am pretty confused. I'm pretty sure I have done wrong somewhere. Where and how I can get the traditional installation process back?
I also know that expo helps with testing. Since may I have been using npm start and npm run ios to test my apps on device and xcode simulation.
https://facebook.github.io/react-native/docs/getting-started I followed this.
New version out now and create react native app has been merged with expo CLI.
To avoid any bug use new version to create react apps, follow the command bellow which is also in the link given in your question.
expo init AwesomeProject
After installation you will be guided to start project with expo start.
cd AwesomeProject
expo start
I need to initialize a new react native project. Recommended method to create a react native project is by using a tool called create-react-app.
But this tool comes with built in 'expo' tool-chain which omit creating ./android directory within my application root directory.
Is there a way to tell while create-react-app command to create the app without integrating "Expo" ?
Why I need this is that i want to use some external native Java libraries integrated with my react-native app.
If you want to use the new archictecure with Hermes (RN version 0.70 or later), you can run:
npx react-native#latest init AwesomeProject
Where the name of your project can replace AwesomeProject.
As they note, first make sure to remove react-native-cli if you have it installed globally.
npm uninstall -g react-native-cli #react-native-community/cli
Read more from the official docs here.