React Native iOS and Android folders not present

Question

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:

Funk Soul Ninja · Accepted Answer · 2019-05-01T23:28:22.233

66

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

edited May 01 '19 at 23:28

answered May 30 '17 at 19:54

Funk Soul Ninja

2,113
3
17
27

1

The reason I'm uncertain has to do, amongst other things, with the following addon: https://github.com/auth0/react-native-lock. When reading the readme provided it seems like I need to access the folders and do some shenanigans. Or is the npm install line enough? Thanks for the answer. – Simon Eliasson May 30 '17 at 20:07
After you npm install the library. You're supposed to enter into your terminal "react-native link react-native-lock". If i'm correct, Expo will not let you do that unless you detach your project to Expokit. Check out the link in my answer. – Funk Soul Ninja May 30 '17 at 20:17
to connect ar with react-native – Gopinath Kaliappan Oct 15 '17 at 03:51
1

How would I get apk from react native without android files? – Rudolph Opperman Feb 19 '18 at 16:12
The link is broken. – Bhargav Thanki May 01 '19 at 13:22
@BhargavThanki Thank you for telling me. The link is now fixed! :) – Funk Soul Ninja May 03 '19 at 20:33
try this--https://stackoverflow.com/a/65776701/1948482 – Kshitij Jan 18 '21 at 14:52
if I need to add the firebase auth to my app? It says I need it – Jean Hoffmann Aug 25 '21 at 21:02

score 36 · Answer 2 · answered Jul 19 '17 at 00:40

36

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.

answered Jul 19 '17 at 00:40

Danny Sullivan

3,626
3
30
39

1

after that what to do? xcode is not running properly @Danny Sullivan – kobi May 08 '19 at 11:40

score 28 · Answer 3 · edited May 30 '23 at 20:39

28

Check this Expo document Adding custom native code

In general,

to generate ios folder: npx expo run:ios
to generate android folder: npx expo run:android

edited May 30 '23 at 20:39

Freewalker

6,329
4
51
70

answered Mar 17 '22 at 08:58

Nhat Nguyen

410
1
7
7

2

This is the most up-to-date answer for adding custom native code in `ios` and `android` folders. You do not need to eject anymore > [Eject to ExpoKit, where you get the native projects along with ExpoKit. This option is deprecated and support for ExpoKit was removed after SDK 38.](https://docs.expo.dev/archive/glossary/#eject?redirected) – Corey Cole Jul 07 '23 at 22:03

score 20 · Answer 4 · answered Jul 19 '17 at 04:06

20

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..

answered Jul 19 '17 at 04:06

manggaraaaa

802
1
8
23

3

This answer should get a lot more attention than it does. I strongly suggest you edit this answer to explain a bit more that the other cli from facebook has expo built in which the whole point is to not have to edit native code. This way allows you to dive deeper using the ios and android directory. I know this myself and still had to search for the correct cli just now setting up my new computer. I was about to answer this myself when I noticed your answer. Thanks! I think if you add more to this people will end up finding this and upvoting it more. – wuno Nov 05 '17 at 07:05
1

Totally agreed. This answer should get more attention indeed. – Lucas Meine Nov 21 '17 at 15:27

omprakash8080 · Answer 5 · 2018-08-01T08:08:28.953

12

Try this to generate the Android and iOS folder

react-native eject

react-native link

edited Aug 01 '18 at 08:08

answered Jul 31 '18 at 12:28

omprakash8080

1,211
16
11

3

"expo eject" worked for me..it created both android and IOS folder – Deepak Ganachari Oct 19 '21 at 11:46

Lazar · Answer 6 · 2021-08-20T17:44:06.487

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.

score 6 · Answer 7 · answered Jan 31 '18 at 11:22

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

I have not had luck with the Android bundle identifier and the ejected path. It doesn't create the _yourcompany_ directory. Have you had luck with this? See https://stackoverflow.com/questions/48526451/explicitly-set-directory-for-react-native-eject-command — John Ptacek, Feb 15 '18 at 21:52

score 2 · Answer 8 · answered Aug 08 '20 at 19:23

2

Delete folders android and ios

npm i react-native-eject
react-native eject

answered Aug 08 '20 at 19:23

Jéssica Román Largo

529
4
10

score 2 · Answer 9 · answered Sep 12 '22 at 04:37

2

run this in the root directory

expo eject

answered Sep 12 '22 at 04:37

Harsh Jadon

358
2
13

score 1 · Answer 10 · answered Oct 12 '20 at 03:01

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.

score 0 · Answer 11 · answered Aug 08 '19 at 08:44

0

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

answered Aug 08 '19 at 08:44

amigatra

1
2

Welcome to SO! Please fix the formatting to make your answer better readable! See https://stackoverflow.com/help/how-to-answer – jasie Aug 08 '19 at 09:01

score 0 · Answer 12 · answered Mar 13 '20 at 13:39

0

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:

answered Mar 13 '20 at 13:39

M_droid

2,447
2
25
35

score 0 · Answer 13 · answered Jul 25 '22 at 11:12

0

If you created the project with Expo you will have the Expo folder instead of ios and android folders

answered Jul 25 '22 at 11:12

Praphul Katlana

5
1

score 0 · Answer 14 · answered Dec 19 '22 at 08:49

0

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

answered Dec 19 '22 at 08:49

Jatin Bhuva

1,301
1
4
22

Gulshan Prajapati · Answer 15 · 2023-06-28T05:37:41.737

0

Expo is updated their command to eject,

To eject and use your custom model

npx expo prebuild

This command ejects your Android and ios folder for further updation

To Run on android device

npx expo run:android

To Run on IOS Device

npx expo run:ios

For more detail https://docs.expo.dev/workflow/prebuild/

edited Jun 28 '23 at 05:37

answered Jun 27 '23 at 11:17

Gulshan Prajapati

584
4
11

score -6 · Answer 16 · answered Nov 07 '19 at 13:30

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"

React Native iOS and Android folders not present

16 Answers16

Linked