Photo by Daniel Korpai on Unsplash

React Native Notes 1: Eject Expo with ExpoKit [UPDATED]

Hey,

After I’ve spent 4+ months with React Native, our project requires native codes and react-native-links to directly touch native codes. That’s why I’ve spent so much time to eject from EXPO. (Totally do not recommend EXPO if you’re going to create a huge application!)

Also, I’m going to write articles for each bug, issues while I’ve to eject our huge project.

Here’s simply how to eject from Expo with ExpoKit!

Install Create React Native App

First, open terminal and install create-react-native-app v2 via npm. (Of course first, you need to install npm)

npm i -g create-react-native-app

Create a new project with create-react-native-app

create-react-native-app my-rn-project

We’re going as a blank template.

After that, you should enter your new project’s folder with :

cd my-rn-project

If you want to check that your project has a problem or not, simply try :

expo start

Ejecting with ExpoKit

Now, our RN project is ready and we can use it with EXPO easily. However, sometimes we need to use react-native-link or directly need to reach native codes. Here’s how to eject from EXPO with ExpoKit.

Ejecting

Let’s start with directly ejecting :)

In your project root, simply command :

npm run eject

It will ask you to how would you eject this project. In this article, we will select ExpoKit. It will create an account or just use your already logged in user authentications and eject your whole project.

iOS Bundle Identifier:

Choose your iOS bundle id very carefully. It will be your unique ID for everything!

Android Package Name:

Like iOS, you should choose your Android package name very carefully!

Ejected :O

After all these steps, you need to see this message. Yes, we’re ejected our project from Expo and now we have ios and android folders. Also, we still can use Expo dependency :)

Is that finished?? Of course not :) Let’s fix bugs!

Project Structure

Your project structure should be seen like this one :)

React Native Dependency Pointing

This one is important and required by Expo. Open your package.json and check your react-native

“react-native”: “https://github.com/expo/react-native/archive/sdk-30.0.0.tar.gz"

It should be something like that, maybe the SDK version is changed.

After that simply

npm i / yarn

to install again to fix any cause of issues.

Run the project with Expo CLI

In our project directory, we need to run

expo start

React Native packager is running and serving your app’s JS bundle for development. Actually, Expo XDE does that for us. Thanks to ExpoKit, we can do it for ourselves :)

IMPORTANT! We need to keep running this process to use our app’s js bundle for development.

Running and serving our own app’s js bundle

iOS Configuration

• As always you need to use the latest XCode.
• To install cocoapods:

sudo gem install cocoapods

• Go to your project’s ios folder and run:

pod install

• Important Step! Inside of your iOS folder, open your project file:

.xcworkspace

.xcworkspace

Do not open blue one! Open white one!

Now, open your XCode and firstly, select your team:

Team Selection on XCode

Build the project!

Cmd + B

to build the project. Project’s first build always takes so much time, just take a coffee/ beer and wait :)

Ignore Warnings (For now!)

I know, I know. Programmers cannot ignore warnings easily but for now, just ignore them. After your product is ready and you’re ready for optimization. Maybe you can jump on it. A little bit of advice; if you’re not an advanced iOS developer. Do not even try to touch them :)

Build Succeeded!

Your first-time build should be succeeded, like that :) Nevermind these 360+ warnings. You do not need to fix them :)

Android section is going to add soon !

Android Configuration

Now, it’s time to configure and fix bugs, issues on the Android part. As like iOS part, if you’re going to eject a huge project then you’re going to fix numerous problems, bugs :( I’m going to make articles about each bug. So stay with me :)

Unlike iOS, React Native documentation has some help while I’m configuring Android.

Developing With ExpoKit Documentation

SDK Version

Let’s start with SDK Version because while I’m configuring myself, SDK version has a critical role in all these red errors.

Open your app.json and package.json add this line:

“sdkVersion”: “30.0.0”

This line should have both the JSON file.

Also please check your react-native dependency version, it should have a match with your SDK version in your package.json

“react-native”: “https://github.com/expo/react-native/archive/sdk-30.0.0.tar.gz"

Example of package.json dependencies

Android Studio

It’s time to open our android folder in Android Studio. Open it and wait for gradle sync. It takes time so much time and it depends on your machine’s power. Just wait till it is finished with a success or failure. If it is a fresh project, it should finish with success.

Gradle Success

Project Setup Success

Run & Test App

Simply, run and test our app with Android Studio but DO NOT FORGET! We need to run and keep it running our project with :

exp start

If it runs without a problem :) Here it is, we did it! :O

This is a really simple ejection example and it should be working as well if you do not skip any step. HOWEVER, if you’re trying to eject a huge project with ExpoKit. You have to fix a lot of bugs. I’m going to write articles about every fix which I’ve handled.

WrathChaos/ReactNativeStarter_ExpoKit

Here is the already completed and ready to go react-native starter kit. Enjoy :)

If you have any questions, ask me :)

Have fun! :)