Quiz

// 10 questions. Pass: >= 7. Answers at the bottom.

// ===== Q1 =====
// Which is the recommended scaffolding tool for new RN apps in 2026?
// A) react-native init
// B) create-react-app
// C) Expo CLI
// D) Vite

// ===== Q2 =====
// What component renders text?
// A) <div>hello</div>
// B) <Text>hello</Text>
// C) <Label>hello</Label>
// D) <span>hello</span>

// ===== Q3 =====
// Flexbox default direction in RN is:
// A) row
// B) column
// C) row-reverse
// D) inherit from parent

// ===== Q4 =====
// For a list of 200 items, you should use:
// A) ScrollView
// B) FlatList
// C) View with .map()
// D) <ul>

// ===== Q5 =====
// Pressable vs TouchableOpacity:
// A) Same component, different names
// B) Pressable is modern + flexible; TouchableOpacity is legacy
// C) TouchableOpacity is for Android only
// D) Pressable is unsupported on iOS

// ===== Q6 =====
// To make app respect safe areas (notches, status bar):
// A) Use SafeAreaView from react-native-safe-area-context
// B) Use a fixed top padding of 44px
// C) RN handles it automatically; no extra code
// D) Wrap the root in <iframe>

// ===== Q7 =====
// Native modules access patterns:
// A) Direct fetch() calls
// B) Capacitor plugins
// C) Expo modules + react-native libraries via native bridge
// D) RPC over websockets

// ===== Q8 =====
// Inline styles in render are bad because:
// A) They don't work on iOS
// B) They recreate a new object every render -> defeats perf optimisations
// C) Only StyleSheet supports flexbox
// D) RN refuses to render inline styles

// ===== Q9 =====
// EAS Update lets you:
// A) Rebuild native code remotely
// B) Push JS bundle updates over the air (OTA) without store review
// C) Replace the app icon dynamically
// D) Bypass all app store review

// ===== Q10 =====
// To debug on a real device:
// A) Open Safari and use the JS console
// B) Shake the device + use the dev menu / Flipper / React DevTools
// C) Only simulator debugging is supported
// D) Print logs to a file

// ===== Answers =====
// 1. C — Expo CLI is the default; bare CLI for specific native needs
// 2. B — <Text>; bare strings outside <Text> crash
// 3. B — column by default (opposite of web's row)
// 4. B — FlatList is virtualised; ScrollView builds all children
// 5. B — Pressable handles all gesture states + accessibility
// 6. A — react-native-safe-area-context provides cross-platform safe areas
// 7. C — Expo modules + react-native libs via native bridge
// 8. B — inline objects = new ref every render; cache in StyleSheet
// 9. B — OTA JS bundle updates; native code requires a new store build
// 10. B — dev menu + Flipper + React DevTools; logs in browser also

// ===== Patterns =====
// - Expo + EAS for builds + OTA
// - <Text> only for text; FlatList for long lists
// - StyleSheet.create over inline styles
// - SafeAreaView at the root

// ===== Pitfalls =====
// - Strings outside <Text> -> crash
// - ScrollView for long lists -> jank
// - flexDirection web habits (row default) bite
// - Forgetting native bridge changes need a rebuild + reinstall

// 3 questions per lesson.