Scribd
Upload
26 views

Expo React Native project

This document provides a step-by-step guide to create an Expo project and set up NativeWind for styling. It includes instructions for initializing the project, configuring Tailwind CSS, and setting up routing with Expo Router. Additionally, it offers troubleshooting tips for common issues encountered during setup.

Uploaded by

liam.xmachina
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
26 views

Expo React Native project

This document provides a step-by-step guide to create an Expo project and set up NativeWind for styling. It includes instructions for initializing the project, configuring Tailwind CSS, and setting up routing with Expo Router. Additionally, it offers troubleshooting tips for common issues encountered during setup.

Uploaded by

liam.xmachina
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

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/

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy