React Native Expo Starter

Server

For server, refer: cloudflare-workers-d1-hono-drizzzle-better-auth-template

History set-ups

Starter 1.0

Taking [https://github.com/qinsong77/RN-Expo-Starter/tree/1.0.0] more with

• Tailwindcss by nativewind
• Authentication
• i18n with i18next
• Universal shadcn/ui for React Native with react-native-reusables
• etc...

Gluestack v3, better-auth

Taking gluestack-better-auth more with:

• UI component:gluestack v2
• Auth: better-auth

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
• Integrate with lingui for i18n

E2E test

• Maestro TBD
• Detox

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

• Using https://docs.expo.dev/develop/development-builds/introduction/ expo-dev-client for production app
  • Create a development build
• Don't wrap your whole app in SafeAreaView, instead apply the styles to content inside your screens, from: reactnavigation-summary

Used Libraries

• 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
• Expo UI
• uniwind The fastest Tailwind bindings for React Native
  • heroui-native

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