A hands-on React Native app for learning Detox end-to-end testing. Every interactive element has a testID ready for test automation
npm install
npx pod-install # iOS only
npx react-native run-ios # or run-androidLogin: test@example.com / 123456
| Screen | What it demonstrates |
|---|---|
| FormControls | 25+ controls: TextInput, Switch, Slider, Picker, DateTimePicker, Stepper, Star Rating, Segmented Control, OTP, Color Picker, Tags, Checkbox, Radio, Date Range, Time Slots, Recurrence |
| GesturesDemo | Swipe-to-delete, Long Press, Double Tap, Pinch Zoom (ScrollView), Drag & Drop (PanResponder), Rotation (+45°/-45°) |
| ListsDemo | FlatList (30 items, search/filter), 3-column Grid toggle, Carousel (horizontal FlatList), SectionList, Expandable/Accordion, Multi-select with checkmarks |
| AlertsDemo | Alert.alert variants, ActionSheet, Animated Progress Bar, Countdown Timer (10s), Bottom Sheet (5 actions), Modal, Toast, ActivityIndicator |
| AnimationDemo | Animated API: Fade In/Out, Slide Up/Down, Scale, Rotation |
| CalendarDemo | Custom calendar grid, month navigation, event CRUD with AsyncStorage persistence, color-coded events, event count stats |
| MediaDemo | Mock image picker, 3-column gallery with zoom controls, file browser with search, simulated upload progress bar |
| SignatureDemo | Drawing canvas (react-native-svg), pen color (6 swatches), pen width (2/3/5/8px), undo, clear, save with timestamp |
| UserProfile | Editable profile fields, notification toggles, language picker, Dark/Light/System theme selector, clear local data, account stats |
- Offline-first — all data stored in AsyncStorage (no backend needed)
- Session persistence — auto-restores last session on app launch
- Credential-free registration — Register saves to AsyncStorage, Login checks both hardcoded and registered users
- Full logout — clears session, resets navigation stack
- Every interactive element tagged with
testID
TestApplication
├── App.jsx # Root: session check, navigation setup, 12 screens registered
├── src/
│ ├── screens/ # 9 teaching screens + Login + Register
│ │ ├── index.js # Barrel exports
│ │ ├── Login/
│ │ ├── Register/
│ │ ├── Home/ # Dashboard hub with navigation cards
│ │ ├── FormControls/
│ │ ├── GesturesDemo/
│ │ ├── ListsDemo/
│ │ ├── AlertsDemo/
│ │ ├── AnimationDemo/
│ │ ├── CalendarDemo/
│ │ ├── MediaDemo/
│ │ ├── SignatureDemo/
│ │ └── UserProfile/
│ ├── components/ # Reusable components (Input, etc.)
│ ├── assets/
│ ├── hooks/
│ └── store/
├── ios/ # Native iOS (scheme: TestApplication)
└── android/ # Native Android (app_name: TestApplication)
- React Native 0.74.1
- React Navigation (native-stack)
- AsyncStorage (auth, session, calendar events)
- react-native-svg (signature canvas)
- @react-native-community/slider, datetimepicker, picker, checkbox
- react-native-gesture-handler, react-native-safe-area-context, react-native-screens