Create Expo project
Create a file directory. For this example, name it my-app. Go inside that directory then type the
code below and press enter.
npx create-expo-app@latest ./
Type y to proceed creating the project.
Once the installation is complete. Run the project by typing the code below.
npx expo start
Note: If an error occurred after running the project such as this. EMFILE: Too many file
watches. Just delete npm modules directory and reinstall it again by typing npx
install.
Inside the created project directory, there is a file named app.json. This file contains all the expo
configuration that will be used in this project.
Also in this project, there is a directory called app1. This directory contains the router
functionality.
Now to start working fresh2 on the created project. Type the code below. After running the
code, look for the app-example directory and delete it.
npm run reset-project
References:
1
https://docs.expo.dev/get-started/start-developing/#file-structure
2
https://docs.expo.dev/get-started/next-steps/#reset-your-project
Setting up NativeWind in Expo project
It is a good practice to check NativeWind website on how to install it to your Expo project 1. By
the time of this documentation. Below is step by step process to set up nativewind in your Expo
project.
1. Install NativeWind and its peer dependencies.
npx expo install nativewind tailwindcss react-native-reanimated react-
native-safe-area-context
2. 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.
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
// NOTE: Update this to include the paths to all of your component files.
content: ["./app/**/*.{js,jsx,ts,tsx}"],
presets: [require("nativewind/preset")],
theme: {
extend: {},
},
plugins: [],
}
Create a CSS file and add the Tailwind directives
global.css
@tailwind base;
@tailwind components;
@tailwind utilities;
3. Add the Babel preset
babel.config.js
module.exports = function (api) {
api.cache(true);
return {
presets: [
["babel-preset-expo", { jsxImportSource: "nativewind" }],
"nativewind/babel",
],
};
};
4. Import CSS file
app/_layout.js
import { Slot } from "expo-router";
// Import your global CSS file
import "../global.css";
export default Slot;
5. TypeScript (optional)
Create a new nativewind-env.d.ts file and add a triple-slashed directive referencing the
types.
/// <reference types="nativewind/types" />
References:
1
https://www.nativewind.dev/getting-started/expo-router
https://www.nativewind.dev/getting-started/typescript
Setting up Project Routes
Expo router1 has a comprehensive guide and information about routing2 and navigation.
One of the best features in using Expo in React Native is Expo Router. It is a file-based router
where it allows our React Native application to be organize by making each page or route match
a specific file in your project, which making it easier to create and manage pages.
References:
1
https://docs.expo.dev/router/introduction/
2
https://docs.expo.dev/develop/file-based-routing/
