Clean architecture starter for React Native with TailwindCSS, Jest, TypeScript.
All the tools you need to build your mobile application.
Features
⚡️ Expo 47.0.9⚛️ React 18.1.0⛑ TypeScript✨ TailwindCSS 3.2.4 - CssInJs for component styling✨ NativeWind 2.0.11 - Suporte by TailwindCSS in ReactNative📏 TSLint — To find and fix problems in your code💖 Prettier — Code Formatter for consistent style⚙️ EditorConfig - Consistent coding styles across editors and IDEs🗂 Path Mapping — Import components or images using the~/
prefix- ‽ Either Error Handler - For error handling. (Either is designed to hold either a left or a right value but never both).
Quick Start
The best way to start with this template is using create-expo-app.
# npx
npx create-expo-app --template https://github.com/yazaldefilimonepinto/clean-arch-react-native-starter
Development
To start the project locally, run:
npm start
our
yarn start
Open http://localhost:{port}
with your browser to see the result or scan qr code or open in device machine.
Requirements
- Node.js >= 12.22.0
- npm our yarn
Directory Structure
-
public
— Static assets such as images
-
src
— Application source code, including screens, components, scripts.
-
tests
— Application test source code.
Scripts
yarn/npm android
yarn/npm ios
yarn/npm start
yarn/npm test
yarn/npm test:watch
yarn/npm test:ci
Path Mapping
TypeScript are pre-configured with custom path mappings. To import components or files, use the ~/
prefix.
import { Button } from '~/infrastructure/ui/components/button';
// To import images or other files from the public folder
import avatar from '~/public/avatar.png';