#Expo

Expo is a popular framework for building React Native applications. Re.Pack provides a plugin to integrate with Expo managed projects, allowing you to leverage Re.Pack's bundling capabilities while still using Expo's features.

Using Expo with Re.Pack requires some setup - this guide will show you how to get started with Expo in your project.

#Installation

#1. Install Expo Package

Install the Expo package in your project:

npm install expo

#2. Add Re.Pack Integration

First, install the official Re.Pack Expo plugin:

npm install -D @callstack/repack-plugin-expo

Then, add the plugin to your configuration file:

const { ExpoPlugin } = require("@callstack/repack-plugin-expo");

module.exports = {
  plugins: [
    new ExpoPlugin(),
  ]
};

#3. Modify CNG Configuration

Modify your app.json or app.config.js to include the following configuration:

{
  // ...
  "plugins": [
    "@callstack/repack-plugin-expo/plugin"
  ]
}

#Usage

After completing the setup, you can start using Re.Pack in your Expo application.

#Generating the Development Build

To generate a development build of your Expo application, run the following command:

npm expo prebuild

#Development Workflow

After running this command, you can develop using the default Re.Pack workflow.

#Expo Router Support

@callstack/repack-plugin-expo has built-in support for Expo Router.

#1. Install Expo Router

If you haven't already, install the Expo Router and its dependencies:

npx expo install expo-constants expo-router expo-linking expo-status-bar react-native-screens react-native-safe-area-context

#2. Modify CNG Configuration

Add expo-router to the plugins array in your app.json or app.config.js along with the Re.Pack plugin:

{
  // ...
  "plugins": [
    "expo-router",
    "@callstack/repack-plugin-expo/plugin"
  ]
}

#3. Modify Re.Pack Integration

Modify the plugin configuration in your rspack.config.cjs to enable the router support:

const { ExpoPlugin } = require("@callstack/repack-plugin-expo");

module.exports = {
  plugins: [
    new ExpoPlugin({ router: true }),
  ]
};

You can also customize the base URL and root directory for the router:

const { ExpoPlugin } = require("@callstack/repack-plugin-expo");

module.exports = {
  plugins: [
    new ExpoPlugin({ 
      router: { baseUrl: '/some-base-url', root: './src/screens' }
    }),
  ]
};

#4. Change Your Application Entry Point

Change your application entry point to use the router's ExpoRoot component. Update your App.js as follows:

import { ExpoRoot } from 'expo-router';
import { ctx } from 'expo-router/_ctx';

export default function Application() {
  return <ExpoRoot context={ctx} />;
}

#Limitations

When using Re.Pack with Expo managed projects, there are some limitations to be aware of:

• Expo CLI: Expo commands that rely on Metro bundler (like expo start, expo run android and expo run ios) will not work as expected. Use React Native CLI commands instead (e.g., npx react-native start, npx react-native run-android, npx react-native run-ios).
• Expo Go: Re.Pack does not support running in Expo Go. You will need to do a development build to test your application.
• EAS: Expo EAS doesn't allow custom bundlers, so you cannot use Re.Pack with EAS Build at the moment.
• Expo Updates: Re.Pack does not support over-the-air updates with Expo Updates. You can use Remote Chunks though (see code splitting for more details).
• Type-safe routes: Re.Pack doesn't automatically generate type-safe .d.ts files for Expo Router.
• Experimental RSC, server actions or API routes: These features are not supported in Expo managed projects with Re.Pack.