Task

Create a component named Counter that simulates a simple counter application. The component should display a counter value and include a button to increment that value. The initial counter value should be customizable by passing it as a prop when using the Counter component.

Steps

1. Create the Counter Component:
   • Define a functional component named Counter in the Counter.js file;
   • Use the useState hook to manage the state of the counter within the component.
2. Display the Counter Value:
   • Display the current counter value on the screen.
3. Implement a Button:
   • Use the TouchableOpacity component from React Native to create a button;
   • Label the button with the text "Increment".
4. Handle Incrementing:
   • Implement a function, e.g., incrementCounter, that increments the counter value by 1 each time the button is pressed;
   • Attach this function to the button's onPress event.
5. Customizable Initial Value:
   • Allow the Counter component to receive an initial counter value as a prop named initialValue;
   • Use this prop to set the initial state of the counter.

We should see the following result after implementing those changes.

Repository with initial files and folders.

Initiate the Project

Begin the project by duplicating the initial files and data through the specified terminal command.

Access the newly generated folder containing the project files using the command:

Next, install the necessary packages with:

To launch the application and preview its initial interface, execute the following command in the terminal:

Hint

1. For managing state, use the useState hook in the Counter component;
2. Utilize the Text and TouchableOpacity components for displaying text and creating a touchable button, respectively;
3. Pass the initial counter value as a prop to the Counter component when using it in another file.

In case you encounter any obstacles while carrying out the task, we recommend consulting the provided recording, which provides a detailed walkthrough on every aspect. Wishing you all the best!

In Practice