nelsonarguera12 / chai

A simple, opinionated react-native stack with Typescript, Expo-router, Tailwind & Zustand

Chai Stack ☕

This is an opinionated react-native stack with Typescript, Expo Router, Tailwind(Nativewind) & Zustand

🚀 Quickstart

npx degit aviavinav/chai my-project

cd my-project && yarn install

yarn start

🛠️ Tools

• Expo Router: The File-based router for universal React Native apps.

• Typescript: TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.

• Nativewind: NativeWind uses Tailwind CSS as scripting language to create a universal style system for React Native.

• Zustand: A small, fast, and scalable bearbones state management solution.

🪴 How to use

📂 Folder Structure

├───app
├───assets
│   └───images
├───components
└───lib

❓ What & Where

The app directory will contain your routes, for example, if I name a file hello.tsx, I can access it with the Link component like <Link href="/hello">Go to Hello</Link>, See Expo Router docs for more.

The app/_layout.tsx defines a layout for your screens, edit this if you want a constant header.

You can edit the splash screen at components/loadingscreen.tsx. To change the time for which it is showed or make it wait for fonts to be loaded, edit app/_layout.tsx.

🧭 Path Aliases

The path aliases are as follows:

• @assets: ./assets
• @app: ./app
• @components: ./components
• @lib: ./lib

If you edit them make sure to edit both tsconfig.json as well as babel.config.js, and run your app with yarn start -c.