React Native Expo Starter

Features

• Base on Expo
• Tailwindcss by nativewind
• i18n
• Dark theme
• Jest & React Native Testing Library
• authentication
  • sign in, sign up
  • process as guest
  • protect route and action
  • Supabase - TBD

How to update Expo and react-native

Update React Native rely on Expo, check the doc here: Upgrade Expo SDK

1. bun install expo@latest or bun install expo@next
2. bunx expo install --fix (bunx = npx), or just bunx expo install expo@^52.0.0 --fix
3. check the Changelog
4. Check for any possible known issues: bunx expo-doctor@latest

todo

• GitHub action

E2E test

• Maestro TBD

test provider & mock

eg:

jest.mock('@react-navigation/native', () => {
  return {
    ...jest.requireActual('@react-navigation/native'),
    useNavigation: jest.fn(),
  }
})

• React Native Testing Library (RNTL) Cookbook

Found issues

General Guidelines

Dep

install, prefer using this for install expo related:

bunx expo install react-native-webview

Notes

• Don't wrap your whole app in SafeAreaView, instead apply the styles to content inside your screens, from: reactnavigation-summary

Used Library

• sonner-native toast component for React Native.
• lucide-react-native

Animation

• reanimated
• lottie
  • resource-lottiefiles

Resource

• splash-screen

UI components

build the UI components inspired by shadcn/ui, refer from:

• react-native-reusables Universal shadcn/ui for React Native featuring a focused collection of components - Crafted with NativeWind v4 and accessibility in mind.
• nativecn-ui

Other choices

• gluestack-ui React & React Native Components & Patterns, seems good.
• style system and ui library tamagui
• react-native-ui-lib

Chore

• install ts-node just to support read TypeScript jest configuration.

Step by steps

1. pnpm dlx create-expo-stack rn-expo-starter for init commit, base on create-expo-stack.
2. Perfect project init setting
3. Check the commit
4. Utilize shadcn/ui theme and components

local build

1. npm install -g eas-cli
2. eas login
3. config esa.json, refer: eas.json
4. eas build --platform android --profile preview --local

• eas build --profile development-simulator --platform ios build for ios simulator without expo go for canny expo sdk

Refers

• Ignite - the battle-tested React Native boilerplate