6DasarPertemuan ke-6

Event Handling & User Input

Menangani user interactions seperti touchable, keyboard input, dan form handling.

Topik Pembelajaran

  • ▪Touchable components (Button, Pressable)
  • ▪Gesture handlers
  • ▪TextInput component
  • ▪Form input handling
  • ▪Keyboard events
  • ▪Alert & notifications

Referensi & Sumber Daya

React Native UserInputTextInput

Event Handling & User Input

Touchable Components

Wrapping UI dengan touchable untuk handle press events.

jsx
<TouchableOpacity onPress={() => alert('Pressed')}>
  <Text>Press me</Text>
</TouchableOpacity>

Pressable Component

Modern alternative dengan lebih kontrol terhadap press feedback.

jsx
<Pressable 
  onPress={handlePress}
  onLongPress={handleLongPress}
  onPressIn={handlePressIn}
  onPressOut={handlePressOut}
>
  <Text>Interactive</Text>
</Pressable>

TextInput

Menerima text input dari user.

jsx
<TextInput
  placeholder="Enter text"
  value={text}
  onChangeText={setText}
  onSubmitEditing={handleSubmit}
/>

Form Handling

Multiple inputs dalam form, validation, dan submission.

Keyboard Management

  • Dismiss keyboard dengan Keyboard.dismiss()
  • Handle keyboard appearance events
  • ScrollView auto-scroll saat keyboard appear

Alert Component

Show simple alerts dan prompts.

jsx
Alert.alert('Title', 'Message', [
  { text: 'Cancel' },
  { text: 'OK', onPress: () => {} }
]);