Bandi 🐶

This is fullstack React Native opinionated boilerplate with Expo-router, Tamagui, Recoil and Next.js supporting Android, iOS and Web based on turbo repo

Supported platforms

• Android (Expo 49)
• iOS (Expo 49)
• Web (Next.js 13.4.10)

Quick start

npx degit mononoke-choi/bandi my-project

cd my-project && yarn install
 
cd apps/native && yarn ios:build:local
 
yarn dev

It uses expo-dev-client. create your own Development Client first

Tech Stack

• Turbo Repo
• TypeScript
• React Native
• React Native For Web
• React
• Recoil
• Expo
• Expo Router
• MMKVStorage
• FlashList (Virtualized list for Native)
• Tanstack Virtual (Virtualized list for Web)
• React-native-swiper (carousel for Native)
• Embla-carousel-react (carousel for Web)
• Detox
• Tamagui
• Next.js
• Swagger
• Solito
• Orval
• Svgr

What you get more

• Mono repository support
• ESLint and Prettier configurations
• Use Route handler of Next.js as an API layer of React Native
• Send Slack message using Route handler when your Expo Application Services (EAS) build or submission has completed
• Recoil sync with MMKV Storage for State persistence
• Generate REST API fetchers based on openAPI specification generated by Swagger written in Route handler
• File system-based routing of Native app like Next.js
• Real world examples

Folder Structure

├───apps
│   └───native
│   └───web
├───packages
│   └───api
│   └───eslint-config-custom
│   └───tsconfig
│   └───ui

[Root] Available commands

In general, root package.json is used to manage mono repository

• postinstall: Install missing TypeScript typings for dependencies in your package.json
• dev: Starts the development server metro (native) and webpack (web)
• build: build Next.js app for production
• clean: Clear build outputs
• postclean: Install after running clean script
• lint: Lints the code using ESLint
• prettier: Checks the code for proper formatting
• check-deps: Check your unmatched dependency versions

More Details

• Native
• Web
• Api