Hello world! Glad you asked this question, about ejecting your expo app. Well, you might have been asked by your senior developer, or boss or you might have just heard it from someone but don’t exactly have a good acquaintance with it. In this article we’ll try to answer these questions, all of you might be dead curious to know this in the simplest way –

  1. Why do we need to eject an expo app, although it gives us a tonne of features?
  2. Can we use some modules which have native code with expo like pusher, react-native-modal, etc?
  3. how to make expo and react native work together?

Let’s add a secret ingredient called expo-starter-kit to make all of this happen with a breeze.Overview

Expo-starter-kit is a powerful, minimal configuration scaffolding tool, which provides a basic configuration for ejected apps built with expo, saving the developers from the hassle of manually ejecting apps. expo-starter-kit exposes an easy-to-use scripts’ list for handling builds, running an app in ejected as well as in unejected mode.

Features

Some of the features which make this module a boon for developers is-

  1. Minimal configuration
  2. Blazing fast development
  3. Rich script structure to run the app in ejected or unejected mode, with the help of just one command
  4. Do whatever you want in the Xcode and Android Studio projects
  5. Support for third-party native modules for React Native, non-Expo-specific instructions such as react-native link
  6. distribute your app as an ipa or apk without pain

Why should I eject my expo app?

And the answer is pretty simple. “Ejecting” is the process of setting up your own custom builds for your CRNA app. It can be necessary to do if you have needs that aren’t covered by CRNA or expo. Apps built with React-native are written in javascript, offering a bridge between writing old school platform-specific apps using kotlin, swift, etc. And this is the specialty offered by react-native, which makes it blazing fast and powerful to use.

However, there are some cases where advanced developers need native capabilities outside of what Expo offers out-of-the-box.
The most common situation is when a project requires a specific Native Module which is not supported by React Native Core or the Expo
SDK.

You might want to eject in the following cases:-

  1. If you do need to eject to build your own distribution package or to include your own native code
  2. If you wish to distribute your app to coworkers, friends, or customers. Right now you can do so by either making use of a service to host or build your CRNA app or by ejecting.
  3. If you wish to use a functionality that comes from interfacing directly with mobile platform APIs via Java, Objective-C, Swift, C, etc. As of right now, the only way to get direct access to these APIs from your app is by “ejecting” from CRNA and building the native code yourself.

Why is this module so special?

When building large, complex native apps using technologies like react-native or ionic, a programmer eventually feels the need for ejecting the application due to the reasons mentioned above and it is a universal truth that ejecting is a painful process.

Also, there might be some cases when a customer might force the programmer to use a native library, which expo or react-native might not offer out-of-the-box. These integrations require the use of react-native link which can only function in the ejected version of the app.

Therefore, this module is made as a headstart for running your app in ejected or unjected mode using simple, and easy to use commands.

Having said enough, let’s get into some real action-packed coding.

Getting Started

NOTE: The instructions below are written specifically for mac. Running Android version of windows should be pretty similar.

Setting up for an iOS device/simulator

Install the following module. Note it is npx (not npm)


npx create-expo-native-app

Install the dependencies.


npm install

Installation

Run the init script to specify your application name. It’s gonna prompt you for your app name and a slug name


npm run init
installation

This package uses bundler as a dependency so let’s go ahead and install it through gem.


gem install bundler

Install the required native dependency files


npm run install-ios-libs
react native file

Cool! We’re good to go. Let’s run the app now. But make sure you have command 5 running in a separate terminal (depending upon whether you want to run the ejected or the unejected version).


react-native run-ios
react native file

BOOM, we’re up and running. Great job. Let’s come to the cool part. Try starting the app in ejected mode with this simple command

Read More:   Installing and setting up styled-components

Did you notice that a small icon appeared at your ios simulator, rather than starting the app through expo? You’re right! You just successfully ran the ejected version of your app.


npm run ios-native
react native file

