Advise how to configure React Navigation of an existing app with expo

How to / Third Party Tooling
1

Hello I am new to Expo and React Native Development. Already have an existing app without Expo integrated. I want to transform the existing project in an Expo Environment but I am finding it hard how to apply the expo method to register root component. I mean, dont know how to deal registerRootComponent(App); when I don’t have an App root component in my existing project. It is only

 export const registerOnboardingScreens = (queryCache: QueryCache) => {
  Navigation.registerComponent(screenNames.Onboarding.Start, () =>
    ProviderWrapper({
      Component: OnboardingStart,
      queryCache,
    }),
  );

to start the initial screen which actually is the Start component.

And setInitialNavigationRoot(); called at index.js to initiate the navigationRoot

export const setInitialNavigationRoot = () => {
  const initialNavigationHandler = new InitialNavigationHandler();
  const refreshSessionHandler = new RefreshSessionHandler();

  Navigation.events().registerAppLaunchedListener(async () => {
    await initialNavigationHandler.navigateToRoot();
    await refreshSessionHandler.refreshSession();

    SplashScreen.hide();
  });
};

I would very much appreciate any help. I know that the problem lies here but can find the right connections.
Thank you!

2

Hi @gpjetri

It looks to me like you’re using React Native Navigation. I’m not familiar with that routing library, but I suspect it registers the root component under the hood. This gives me the impression that it must be doing something like that.

Based on the installation instructions RNN is not compatible with Expo Go, but you should in theory be able to use it if you build with EAS Build. I didn’t have a good look, but I think you’ll need a config plugin to get it to work.
Alternatively, you could switch to React Navigation which Expo supports out of the box, but I have no idea how much work that would take.
But it depends on what you’re trying to do. It seems it would be simplest for you to switch to the Expo bare workflow.

The way the root component is registered in a managed Expo app is as follows:

package.json has a main entry:

{
  "main": "node_modules/expo/AppEntry.js",
[...]
}

node_modules/expo/AppEntry.js contains the following:

import registerRootComponent from 'expo/build/launch/registerRootComponent';

import App from '../../App';

registerRootComponent(App);

Then in the root of the project (at the same level as package.json is the App.js file which defines a component (which happens to be called App) and exports it. For example:

[...]
function App() {
  return (
    <View style={styles.container}>
      <Text>...</Text>
      <StatusBar style="auto" />
    </View>
  );
}
[...]
export default App;

However…

What are you trying to accomplish?

Your app is currently similar to a “Bare workflow” Expo app. If you want to use something similar to Expo Go to develop your app, try building a Custom Development Client.

I am not an expert on all of the above, but I hope it helps :slight_smile:

3

Thank you very much Wodin!
I want to create an Expo managed project out of an existing project in React Native that didn’t use Expo at all. And of course use Expo Go app to develop and visualise the project.

Already created a new Repositiory supported with Expo and tried to copy the old project into the new repository. This was officially advised in the Expo Docs. A bit surprising for me that this is the only way but after some good reasearch it turned out to be the best approach.

The issue I am facing is that I don’t have an App.js in my old project or some main component App.

I have my index file from where setInitialNavigationRoot is called and I believe thats how the project starts by initiating React Native Navigation.

What I want to know is how can I configure RNN with Expo . It seems that you suggested that there is no actual real way to do this. But to try change the whole strategy and build React Navigation supported for expo. Which means to do a lot of changes in the app. If this is true and there is no simple way to configure RNN with expo without making much changes then I am very clear.

My aim is to integrate Bare workflow expo app out the existing React Native project without expo integrated.

Thank you very much for your response!

4

Hi

A few months ago the answer would have been “You cannot use RNN with Expo unless you use the Bare workflow”

These days (with EAS) Expo’s tooling is much more powerful. Unfortunately things are more complicated as a result. Also, EAS is still in preview, so a lot of the documentation still talks about the managed workflow vs. the bare workflow when with EAS there is much less difference between those.

RNN is not compatible with Expo Go. However you can do basically the same thing with a Custom Dev Client. Expo Go has a predefined set of native code included and you cannot change that. A custom dev client is like Expo Go, except that instead of the predefined set of native code it uses whatever native code is needed by your app’s dependencies.

So, if you want to stick with RNN (and of course I would completely understand if you want to do that instead of ripping it out and replacing it with React Navigation) then you cannot use Expo Go, but you should still be able to use a Custom Dev Client.

Assuming you want to use a Custom Dev Client (to give you the Expo Go-like experience), there are two options:

  1. “Managed” workflow
  • You do not have android and ios subdirectories in your project.
  • You would need a config plugin to tell Expo how to do whatever npx rnn-link does in a normal react native app.
  1. Bare workflow
  • You do have android and ios subdirectories in your project and you already have RNN correctly installed.
  • I think this should basically just work.

About App.js/index.js etc.:

Expo does not require App.js. In fact, if you use EAS to build a “managed” Expo app with expo-dev-client installed then what it does on the build server is it runs expo prebuild before starting the actual build. One of the things this does is it removes the “main” entry from package.json and creates an index.js at the top level (same location as package.json) that basically just imports your App.js and calls registerRootComponent().

So I think your index.js should be fine and you should not need to worry about App.js at all.
You are already asking RNN to do the registering, so I don’t think you need to call Expo’s registerRootComponent().

So I think the best way forward would be to install expo-dev-client and try building your app using eas build (or eas build --local), like an Expo Bare Workflow app.

That may be good enough.

If you want something like the Managed Workflow you’ll need to make sure you do not have any custom changes in your android/ios directories, then remove those directories, and you’ll need a config plugin for handling the RNN installation. But that can come later.

As I said this is all a bit complicated, especially at the moment because Config Plugins are new. Ideally RNN will write a config plugin so you can just install it like any other dependency, as long as you build with EAS instead of expo build.

I hope that clarifies things, but I’m not sure if I’ve explained things well enough.

5

Thank you very much Wodin!

You help me a lot to understand and get an overall insight of my current conditions of my project and how I can proceed.

I appreciate it very much.
Wish you a good weekend ahead!
Gerild

1 Like
6

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.