Expo React Native + TypeScript Development Rules

Project Stack

• Framework: Expo (React Native)
• Language: TypeScript
• Navigation: Expo Router or React Navigation
• State Management: Prefer React Context or Zustand
• Styling: React Native StyleSheet or Tailwind (NativeWind)

File Structure

src/ components/ screens/ hooks/ services/ utils/ types/ constants/

Rules: - Components must live in components/ - Screens must live in screens/ - Business logic should be inside services/ - Reusable hooks should be inside hooks/ - Type definitions must live in types/

TypeScript Rules

Always follow strict TypeScript rules.

Required: - Avoid any - Prefer type or interface - Always type props - Always type API responses

Example:

type User = {  id: string  name: string  email: string}

Component example:

type Props = {  title: string}
export function Header({ title }: Props) {  return <Text>{title}</Text>}

Component Rules

Preferred component style:

• Functional components only
• Use hooks
• Avoid class components

Example:

export const Button = () => {  return <Pressable></Pressable>}

Rules: - One component per file - Component name must match file name

Example:

components/Button.tsx

Styling Rules

Preferred order:

1. StyleSheet
2. NativeWind (if enabled)

Example:

const styles = StyleSheet.create({  container: {    flex: 1,    padding: 16  }})

Rules: - Do not inline large styles - Shared styles go in /styles

Hooks Rules

Custom hooks must start with use.

Example:

useAuth.ts
useUser.ts
useLocation.ts

Example implementation:

export function useUser() {  const [user, setUser] = useState<User | null>(null)  return { user, setUser }}

API Rules

All API calls must live in:

services/api/

Example:

services/api/userService.ts

Example:

export async function getUsers(): Promise<User[]> {  const res = await fetch("/users")  return res.json()}

Rules: - No API calls inside UI components - Always type API responses

Performance Rules

Always:

• Use React.memo for heavy components
• Use useCallback for handlers
• Use useMemo for computed values
• Avoid unnecessary re-renders

Expo Rules

Always prefer Expo APIs:

Examples:

expo-location
expo-camera
expo-secure-store
expo-image-picker

Rules: - Do not install native packages if Expo already provides them - Keep compatibility with Expo managed workflow

Error Handling

All async code must handle errors.

Example:

try {  const users = await getUsers()} catch (error) {  console.error(error)}

Naming Conventions

Components → PascalCase
Hooks → camelCase starting with use
Files → PascalCase for components

Example:

UserCard.tsx
useAuth.ts
userService.ts

Testing

Preferred tools:

• Jest
• React Native Testing Library

Test files:

ComponentName.test.tsx

Code Quality Rules

Never:

• Use any
• Put business logic in UI
• Duplicate code
• Ignore TypeScript errors

Always:

• Write readable code
• Use proper types
• Split large components