That’s not it, now try running the app in unejected mode.


npm run ios-expo
expo

Setting up for an android device/simulator

Having things done for iOS device users, let’s make lie easier for android device users as well.

Follow steps 1 and 2, the same you did for iOS devices.

Installation

Run the init script to specify your application name. It’s gonna prompt you for your app name and a slug name


npm run init
expo

Run this gradlew command in the android folder of your app (Make sure you have an AVD android simulator set up and running before running this command)


cd android && ./gradlew installDebug 
installation

Open the android folder of your app in android studio, and hit the run button. This will sync and build the android version of your app.

Note:- Please install android studio v3.2.1 to avoid breaking errors.

errors

Okay, fingers crossed! Let’s try running this in the ejected mode.


npm run android-native
expo

5. Great job, let’s run it in the unejected mode as well.


npm run android-expo

Allow permit for drawing over other apps in the android device/ simulator and we’re good to go.

expo

Phew! that was a long one. But fun isn’t it? Now you can go ahead and start building your app. Let’s move further.

How to add a native module into expo kit

Let’s start by building a mock file to mock a native module, which we might want to use other than the ones provided by the expo, and would have to eject our app in order to use it.

As an example, let’s try integrating “react-native-device-info“ into our app, which requires ejection from expo.


npm install react-native-device-info

And run the application in the unejected mode –


npm run ios-expo

And we’re greeted by this error… :/

Using the module in the unejected and ejected version of the app

No issues! Let’s try and fix this up.

Let’s start by creating a mock module file, mocks/DeviceInfoMock.js, to simulate the behavior of an external non-linked module –


export default class DeviceInfoMock {
    static getBrand() {
        return "expo dummy device"
    }
}

Next, set up your “babel.config.js“ file to set up an alias, so that it reads from the provided path –


const config = require('./config.json');
module.exports = function(api) {
  api.cache(true);
  const babelConfig = {
    presets: ['babel-preset-expo'],
    plugins: [
      [
        "module-resolver",
        {
          // "root": ["./assets"],
          alias: {

          },
          extensions: [".ios.js", ".android.js", ".js", ".json"],
        },

      ],
    ],
  };

  if(!config.isEjected) {
    babelConfig.plugins[0][1].alias['react-native-device-info$'] = './mocks/DeviceInfoMock';
  }
  return babelConfig
};

Let’s have a look at how have we used this module,


import React from 'react';
import {Video} from 'expo';
import {StyleSheet, Text, View, TouchableHighlight, Dimensions, TouchableOpacity} from 'react-native';
import {dismissModal, Modal, showModal} from 'expo-modal';
import DeviceInfo from 'react-native-device-info';

const {height, width} = Dimensions.get('window');

export default class App extends React.Component {

