Export a React Native app to Expo

Hi,

I currently have an app in react native which use a build for android and a build for ios. This app use NFC tools. I want to export it to Expo, because this will give me only one JS code, and it will be easier to correct my app if bugs appear. (Because norms about NFC are differents on android and ios).

I saw a “exp convert” command but it do not works anymore. How can I export my app to Expo and get only one single code, which will be built for android and ios with Expo tools?

!

If you wan’t to use expo client and have only javascript/typescript code in your repo you would need to use managed workflow and currently you can’t use there any third party native dependencies (anything that requires react-native link)

If you want to use expo unimodules in you current project you can follow instructions here GitHub - unimodules/react-native-unimodules: Core Unimodule infrastructure and a collection of Unimodules and interfaces that are commonly depended on by other Unimodules

1 Like

Hi

In order to use Expo’s “managed workflow” all of your dependencies need to be supported by Expo. As you can see here under the API Reference or via the Search bar, Expo does not currently support NFC. Also, NFC support requires some native code, so it won’t just automatically work with Expo’s managed workflow. I have not checked the other dependencies, but anyway, NFC support is enough to prevent you from using the managed workflow.

You could try creating an Expo “bare workflow” app, which is basically a plain React Native app with access to many of the Expo libraries. I have not personally tried the Bare Workflow before, but I think there would be two ways to do it.

  1. Follow @wkozyra’s link; or
  2. Use expo init to create a bare app and then copy the code from your existing app into the bare app and install any extra dependencies that you need, like react-native-nfc-manager.

I think both of these options should result in basically the same thing.

I’m not sure if it will really help you, though. I’m not 100% clear on what problem you’re trying to solve. Are you saying you currently have completely separate JavaScript code for Android and iOS? If so, that’s not a problem with React Native, as such, so you wouldn’t need Expo in order to fix it.

Could you clarify what the exact problem is?

1 Like

Hi,

It helped me a lot ! Yesterday i was blocking on another error.
My initial problem is for the compilation/exportation. I was asked to have one code because currently, if there is a problem on the android application, there is not inevitably an error on the IOS app (and they say me there is some differences between android and ios about NFC) . So i started to use Expo for the simplicity of building and compilation. (I’m trying to be as clear as possible)

I did a new bare app and copied my code.
I installed all dependencies one after one (with the errors displayed in the simulator)
Now i got a new prob : Invariant Violation : Module AppRegistry is not a callable module. (calling run application)
Capture d’écran 2020-01-08 à 11.32.13

hmmm… weird.

I have not actually tried the Bare Workflow myself, so not sure how much help I can be :sweat:

A newly created minimal bare app has this in app.json (As far as I understand it app.json is not used during the bare workflow but is used to set things up in the iOS/Android project files, so I suspect this is still relevant info):

{
  "name": "blah",
  "displayName": "blah",
  "expo": {
    "name": "blah",
    "slug": "expo-template-bare",
    "entryPoint": "node_modules/expo/AppEntry.js",
[...]
  }
}

i.e. it expects to start your app from node_modules/expo/AppEntry.js.
That file imports your actual app code from App.js in the project’s root directory and also imports registerRootComponent from node_modules/expo/build/launch/registerRootComponent.js.
That file contains the following:

import { AppRegistry } from 'react-native';
import withExpoRoot from './withExpoRoot';
export default function registerRootComponent(component) {
    AppRegistry.registerComponent('main', () => withExpoRoot(component));
}
//# sourceMappingURL=registerRootComponent.js.map

So it does the whole AppRegistry thing and in theory you don’t need to reference AppRegistry in your own code.

Of course I could be mistaken, but I hope the above helps.

I decided to start a new empty project and recreate one after one all of my pages because I’m blocked on the same errors in a row. (This one and “native module cannot be null”). Currently I changed the entry point and disabled the appRegistry part, and I’ve the “native module cannot be null error”.

The problem is my actual application cannot compile anymore due to a too old code, so I’ve to do a new one which can. And there is two differents libraries for IOS and Android about NFC. Is there only one library which works for both on Expo?

I think restart an application is better than take the old one and try to solve every errors one after one, due to depreciated code.

Yes you might be right that starting from a minimal working app and porting stuff to it from the old app might be easier than fixing an app with lots of problems caused by old code.

What two libraries are you using for NFC support? Your package.json from your initial post only seemed to refer to react-native-nfc-manager, which seems to support both iOS and Android with the same API. But I’ve never used NFC functionality in any of my apps…

1 Like

I only saw the react-native-nfc-manager package so I don’t know why they said that, I’m searching for.

I have been dealing with similar problems for a few days ago.

Firstly try to run GitHub - revtel/react-native-nfc-manager: React Native NFC module for Android & iOS examples.

if its works then You should start new clean project with this instructions;
1-) run npx react-native init {yourprojectname} ,
2-) npm i --save react-native-nfc-manager (if React native version >0.6 you should not use the link command )
3-)you may see some problems like unable to load script from assets index.android.bundle this is not about linking to native code.

summarize : I think NFC isn’t supported by Expo yet. i’ve read some things about it on expo forum. you can confirim with searching “expo NFC support” keywords.

because of that you should use “React Native CLI” tools and follow react-native-nfc-manager github instructions.

While you can use react-native init, you can also use Expo’s Bare workflow. Both of them end up with a React Native project that you can install native modules in. So step one can be replaced with expo init and choosing one of the “bare” options. Step two would be the same in either case (or of course use yarn if you prefer).

Yes, Expo does not currently support NFC, which is why the Bare workflow would be needed (or a normal React Native project). But upvote this feature request if you have not yet done so.

1 Like

I saw the problem with Expo and NFC. I’m blocked because there is no IOS and Android file to setup this command : cd ios && pod install
The NFC seems like working with Android.
I got this problem