Skip to main content

Expo Router

1. Create the project​

Create the project with the Expo CLI

npx create-expo-app@latest -e with-router

You will need to install nativewind and it's peer dependency tailwindcss.

yarn add nativewind
yarn add --dev tailwindcss@3.3.2

2. Upgrade to Expo SDK 49​

npm install expo@^49.0.0 or yarn add expo@^49.0.0
npx expo install --fix

3. Create your first route​

npm start

Open your app on any device and follow the onscreen instructions.

4. Setup Tailwind CSS​

Run npx tailwindcss init to create a tailwind.config.js file

Add the paths to all of your component files in your tailwind.config.js file. Remember to replace <custom directory> with the actual name of your directory e.g. screens.

This is the same as follow the Using PostCSS instructions: https://tailwindcss.com/docs/installation/using-postcss

// tailwind.config.js

module.exports = {
- content: [],
+ content: ["./app/**/*.{js,jsx,ts,tsx}", "./<custom directory>/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}
// global.css
@tailwind base;
@tailwind components;
@tailwind utilities;
// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
  },
};

5. Add the Babel plugin​

Modify your babel.config.js

// babel.config.js
module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: [
      "@babel/plugin-proposal-export-namespace-from",
      "react-native-reanimated/plugin",
      require.resolve("expo-router/babel"),
+     "nativewind/babel",
    ],
  };
};

6. Enable CSS Support in Expo's Metro Config​

// metro.config.js
const { getDefaultConfig } = require("expo/metro-config");

const config = getDefaultConfig(__dirname, {
  isCSSEnabled: true,
});

module.exports = config;

7. Create a app/_layout file​

import { Slot } from "expo-router";

import "../global.css";

export default function () {
  return <Slot />;
}

Thats it 🎉​

Start writing code!

import { StatusBar } from 'expo-status-bar';
import React from 'react';
- import { StyleSheet, Text, View } from 'react-native';
+ import { Text, View } from 'react-native';

export default function App() {
  return (
-   <View style={styles.container}>
+   <View className="flex-1 items-center justify-center bg-white">
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

- const styles = StyleSheet.create({
-   container: {
-     flex: 1,
-     backgroundColor: '#fff',
-     alignItems: 'center',
-     justifyContent: 'center',
-   },
- });