  render() {

    const innerComponent = <View style={{height: height/2 , width: width, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Hello world</Text>
      <TouchableOpacity onPress={() => dismissModal()} ><Text>close modal</Text></TouchableOpacity>
    </View>

    return (
        <View style={styles.container}>
          <Modal/>

          <Text>{DeviceInfo.getBrand()}</Text>
          <Video
              source={{uri: 'http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4'}}
              shouldPlay={true}
              resizeMode="cover"
              style={styles.videoPlayer}
          />
          <TouchableHighlight
              onPress={() => {showModal(innerComponent)}}
          >
            <Text> Touch Here </Text>
          </TouchableHighlight>
        </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  videoPlayer: {
    position: 'relative',
    width: '100%',
    aspectRatio:3/2,
  },
});

So according to our logic, if the app is not ejected then the DeviceInfo must be fetched from our mock module instead of fetching it from react-native-device-info.

Now your screen must show ‘expo dummy device’ when starting the unejected version of your app –

expo dummy device

CONGRATS! YOU JUST INTEGRATED A MODULE IN YOUR EXPO APP.

I hope you have noted the fact that for every native module, you have to write a mock for expo. But that’s pretty simple, just see the public functions of the module that you are using and return a mock data/behavior from there. And in your “babel.config.js“ file add the following line inside the if block


babelConfig.plugins[0][1].alias['react-native-device-info$'] = './mocks/DeviceInfoMock';

Closing thoughts

So, what we have accomplished with the above starter kit?

We have created a way in which we can run both expo and raw react-native codebase together.

And what did we achieve after doing so?

  • The devs who don’t need to work on the native modules will never need to touch the ios and android builds with this. They can simply keep on running expo even though the other dev is adding native modules.
  • The regular problem of developers building the app in expo, then ejecting it because of some use case, and then converting the expo coded UI in react-native is gone.
Read More:   How To Start Your first hybrid app in 2022

We are utilizing all that native modules have to offer without letting go of the development environment that expo offers.

Eager to contribute and improve the module, feel free to send us a PR here. https://github.com/codersera-repo/expo-native-starter-kit

Need some help in building your expo app? Feel free to get in touch with us here

Source: InApps.net

List of Keywords users find our article on Google:

expo react native
react native expo
expo vs react native
react expo
react native run android
modal react native
simple mobile reup
expo icons
expo install
ionic native
react native modal
npm install react
figma to react
convert figma to react
hire breeze.js developers
custom application development
react-select npm
npm react
expo iphone simulator
react native config
react-native-video
ionic ui design
ionic app templates
figma templates ios
hire babel developers
react native video
unejected
pusher sdk
how to debug in xcode
expo native modules
expo run:android
video player npm
react native touchableopacity
react-native expo
react-native modal
android studio raw folder
build expo react native
npx react-native run-ios device
gradlew
prevent android app running on simulator
react native video player
expo commands
react native video sdk
create expo app
coverstyle
react native run on device
search logic in react
logic package vs folder
food app ui kit
figma game template
react install npm
android studio does not recognize device
react native expo start
react native build apk
glad force flex
figma portfolio template
to do list react native
figma ios ui kit
react native network
figma react
follow up boss integrations
react native install
ionic templates
react js starter kit
install react native
react native app development
“expo logic”
react native run ios device
react native expo run
github expo
npm expo
npm i expo
react native expo starter
run expo app on ios simulator
touch based ui native starter
expo run web
react native project structure
expo modal
react-native-screens npm
saas boss kit
expo project github
npm modal
react-native eject
expocoded
npm react native
react icons npm
expo app icon not showing
react-native npm
mp4 in figma
react select npm
expo-dev-client
zeplin jobs
react native expo location
expo install specific version
expo native code
ionic-native
native ux experts
react npm
react-table npm
expo on ios
react admin npm
react table npm
“figma api”
react native expo button
@babel/react vs @babel/preset-react
boon json
expo android sdk version
expo for android
expo react native ios
zeplin mac
expo ios version
touch on raw
instal expo
select react native expo
zeplin app mac
expo android version code
react native expo go
expo build ios
expo install package version
figma saas template
expo install package
expo next js
ionic starter templates
line height react native
react native npm start
zeplin components
zeplin to sketch
build expo app
expo run command
react native info
react native link
react-native-config
build ios app expo
expo run react native app
figma iphone app template
node expo
npm slug
expo android studio
install expo react native
ionic native video player
npm i babel
qa-touch
react native expo android
react native expo android emulator
react-native-modal
zeplin figma
expo app version
expo build ios on windows
expo node js version
ionic 5 starter app
native expo
react native git
api expo
expo build android app
expo install android emulator
hire figma developers
how to force eject mac
kotlin script dependencies
react native expo version
react native touch id
react native windows expo
expo app react native
react native expo apk
react native school
react native share expo
reactnative modal
zeplin review
expo android app
expo app apk
expo react native online
avd native app
create react native app without expo
ecommerce figma template
expo app for android
expo install app on device
expo start android emulator
figma ecommerce app template
food delivery app ui kit
react-native-phone-number-input
offshore scaffolding jobs
should i use expo for react native
build react native app with expo
figma presets
force eject cd mac
pusher gem
react native native video player
whatsapp business api for java
babel react native
figma table template
native phone cases
react native app with expo
start expo app
wawa app not working
@babel/preset-react
add expo in react native project
apps made with expo
expo versions
facebook npm
figma to kotlin
iphone ui kit figma
modal in react native
add expo to react native project
angular pusher
app template figma
expo build ios simulator
figma food delivery app
next js expo
npm facebook
react native config android
react-native version
company profile template figma
convert figma design to react
crna hiring
expo react native examples
expo start command
figma app template
figma iphone templates
figma profile template
flex hrm
how expo works
login expo react native
android studio design view not showing
expo app.config.js
expo emulator online
expo node js
expo react native project
figma app icon export
figma export with device frame
free figma mobile app templates
install react npm
iphone figma ui kit
pusher js
react modal responsive
react native app expo
react native expo windows
react-native phone input
video player in react native example
react-scripts is not recognized
expo react native login
figma export to react
figma iphone ui kit
getting started with pusher
ionic native app
mac force eject cd
react video modal
x-cache: error from cloudfront
android emulator for expo
app figma template
expo build react native
figma templates android
pusher framework
expo framework react native
figma export react
figma templates ecommerce
install expo on ios simulator
ios app icon template figma
raw hire
react native expo login
react native macos
simplemobile reup
viewstyle react native
figma ios app template
figma react export
gradlew android
ionic 2 starter templates
react native dimensions window vs screen
react native searchable list
react responsive modal
travel crna positions
babel preset react app
crna travel jobs
figma android export
figma app templates
figma export assets
figma export kit
figma mobile app template
figma responsive design template
icon component figma
install babel npm
apple ui kit figma
ecommerce ui kit sketch
export assets in figma
force eject on mac
ionic starter template
mobile app development for dummies
one command block
raw recruitment solutions
react native android minimum version
react native for windows app
react native install windows
react native write to file
convert class to hooks react online
expo app development
expo create react native
export figma to react
figma iphone template
react native admob
react native ecommerce app
react native start on device
react scripts
delivery app ui kit
deviceinfo
expo add
export figma to react native
how to eject cd windows 10
npm build android
react native video player component
react studio
expo run on android emulator
export a figma
figma export react native
input in figma
install react native on windows
npm facebook sdk
react native modal height
sketch to react native
how to install react native mac
justify content vs align items
react native app windows
ecommerce app ui kit
expo settings
export from figma to sketch
npm run eject
react apk
react native starter app
react why did you update
sketch to react
wawa run
converting figma to react js
custom modal react native
figma for ios
figma input component
how to see react version in cmd
kotlin init
line flex message simulator
mock up figma
raw dna import
react native live chat
react native windows install
run expo on android emulator
figma export to react native
how to mock custom hooks in jest
inputs figma
ios library figma
login react native expo
npm update react
react native installation on windows 10
react native message
simple mobile re up
table view in react native
wawa hot food menu
whatsapp npm
zeplin app
./gradlew app:installdebug -preactnativedevserverport=8081
expo emulator android
facebook sdk for react native
import video react
xcode no such module
backend for react native app
can figma open ai files
code with me android studio
ecommerce app github
export file from figma
figma ios library
icons in react native
initscript
ios figma library
react native icons list
react native on windows
figma import icons
figma to apk
ios icons figma
ios template figma
iphone figma
npm run dev
run android device react native
telegram cache folder android
where can i upload my raw dna
react native
debug in xcode
react native development
ionic app development company
react native development services
Rate this post
Content writer

Let’s create the next big thing together!

Coming together is a beginning. Keeping together is progress. Working together is success.

Let’s talk

Get a custom Proposal

Please fill in your information and your need to get a suitable solution.

    You need to enter your email to download

      Success. Downloading...