Summary - Events

Combine onPress, onLongPress and form events to write a feedback form.

Summary - Events

This group covered tap and form events. onPress catches a quick tap, onLongPress a long hold. Handlers take an event parameter; you read position and data from nativeEvent.

onLayout reports layout changes; you read layout.width and layout.height. In forms, onChangeText fires on each keypress and onSubmitEditing on the submit key. Now you will combine these in two mini tasks.

Exercise A feedback form

Write an App component. Define text with useState(''). Show <Text>Send</Text> inside a <TouchableOpacity>; its onPress should call {`() => console.log(text)`}. Above it, add a <TextInput> with value={'{text}'} and onChangeText={'{setText}'}. Export the App function.

Show example solution

function App() {
  const [text, setText] = useState('');
  return (
    <>
      <TextInput value={text} onChangeText={setText} />
      <TouchableOpacity onPress={() => console.log(text)}>
        <Text>Send</Text>
      </TouchableOpacity>
    </>
  );
}
export default App;

Exercise A card that measures layout

Write an App component. Define height with useState(0). Give the <View> an onLayout handler that calls setHeight with event.nativeEvent.layout.height. Put <Text>{`{height}`}</Text> inside. Give style a height: 120. Export the App function.

Show example solution

function App() {
  const [height, setHeight] = useState(0);
  return (
    <View
      onLayout={(event) => setHeight(event.nativeEvent.layout.height)}
      style={{ height: 120 }}>
      <Text>{height}</Text>
    </View>
  );
}
export default App;

Test yourself

Match all the event concepts

onPress

Quick tap
onLongPress

Long hold
onLayout

Layout change
onChangeText

Text change
What catches form submission?
- onChangeText
- onLayout
- onSubmitEditing
- onLongPress
Show answer

onChangeText — onSubmitEditing listens for the keyboard submit key.

Next lesson: App design

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies