DEV Community

Matt Ruiz
Matt Ruiz

Posted on

Using React Navigation instead of Expo Router

Hola hola,

If you're looking to use React Navigation instead of Expo Router, then this quick guide should be helpful.

There are two steps:

  1. Update the main prop of your package.json to point to your new entry file
{
  "name": "pcexpo",
  "main": "./src/App.tsx",
  "version": "1.0.0",
  ...
Enter fullscreen mode Exit fullscreen mode

2.Export your entry file using the registerRootComponent provided by Expo.

import React from 'react';
import { registerRootComponent } from 'expo';
import { View, Text, StyleSheet } from 'react-native';

export const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Welcome to my App!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 20,
    fontWeight: 'bold',
  },
});

export default registerRootComponent(App);

Enter fullscreen mode Exit fullscreen mode

That should be all you need!

Heroku

Deploy with ease. Manage efficiently. Scale faster.

Leave the infrastructure headaches to us, while you focus on pushing boundaries, realizing your vision, and making a lasting impression on your users.

Get Started

Top comments (0)

Image of DataStax

AI Agents Made Easy with Langflow

Connect models, vector stores, memory and other AI building blocks with the click of a button to build and deploy AI-powered agents.

Get started for free

👋 Kindness is contagious

If this article connected with you, consider tapping ❤️ or leaving a brief comment to share your thoughts!

Okay