{"id":11223,"date":"2022-05-06T10:49:00","date_gmt":"2022-05-06T08:49:00","guid":{"rendered":"https:\/\/pagepro.co\/blog\/?p=11223"},"modified":"2024-09-20T15:19:47","modified_gmt":"2024-09-20T13:19:47","slug":"how-to-quit-expo-app-ios-android","status":"publish","type":"post","link":"https:\/\/pagepro.co\/blog\/how-to-quit-expo-app-ios-android\/","title":{"rendered":"How to Quit Expo App Completely From iOS and Android?"},"content":{"rendered":"\n

Introduction<\/h2>\n\n\n\n

Expo is a fantastic tool to make an app in React Native<\/a>. <\/p>\n\n\n\n

As an Expo agency, we find developing mobile applications in a blink of an eye, without additional settings and without wasting time on configuration, as one of its main benefits.<\/p>\n\n\n\n

It is a very good tool to prepare both the MVP<\/a> or just very basic app. <\/p>\n\n\n\n

But sometimes we have to do something more complicated which isn’t supported by Expo – like writing our own native module or using a package. <\/p>\n\n\n\n

The natural thing, in this case, is eject from Expo<\/a>, but sometimes we don\u2019t want to use Expo anymore at all – don\u2019t use their modules anymore or want our app weighs a little less. <\/p>\n\n\n\n

In this tutorial, I will show you how to quit the Expo app<\/a> totally and have a plain Vanilla React Native app.<\/p>\n\n\n\n

Starting from the beginning<\/h2>\n\n\n\n

If you still have a managed workflow in your React Native Expo app, the first step should be eject to bare workflow. <\/p>\n\n\n\n

To do it you have to run expo eject.<\/em><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Now you have access to the native Android and iOS directories. <\/p>\n\n\n\n

Starting from SDK 43, in our Expo React Native project we have got Expo modules<\/strong>. <\/p>\n\n\n\n

It includes only a minimal set of packages that are needed in nearly every app and autolinking infrastructure that other Expo SDK packages are built with. <\/p>\n\n\n\n

This allows you to add any other Expo module from the SDK.

Mind that removing Expo completely from the project equals removing expo modules<\/strong> and all references in native iOS\/Android files.

Let\u2019s start from package.json<\/strong>. <\/p>\n\n\n\n

If we are using any of the Expo packages, we should find some alternative to it. <\/p>\n\n\n\n

In our project we are using an expo-linear-gradient<\/strong> package. <\/p>\n\n\n\n

After removing Expo modules from the project we can\u2019t use it anymore. <\/p>\n\n\n\n

Fortunately there is a react-native-linear-gradient<\/strong> package which doesn’t need Expo support.<\/p>\n\n\n\n

So if we find alternatives, install it and update the code. The next step will be removing Expo and all Expo packages from package.json. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n


Then you should remove .expo directiories<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

If you finished with removing, as a next step delete babel-preset-expo<\/strong> in the babel.config.js <\/strong>and clear a metro.config.js<\/strong>

In this step we need to add metro-react-native-babel-preset <\/strong>to our project.<\/p>\n\n\n\n

Add it by using npm\/yarn<\/strong> and then update the babel.config<\/strong> with it.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Last step in JavaScript part is change in index.js<\/strong><\/p>\n\n\n\n

<\/p>\n\n\n\n

Kickstart your react project with top developers<\/p>

SCHEDULE A CALL WITH OUR EXPERT. <\/a><\/div><\/div><\/div>\n\n\n\n

Removing Expo from iOS<\/h2>\n\n\n\n

After ejecting our app, the folder structure appears in our iOS directory. <\/p>\n\n\n\n

It contains all the files used to run\/compile\/build<\/strong> app on our iOS devices. <\/p>\n\n\n\n

When we create an app with Expo – it also has references to that native files. <\/p>\n\n\n\n

After removing the Expo<\/strong> package, we should also remove all references from native code. <\/p>\n\n\n\n

These files are AppDelegate.h, AppDelegate.m <\/strong>and Podfile. <\/strong>Let\u2019s do it according to the code posted below.<\/p>\n\n\n\n

AppDelegate.h<\/span><\/h3>\n\n\n\n
\"\"<\/figure>\n\n\n\n

AppDelegate.m<\/span><\/h3>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n


<\/strong>Now, after that 2 files, we have to make some updates using XCode. <\/p>\n\n\n\n

We need to remove Expo.plist<\/strong> reference. If you are a Macbook M1<\/strong> user you also have to add arm64 <\/strong>to the excluded architectures.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

(Remove that Expo.plist by clicking minus)<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

(Add arm64 to Debug and Release)
<\/strong><\/p>\n\n\n\n

Podfile<\/span><\/h3>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n


<\/strong>After updating Podfile <\/strong>remove Pods directory from iOS directory and install Pods again.<\/p>\n\n\n\n

rm -rf .\/ios\/Pods && pod install<\/span><\/h3>\n\n\n\n

Last step to run our iOS app is generating a main.jsbundle <\/strong>file with bundle which is served to our app by Metro packager. <\/p>\n\n\n\n

To achieve that we need to run our xCode and remove references to old main.jsbundle<\/strong> (which doesn’t exist but our xCode reference to it anyway).<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n


Then we need to add a script to our package.json<\/strong> which generates a new valid bundle.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

yarn run build:ios<\/span><\/h3>\n\n\n\n

If everything will be ok you should see a new file in the iOS directory.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

It was the last step. Try running a command to run your app – yarn run ios<\/strong><\/p>\n\n\n\n

Congratulations! You are free from Expo on iOS. <\/p>\n\n\n\n

It’s time for Android now.<\/p>\n\n\n\n