Callback props in React Native - Mini App: Build & Ship

Build: Counter Screen

A simple screen with a counter display and a button. Pressing the button increases the counter using a callback prop passed to the button component.

Target UI

Counter Screen

  Count: 0

  [ Increase ]

Display a number starting at 0

Create a Button component that accepts a callback prop named onPress

When the button is pressed, the counter increments by 1

Use the callback prop to notify the parent component about the button press

Starter Code

React Native

import React, { useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';

function CounterButton(props) {
  // TODO: Use props.onPress as the button press handler
  return (
    <TouchableOpacity style={styles.button} onPress={() => { /* TODO */ }}>
      <Text style={styles.buttonText}>Increase</Text>
    </TouchableOpacity>
  );
}

export default function CounterScreen() {
  const [count, setCount] = useState(0);

  // TODO: Define a function to handle button press and update count

  return (
    <View style={styles.container}>
      <Text style={styles.countText}>Count: {count}</Text>
      {/* TODO: Render CounterButton and pass the callback prop */}
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  countText: { fontSize: 32, marginBottom: 20 },
  button: { backgroundColor: '#007AFF', paddingVertical: 12, paddingHorizontal: 24, borderRadius: 8 },
  buttonText: { color: 'white', fontSize: 18 }
});

Task 1

Task 2

Task 3

Solution

React Native

import React, { useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';

function CounterButton(props) {
  return (
    <TouchableOpacity style={styles.button} onPress={props.onPress} accessibilityLabel="Increase counter button">
      <Text style={styles.buttonText}>Increase</Text>
    </TouchableOpacity>
  );
}

export default function CounterScreen() {
  const [count, setCount] = useState(0);

  function handleIncrease() {
    setCount(prevCount => prevCount + 1);
  }

  return (
    <View style={styles.container}>
      <Text style={styles.countText} accessibilityLiveRegion="polite">Count: {count}</Text>
      <CounterButton onPress={handleIncrease} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#fff' },
  countText: { fontSize: 32, marginBottom: 20, color: '#000' },
  button: { backgroundColor: '#007AFF', paddingVertical: 12, paddingHorizontal: 24, borderRadius: 8 },
  buttonText: { color: 'white', fontSize: 18 }
});

We created a CounterButton component that accepts an onPress callback prop. This prop is used as the handler for the button press event.

In the CounterScreen component, we keep track of the count state using useState. We define a function handleIncrease that increments the count.

This function is passed down to CounterButton as the onPress prop. When the button is pressed, it calls this function, updating the count in the parent.

We also added accessibility labels to improve usability for screen readers.

Final Result

Completed Screen

Counter Screen

  Count: 1

  [ Increase ]

User taps the 'Increase' button

The number shown after 'Count:' increases by 1 each tap

Stretch Goal

Add a 'Decrease' button that decreases the count using a callback prop

💡 Hint

Create another button component or reuse CounterButton with a different onPress prop that subtracts 1 from count