MOBILE SCREEN
mobile-screen.tsx
React Native screen with safe area, Dynamic Type, and 4 states.
StarkWHAT THIS PATTERN TEACHES
How to build mobile screens that handle safe area insets, accessibility scaling, platform-aware navigation, and the full loading/empty/error/success state cycle.
WHEN TO USE THIS
Every React Native screen. The entry point pattern for mobile UI.
AT A GLANCE
export function ProfileScreen() {
const insets = useSafeAreaInsets()
const { data, error, loading } = useProfile()
if (loading) return <ScreenSkeleton />
}FRAMEWORK IMPLEMENTATIONS
TypeScript
import { useSafeAreaInsets } from "react-native-safe-area-context";
export function ProfileScreen() {
const insets = useSafeAreaInsets();
const { data, error, loading } = useProfile();
if (loading) return <ScreenSkeleton />;
if (error) return <ErrorState retry={refetch} />;
if (!data) return <EmptyState />;
return (
<View style={{ paddingTop: insets.top }}>
<ProfileHeader user={data} />
</View>
);
}