Welcome to your Expo app 👋

This is an Expo project created with create-expo-app.

Get started

1. Install dependencies

   npm install

2. Start the app

   npx expo start

In the output, you'll find options to open the app in a

• development build
• Android emulator
• iOS simulator
• Expo Go, a limited sandbox for trying out app development with Expo

You can start developing by editing the files inside the app directory. This project uses file-based routing.

Get a fresh project

When you're ready, run:

npm run reset-project

This command will move the starter code to the app-example directory and create a blank app directory where you can start developing.

Other setup steps

• To set up ESLint for linting, run npx expo lint, or follow our guide on "Using ESLint and Prettier"
• If you'd like to set up unit testing, follow our guide on "Unit Testing with Jest"
• Learn more about the TypeScript setup in this template in our guide on "Using TypeScript"

Learn more

To learn more about developing your project with Expo, look at the following resources:

• Expo documentation: Learn fundamentals, or go into advanced topics with our guides.
• Learn Expo tutorial: Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.

Notes: Nativewind className support

• className works out of the box on React Native core components (e.g., View, Text, Pressable, FlatList, TouchableOpacity).
• Some third-party components do not accept className directly (e.g., SafeAreaView from react-native-safe-area-context, icon components).
• If a component does not support className, either:
  • Wrap it with styled() from nativewind and keep using className, or
  • Use the style prop directly for that component.

Example: wrapping third-party components with styled()

import { Ionicons } from "@expo/vector-icons";
import { SafeAreaView } from "react-native-safe-area-context";
import { styled } from "nativewind";

const StyledSafeAreaView = styled(SafeAreaView);
const StyledIonicons = styled(Ionicons);

export function Screen() {
  return (
    <StyledSafeAreaView className="flex-1 bg-white" edges={["top"]}>
      <StyledIonicons name="grid" size={20} className="text-gray-900" />
    </StyledSafeAreaView>
  );
}

Example: using style when you do not want to wrap

import { SafeAreaView } from "react-native-safe-area-context";

export function Screen() {
  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: "#ffffff" }}>{/* content */}</SafeAreaView>
  );
}

Join the community

Join our community of developers creating universal apps.

• Expo on GitHub: View our open source platform and contribute.
• Discord community: Chat with Expo users and ask questions.