1. Quick Start

  • npx create-expo-app@latest AppName → npx expo start
  • Core imports: View, Text, TextInput, Button, Alert, Pressable
  • Text must live inside <Text>
  • const [x, setX] = useState(initial)
  • Alert.alert(title, message)
  • Props: <Child name="Sam" /> → function Child({ name })

2. JavaScript for RN

  • const / let; template strings `Hi ${name}`
  • Conditionals: if / ternary a ? b : c
  • Arrays: .map, .filter, spread [...arr, item]
  • Objects: const { id, title } = item
  • Async: const data = await (await fetch(url)).json()

3. Screens & Layout

  • StyleSheet.create({ ... })
  • Default flexDirection: column
  • flex: 1, justifyContent, alignItems, flexDirection: 'row'
  • ScrollView for short overflow; FlatList for long lists
  • SafeAreaView / safe-area-context for notches
  • Image needs width + height; remote via { uri }
  • Platform.OS → 'ios' | 'android' | 'web'

4. Interactivity & Navigation

  • Pressable / onPress
  • Controlled input: value + onChangeText
  • FlatList: data, keyExtractor, renderItem
  • Stack: NavigationContainer + createNativeStackNavigator
  • Navigate: navigation.navigate('Screen', params)
  • Read params: route.params

5. Capstone tips

  • Separate playback mode from input mode with a playing flag
  • sleep(ms) with Promise + setTimeout for timed flashes
  • Keep sequence in state; track player progress with index (state or ref)
  • Disable presses during playback