Rn Component Patterns

Screen Template

export default function ProfileScreen() {
  const { data, isLoading, error } = useProfile();
  if (isLoading) return <ScreenSkeleton />;
  if (error) return <ErrorView retry={refetch} />;
  return <ScrollView className="flex-1 bg-white p-4">...</ScrollView>;
}

Form Pattern (react-hook-form + zod)

const schema = z.object({ email: z.string().email(), password: z.string().min(8) });
type FormData = z.infer<typeof schema>;

export function LoginForm() {
  const { control, handleSubmit } = useForm<FormData>({ resolver: zodResolver(schema) });
  const FormData) => loginMutation.mutate(data);
  return <View>
    <Controller control={control} name="email" render={({field, fieldState}) => (
      <TextInput className={fieldState.error ? 'border-red-500' : 'border-gray-300'} {...field} />
    )} />
  </View>;
}

List Pattern

// Buyuk listeler icin DAIMA FlatList, ScrollView degil
<FlatList
  data={items}
  keyExtractor={(item) => item.id}
  renderItem={({ item }) => <ItemCard item={item} />}
 
 
  ListEmptyComponent={<EmptyState />}
/>