I'm new to react native, and I've been having some trouble understanding the folder structure of the app which should supposedly be present in the project folder on creation. Basically, when creating the project with npm, I get some starting files (App.js etc.) and a node_modules folder. I've got it up and running with expo, which created the .expo folder as well.
However, when I go to react's official documentation or look into plugins/addons on git they talk several times about an android and an iOS folder in the project root. But they are nowhere to be seen. I then got some hints that I could install and run react-native-upgrade-git, which allegedly would generate these missing folders. But that didn't work either.
So what have I missed? Where are those folders located?
Edit: Here is a screen dump from a Youtube tutorial showing the project structure I'm looking for:
One of the points of Expo on top of React Native is that you don't go down to android or ios code. Expo deals with those folders for you, you don't need to interact with them. Is there a reason you need those folders? if so, you will have to eject. Here's the documentation to do so: Ejecting with ExpoKit
You can get to that project structure by running:
npm run eject
However, it removes the app from the Expo framework, which adds a lot of nice benefits and abstraction from the Android/iOS code.
i think if you want to develop app with ReactNative you start follow this : Getting Started use React Native.
If you create project with ReactNative just write on your terminal like:
react-native init YourProjectName
cd YourProjectName
react-native run-ios //for iOS
I hope my answer helping you to create project with ReactNative. thanks..
Check this Expo document Adding custom native code
In general,
to generate ios folder: expo run:ios
to generate android folder: expo run:android
Try this to generate the Android and iOS folder
react-native eject
react-native link
To add to Funk Soul Ninja's answer after following his directions (thank you! :) ), for those who started with an Expo project:
expo run:ios
did the trick for me.
The command creates the ios folder that contains the project that can be edited and built in Xcode.
I did not do this step, but I believe expo run:android does exactly the analogous thing for Android; but I would suggest checking out Expo documentation on adding custom native code.
I think I am little late but follow this steps if you don't want to read any document.
android and ios folder are not present when react native project is created with expo. so you have to detach expo from your project to create android and ios folder.
first add required package name in app.json file
ios: {
bundleIdentifier: "com.yourcompany.yourappname",
},
android: {
package: "com.yourcompany.yourappname",
}
then run below command in terminal
exp detach
after command is successfully executed you will find android and ios folder
Delete folders android and ios
npm i react-native-eject
react-native eject
I had to run expo eject. The story behind why I didn't have the folders is had to downgrade my react-native application because of some broken dependencies and then I got build failures. So I deleted the ios and android folders then ran expo eject and got all the build issues fixed. Note that I used expo command line via a script in package json so that the versions would match the version my project was using.
run this in the root directory
expo eject
in the begining install react native, after run expo init YourProject , choose minimal (Typescript) . after that go to YourProject directory and do not run npm start. but run npm run android. hope this help
This worked for me: Go to Setting and remove both entries "android" and "ios" from "Files:Exclude". Don't forget both environments - User and Workspace.
Removing entries on Workspace:
... same for User:
If you created the project with Expo you will have the Expo folder instead of ios and android folders
If you previously installed a global react-native-cli package, please remove it as it may cause unexpected issues:
npm uninstall -g react-native-cli #react-native-community/cli
then create a new project again:
npx react-native init DemoApp
The simplest way I know
1) Take your app name from your current app.json, let's say the name is "mynativeapp"
2) make a new folder somewhere outside of your current project folder
3) start in it:
react-native init mynativeapp
4) the command above will make android and ios folders internally compatible by name with your project
5) copy android/ios folders into your project folder
Now you can try to start your native project. I checked that for Android:
react-native run-android
enjoy!
P.S. "react": "16.9.0", "react-native": "0.61.4"
Related
after serval days with react native and android running, I added some external libraries, and all was well.
After re-start of the computer, I got back to the root of the react native project and typed
npx react-native run-android
And got back the error msg
error Android project not found. Are you sure this is a React Native project? If your Android files are located in a non-standard location (e.g. not inside 'android' folder), consider setting `project.android.sourceDir` option to point to a new location. Run CLI with --verbose flag for more details.
my Android project is in standard location : MyReactProject\android.
Any ideas what happed or how to fix this?
I have found a solution that works, but it still don't know what went wrong.
probably from installing the new packages.
Open the Root Directory of my React Native Project
go to \android\app\build\intermediates\signing_config\debug\out
Delete the file signing-config.json
go back to Root Directory
type npx react-native run-android
the solution is based on this site, hope this will help others.
You should check your manifest
I did not have the tag closed
Just found the solution.
You just need to go to node_modules -> glob -> common.js
Find options.allowWindowsEscape and set it to false
It worked for me and it also took 3 hours to find the solution. Hope it will work for you as well.
Make sure you have "android" and "ios" folders in your project root directory exactly like below pictures shows. If you don't have these folders then create them.
npm i react-native-eject
npm i #react-native-community/cli
react-native eject
react-native upgrade
So Basically the Problem Could Be That You May be starting expo CLI quickstart Project in "React native CLI Quickstart" .
There are two ways :-
https://reactnative.dev/docs/environment-setup
the problem can be solved by :-
1)npm install -g expo-cli
2) expo init AwesomeProject
cd
npm start # you can also use: expo start
When I use npx react-native run-android command to run my project on android the live reload feature doesn't work and I can't even bring up the developer menu using Command + M.
When I run the same project on iOS using npx react-native run-ios everything works fine. What am I doing wrong?
I'm using MacOS 10.15.5 and React native 0.62.2. Not using Expo.
Managed to fix this. There were two issues with my project. Firstly BuildConfig was being imported from react in my MainApplication.java file. According to this post: https://stackoverflow.com/a/43183752/9295598 it should come from my package. Once I resolved this I noticed that my package name didn't match my folder structure. Seem like I renamed my project in the past and didn't update the folder structure.
Once the folder structure was fixed and BuildConfig was imported from my project, the BuildConfig.DEBUG started working as intended which fixed the rest of the issues.
Why after create-react-native-app I don't have a folder android and ios?
Now I can't open this by react-native run-android and can't put for example android permissions.
What is wrong?
There are two ways to create React native project.
create-react-native-app AwesomeProject => This used expo to create app and when you use this command to create app you will not find android and ios folder you cant add platform specific libraries.
react-native-init => this app is not created using expo you can find android and ios folder and can do native coding or use platform specific libraries as well as permission you mention.
In your case want to add permissions:
If you wish to do native coding (android and ios) or want to install Platform specific libraries i.e. npm link you need to run npm run eject command
(Note: Once you run eject command you can't run your app using expo. So before doing this go through docs)
you should run react-native init projectName.pay attention you should run cmd as run as administrator
Naviagte to project path and execute the following command to get android and ios folder
1. > npm i //To get all dependencies loaded
2. > react-native upgrade //To get android and ios folder
3. > react-native link //To link the dependencies to ios and android
4. > react-native run-android or react-native run-ios
For example, I'm trying to run the UIExplorer example.
I cloned the https://github.com/facebook/react-native/tree/master/ repository.
Did react-native init ExplorerApp
Copied everything inside the UIExplorerfolder and pasted it inside the ExplorerApp folder (except the android folder)
However, when I run ExplorerApp I still get "Welcome to React Native"!
Maybe I have to modify index.android.js so it somehow points to the pasted files? How to do that?
To run the official RN examples, follow these steps
git clone https://github.com/facebook/react-native.git
cd react-native && npm install
iOS
Now open any example (the .xcodeproj file in each of the Examples subdirectories) and hit Run in Xcode.
Android
You need to install Android NDK : see prerequisites here
To start the Movies Example :
./gradlew :Examples:Movies:android:app:installDebug
Start the packager in a separate shell (make sure you ran npm install):
./packager/packager.sh
Open the Movies app in your emulator
Im new with phonegap, cordova and android. Im on mac, recently i install all the needs:
Phonegap 3.3.0-0.19.6
Cordova 3.3.1-0.4.1
Got Android SDK and running on eclipse with no problem. Then create a new Android application on eclipse for phonegap successfully, and running on a phone with android.
Then i create another app with cordoba(terminal), put 2 platforms android and ios, i run prepare etc.. and then import the project(android) into eclipse. At this point the app runs ok, so i proceed to install some plugins for testing (Notifications and Device)
https://cordova.apache.org/docs/en/3.0.0/cordova_device_device.md.html#Device
When i run the app with eclipse the examples always return
Uncaught TypeError: Cannot call method 'alert' of undefined
And its the same with device. So looking over the internet i found that if i run $cordova prepare will work, then i run the command, then run the app on eclipse and it work but always when i install a new plugin for testing i have to run cordova prepare, and the problem is that index.html rewrite with example hello world and i loose my code.
Any help over here, im doing ok?, how to install those plugins and make the test and dont have to run prepare all the time. (Please think on eclipse, i dont what to use terminal all the time)
I had the same exact problem and other posts suggestions didn't work for me.
I solved it by switching the steps a bit, despite the official docs and other posts.
If I add ALL the files AND the core plugins BEFORE I add the platforms, then adding the platforms takes these things with it into the new folder structures AND only build once from the command line before I open the project.
If I need to add anything I do it again. Although I can edit the www files without going through the process again, I do not expect the root www to perpetuate the platform www's. I just copy it myself into all the www folders. It shouldn't be this way but I think this is a well documented bug with multiple command line builds, for now and thats my working fix.
The recommended way is to edit html/js/css... in the root www folder of the project, not in the platfotms/xxx folders.
The reason is that if you have multiple platforms, you just need to modify in one place and cordova prepare or cordova build or phonegap build will propagate your code to all the platforms and update plugins.
If you have only android platform and want to be able to change code directly in eclipse for the platforms/android/assets/www folder, I suggest you create a shell script to
copy all the content of projectroot/platforms/android/assets/www to projectroot/www
run cordova prepare android
Then, instead of running cordova prepare android, you'll just have to run your script after you add new plugins.
Edit
I think there may be a better way for your problem.
You should be able to use plugman to install your plugins instead of cordova.
First you need to install plugman cli : npm install -g plugman
then install a plugin using
plugman -d --platform android --project projectname --plugin nameorurlofplugin
http://cordova.apache.org/docs/en/edge/plugin_ref_plugman.md.html
I had these issues too.
One approach I use now is:
Edit the index.html in the platform folders which is platform/iOS/appname/www and so. Then add plugins using the normal terminal way using cordova plugin add but always run the project using Xcode for iOS and eclipse and not from the terminal because then you will lose your code.
From my experience when you run using .xcodeproj or say android project the www on the inside is used and if you use cordova run ios from terminal the www on the outside will overwrite the www in the platform folders.
If you get xcode errors saying can't find so and so plugin files just move them to the path the error says xcode expects them to be in.