Kenny83
Kenny83

Reputation: 914

React Native: Convert an Expo bare project to a pure react native app

TL;DR

Similar questions have been asked before on SO (such as Convert Expo project to Original React Native project, Commands to use after converting from expo to react-native-cli, and Expo to react native init) but none of them explain how to completely remove all Expo modules and dependencies from my project, so that I end up with a pure React Native app (the same as if I had run react-native init... in the first place).

So is it possible to remove all of this extra crap that I never asked for or expected to be installed, with one simple command? MTIA! :-)

Background

Basically I got into this mess by ejecting from a managed Expo project, then customising the android folder a lot before realising that my build/install times were ludicrously slow.

So to fix this, I ran yarn global add depcheck and depcheck, which suggested that I could/should remove all of the following packages (the most seemingly-important ones are marked with an asterisk):

expo-updates*
filtrex
firebase-admin
lodash
mathjs
moment
native-base
nodemailer
react-native-android-location-enabler
react-native-credit-card-input
react-native-document-picker
react-native-fast-image
react-native-geolocation-service
react-native-image-crop-picker
react-native-js-bottom-sheet
react-native-reanimated
react-native-signature-capture
react-native-unimodules*
react-native-web
react-timer-mixin
recyclerlistview
shortid
stripe-client
styled-system
@babel/core
@react-native-community/eslint-config
babel-jest
jest
prettier
react-test-renderer

So I blindly ran yarn remove ... on all of those packages, and now I get a ton of errors on attempting to build. I won't list them here since it's obvious that they're mostly (if not entirely) related to the expo-updates and react-native-unimodules packages marked above.

I'm not explicitly using anything Expo-related in my code, so this should be a cake walk IMO, but is proving to be quite difficult!

So how can I remove this extra cruft properly? Do I need to start fresh with react-native init? MTIA :-)

Upvotes: 1

Views: 2359

Answers (2)

Kenny83
Kenny83

Reputation: 914

I have finally acheived this almost 6 hours later by:

  1. Creating a new React Native app from scratch (react-native init MyAppName).
  2. Finding replacements for all the Expo modules that were being used (not by me directly, but by other packages).
  3. Reconfiguring my Firebase project to play nice with the app (particularly the SHA keys).
  4. Uninstalling the old app, installing the new and clearing caches for the "new" app (I say "new" because I didn't expect this step to be necessary, but somehow, for some stupid reason, Android was trying to use the old, cached app files).

The last step was absolutely crucial; it took me about 2 hours of head scratching and screaming at the PC before I finally stumbled upon this: React Native white blank screen issue. Many thanks to @DiwakarPrasad for this absolute gem of knowledge!

Upvotes: 0

Muhammed Yasir MT
Muhammed Yasir MT

Reputation: 2014

Ejected expo projects needs unimodules to function properly.so i don't think there is a simple command that does everything you asked for. You can follow some steps to get it working.

  1. Branch out for safety.
  2. Eject, check if it is working and commit.
  3. Delete all except .git folder in the project(also can keep a copy of .git somewhere else if project is not stored remotely).
  4. Do initiate a bare react-native project to the same folder(have to do it from parent folder with same project name as the current project folder name, it will prompt the folder is not empty. choose to continue).
  5. Discard the deletion of the files with your Codes.
  6. Add packages that use in project(for expo packages, find replacement packages. Most probably will be mentioned in expo documentation).
  7. Run Project, (might get some missing dependencies.if so, add and rerun)

Upvotes: 2

Related Questions