React Native Patterns

// app/user/[id].tsximport { useLocalSearchParams, router } from 'expo-router'import { z } from 'zod'import { UserProfile } from '@/features/user/UserProfile'
const Params = z.object({ id: z.string().uuid() })
export default function UserRoute() {  const parsed = Params.safeParse(useLocalSearchParams())  if (!parsed.success) {    router.replace('/not-found')    return null  }  return <UserProfile userId={parsed.data.id} />}

import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'import { z } from 'zod'
const User = z.object({ id: z.string(), email: z.string().email() })type User = z.infer<typeof User>
export function useUser(id: string) {  return useQuery({    queryKey: ['user', id],    queryFn: async (): Promise<User> => User.parse(await api.getUser(id)),  })}
export function useUpdateEmail(id: string) {  const qc = useQueryClient()  return useMutation({    mutationFn: (email: string) => api.updateEmail(id, email),    onSuccess: () => qc.invalidateQueries({ queryKey: ['user', id] }),  })}

import { FlatList } from 'react-native'
<FlatList  data={items}  keyExtractor={(item) => item.id}  renderItem={renderItem}          // memoized  initialNumToRender={10}  windowSize={5}/>

// NativeWind<View className="p-4 rounded-2xl bg-white">  <Text className="text-base font-semibold">Hello</Text></View>
// StyleSheetconst styles = StyleSheet.create({ card: { padding: 16, borderRadius: 16, backgroundColor: '#fff' } })<View style={styles.card}>...</View>

import { useEffect, useState } from 'react'import * as Location from 'expo-location'
type LocationState =  | { status: 'loading' }  | { status: 'denied' }  | { status: 'granted'; coords: Location.LocationObjectCoords }
export function useCurrentLocation() {  // Track status, not just coords — so the UI can tell "still loading" apart  // from "permission denied" and show an actionable message.  const [state, setState] = useState<LocationState>({ status: 'loading' })
  useEffect(() => {    let active = true    ;(async () => {      const { status } = await Location.requestForegroundPermissionsAsync()      if (status !== 'granted') {        if (active) setState({ status: 'denied' })        return      }      const pos = await Location.getCurrentPositionAsync({})      if (active) setState({ status: 'granted', coords: pos.coords })    })()    return () => { active = false }   // ignore stale result after unmount  }, [])
  return state}

import * as SecureStore from 'expo-secure-store'
await SecureStore.setItemAsync('auth_token', token)   // Keychain / Keystoreconst token = await SecureStore.getItemAsync('auth_token')

// app/(tabs)/orders.tsximport { memo, useCallback } from 'react'import { FlatList, Text, View } from 'react-native'import { useQuery } from '@tanstack/react-query'import { z } from 'zod'
const OrderSchema = z.object({ id: z.string(), total: z.number(), status: z.string() })const OrdersSchema = z.array(OrderSchema)type Order = z.infer<typeof OrderSchema>
function useOrders() {  return useQuery({    queryKey: ['orders'],    queryFn: async () => OrdersSchema.parse(await api.listOrders()),  })}
// Memoized so its reference is stable across renders (see the lists guidance).const OrderRow = memo(function OrderRow({ item }: { item: Order }) {  return (    <View className="px-4 py-3 border-b border-neutral-200">      <Text className="font-medium">#{item.id}</Text>      <Text className="text-neutral-500">{item.status} · ${item.total}</Text>    </View>  )})
export default function OrdersScreen() {  const { data, isLoading, isError, refetch, isRefetching } = useOrders()  const renderItem = useCallback(({ item }: { item: Order }) => <OrderRow item={item} />, [])
  if (isLoading) return <Centered><Text>Loading…</Text></Centered>  if (isError) return <Centered><Text accessibilityRole="alert">Could not load orders.</Text></Centered>  if (!data?.length) return <Centered><Text>No orders yet.</Text></Centered>
  return (    <FlatList      data={data}      keyExtractor={(o) => o.id}      onRefresh={refetch}      refreshing={isRefetching}      renderItem={renderItem}    />  )}

import { useForm, Controller } from 'react-hook-form'import { zodResolver } from '@hookform/resolvers/zod'import { z } from 'zod'import { TextInput, Button, Text } from 'react-native'
const Schema = z.object({ email: z.string().email('Invalid email') })type FormValues = z.infer<typeof Schema>
export function EmailForm({ onSubmit }: { onSubmit: (v: FormValues) => void }) {  const { control, handleSubmit, formState: { errors } } = useForm<FormValues>({    resolver: zodResolver(Schema),    defaultValues: { email: '' },  })
  return (    <>      <Controller        control={control}        name="email"        render={({ field: { value, onChange, onBlur } }) => (          <TextInput            value={value}            onChangeText={onChange}            onBlur={onBlur}            autoCapitalize="none"            keyboardType="email-address"            accessibilityLabel="Email address"          />        )}      />      {errors.email && <Text accessibilityRole="alert">{errors.email.message}</Text>}      <Button title="Save" onPress={handleSubmit(onSubmit)} />    </>  )}

// WRONG: large array mapped inside a ScrollView (no virtualization, janky, high memory)<ScrollView>{items.map((i) => <Row key={i.id} item={i} />)}</ScrollView>// RIGHT: FlatList / FlashList
// WRONG: server data copied into a client store (two sources of truth, stale data)const useStore = create((set) => ({ users: [], setUsers: (u) => set({ users: u }) }))useEffect(() => { getUsers().then(setUsers) }, [])// RIGHT: useQuery owns server state; derive what you need
// WRONG: tokens in AsyncStorage (not encrypted)await AsyncStorage.setItem('auth_token', token)// RIGHT: expo-secure-store
// WRONG: trusting deep-link paramsconst { id } = useLocalSearchParams(); fetchUser(id)// RIGHT: validate with Zod before use
// WRONG: inline style object recreated every render on a hot path<View style={{ padding: 16, backgroundColor: '#fff' }} />// RIGHT: StyleSheet.create at module scope, or NativeWind className
// WRONG: real secret shipped in the bundleconst STRIPE_SECRET = 'sk_live_...'// RIGHT: keep privileged calls server-side; ship only public keys protected by backend rules