An opinionated React Native stack that incorporates TypeScript, Expo Router, TailwindCSS (via Nativewind), and Zustand for state management.
Follow these steps to quickly set up your project:
-
Create a new project using nascript/react-native-tailwind-zustand-boilerplate:
npx degit nascript/react-native-tailwind-zustand-boilerplate my-project
-
Navigate to your project directory and install the dependencies:
cd my-project && yarn install
-
Start your development server:
yarn start
- Expo Router: A file-based router designed for universal React Native apps.
- TypeScript: A strongly typed programming language that enhances JavaScript with better tooling at scale.
- Nativewind: Utilizes Tailwind CSS to create a universal style system for React Native.
- Zustand: A minimal, fast, and scalable state management solution.
Your project directory is organized as follows:
├───app
├───assets
│ └───images
├───components
└───lib
-
app
Directory: This directory contains your route files. For example, if you create a file namedhello.tsx
in theapp
directory, you can navigate to it using theLink
component:<Link href="/hello">Go to Hello</Link>
. For more details, refer to the Expo Router documentation. -
app/_layout.tsx
: This file defines a layout for your screens. Modify this file if you want to include a constant header or footer across your app. -
Splash Screen: Edit the splash screen in
components/loadingscreen.tsx
. To adjust the display duration or make it wait for fonts to load, modifyapp/_layout.tsx
.
Path aliases help in importing files without using long relative paths. The following aliases are set up:
@assets
: Maps to./assets
@app
: Maps to./app
@components
: Maps to./components
@lib
: Maps to./lib
If you modify these aliases, ensure that you update both tsconfig.json
and babel.config.js
, then restart your app using:
sh yarn start -c
By following these guidelines, you'll be able to efficiently navigate and manage your Chai Stack project.