Search across all documentation pages
10 examples to get you started translating designs into feasible mobile interactions on Expo SDK 57 - what to validate before sprint commitment, how to talk to design and PM in mobile terms, and where web assumptions break on phones.
Product collaboration assumes a standard Expo SDK 57 app with design tokens and at least one preview build profile.
npx create-expo-app@latest MyProductApp --template blank-typescript
cd MyProductApp
npx eas initTooling: These examples target Expo SDK 57 (
expo~57.0.4), React Native 0.86.0, and React 19.2.3. Pair with Design Systems Basics for tokens and Animations Basics for motion feasibility.
Treat Figma export as the start of refinement - not the end of design.
## Handoff checklist (per screen)
- [ ] iOS + Android artboards OR explicit "platform follows HIG/Material"
- [ ] Safe area insets noted (notch, Dynamic Island, nav bar)
- [ ] Keyboard states: default, focused, error inline
- [ ] Loading, empty, error - not only happy path
- [ ] Engineer feasibility comment thread open before sprint planningRelated: Working with Design & Motion - pre-pixel feasibility reviews
Web mocks with position: fixed top bars ignore the notch and status bar.
// src/screens/ProfileScreen.tsx
import { View, Text } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
export function ProfileScreen() {
const insets = useSafeAreaInsets();
return (
<View style={{ flex: 1, paddingTop: insets.top }}>
<Text accessibilityRole="header">Profile</Text>
{/* Content scrolls under transparent header only if designed that way */}
</View>
);
}paddingTop: 44 magic numbers fail on new hardware - use insetsinsets.bottom for home indicator overlapCentered modal dialogs from web often become bottom sheets or full-screen flows on mobile.
| Web pattern | Mobile default | When to diverge |
|---|---|---|
| Centered dialog | Bottom sheet (@gorhom/bottom-sheet) | Short confirmations |
| Dropdown menu | Action sheet / context menu | Destructive actions need platform sheet |
| Hover tooltip | Long-press or info icon | No hover on touch |
| Multi-column form | Single column + steps | Keyboard reduces visible viewport |
A form that looks perfect in Figma may hide the primary CTA when the keyboard opens.
import { KeyboardAvoidingView, Platform, ScrollView } from "react-native";
export function SignUpForm() {
return (
<KeyboardAvoidingView
style={{ flex: 1 }}
behavior={Platform.OS === "ios" ? "padding" : undefined}
keyboardVerticalOffset={Platform.OS === "ios" ? 64 : 0}
>
<ScrollView keyboardShouldPersistTaps="handled">
{/* fields + submit - designer reviews with keyboard up */}
</ScrollView>
</KeyboardAvoidingView>
);
}android:windowSoftInputMode may need config plugin - not pure JSFigma at 100% zoom tempts 32px buttons; Apple HIG and Material recommend 44–48dp minimum.
// design-systems/PrimaryButton.tsx - enforce minimum touch target
import { Pressable, Text, StyleSheet } from "react-native";
type Props = { label: string; onPress: () => void };
export function PrimaryButton({ label, onPress }: Props) {
return (
<Pressable
onPress={onPress}
style={styles.hitSlop}
accessibilityRole="button"
accessibilityLabel={label}
>
<Text style={styles.label}>{label}</Text>
</Pressable>
);
}
const styles = StyleSheet.create({
hitSlop: {
minHeight: 48,
minWidth: 48,
paddingHorizontal: 16,
justifyContent: "center",
alignItems: "center",
},
label: { fontSize: 16, fontWeight: "600" },
});minHeight in componentsSwipe-to-delete, drag-to-reorder, and pull-to-refresh compete for the same pan handlers.
## Gesture feasibility (ticket template)
**Interaction:** Swipe row left → reveal Delete
**Libraries:** react-native-gesture-handler + Reanimated
**Conflicts:** Parent FlatList vertical scroll
**Spike:** 0.5 day if new pattern
**Fallback:** Long-press → action sheetShippable screens need loading, empty, error, offline, and permission-denied - not only the marketing frame.
type ViewState = "loading" | "empty" | "error" | "ready";
export function OrdersList({ state, orders }: { state: ViewState; orders: Order[] }) {
if (state === "loading") return <OrdersSkeleton />;
if (state === "empty") return <EmptyState title="No orders yet" cta="Browse catalog" />;
if (state === "error") return <ErrorState onRetry={refetch} />;
return <FlatList data={orders} renderItem={renderOrder} />;
}NSCameraUsageDescription) require store build - flag in estimationFixed fontSize: 14 in Figma breaks when users enable larger text in system settings.
import { Text, StyleSheet } from "react-native";
export function BodyText({ children }: { children: string }) {
return (
<Text
style={styles.body}
maxFontSizeMultiplier={1.3} // product cap - document in a11y ADR if lower than system
>
{children}
</Text>
);
}
const styles = StyleSheet.create({
body: { fontSize: 16, lineHeight: 24 }, // token: typography.body
});numberOfLines vs expand - business copy decision"Custom select" from web is often half a sprint on mobile; platform pickers ship faster.
| Requirement | Faster path | Slower path |
|---|---|---|
| Date of birth | @react-native-community/datetimepicker | Custom calendar wheel |
| Country list | Searchable modal + FlatList | Figma custom dropdown with blur |
| Single choice (3–5 options) | Segmented control / radio group | Bottom sheet with illustrations |
End refinement with a 10-minute device walkthrough - prototype, preview build, or Storybook on phone.
# Share preview with design + PM before sprint start
eas build --profile preview --platform all
# QR in refinement notes; same build for QA acceptance## Refinement done when
- [ ] Designer saw iOS + Android (sim or device)
- [ ] Engineer logged feasibility risks in ticket
- [ ] PM accepted fallback for any "spike pending" item
- [ ] Motion marked: Animated vs Reanimated vs staticBefore high-fidelity lock on net-new flows - ideally at wireframe. One engineer in weekly design crit catches mobile-specific issues early. Late joiners produce expensive pixel reworks.
Offer ranked alternatives: platform picker vs custom, bottom sheet vs full screen, phase 1 without animation. "No" with options is collaboration; "no" alone is a wall.
Not always - shared layout with platform chrome differences is common. Document intentional divergence in Platform Parity Decisions; don't let drift happen by accident.
Translate patterns, don't copy DOM. Flexbox translates; hover, vh, and multi-column grids do not. Reference Design Systems Basics for RN component APIs.
Stable tokens and components: 10–15%. New gestures, camera, or motion: 25–40% plus spike day. See Estimation & Risk on Mobile.
They should learn mobile constraints: safe areas, store review, OTA vs binary, offline. Code literacy helps read feasibility notes - not a requirement to write JSX.
Stack versions: This page was written for React 19.2.3, React Native 0.86.0, and Expo SDK 57 (
expo~57.0.4).
Reviewed by Chris St. John·Last updated Jul 16, 2026