React-Native Expo Starter

Features

• Tailwindcss by nativewind
• i18n
• Dark theme
• Jest & React Native Testing Librar
• authentication
  • sign in, sign up
  • process as guest
  • protect route and action

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

How to update Expo and react-native

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)
3. check the Changelog
4. Check for any possible known issues: bunx expo-doctor@latest

Other choices

• style system and ui library tamagui
• react-native-ui-lib

General Guidelines

动画

• 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

Notes

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

Chore

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

todo

• useProtectedAction test failed
• Github action

E2E test

test provider & mock

eg:

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

Supabase