How to Create Click Me Button with a Counter in React Native

Photo by Bernard Hermant on Unsplash

In one of my previous blogs, I explained how to create your first react-native project. In this blog post, we will create a project that updates the state when typing in a TextInputor by clicking a button.

Create a New Project

We know from the previous react-native blog post the way to create a new project using Expo client to run your app on a web browser or you can even run it on your device. In your terminal run the following command and then when prompt choose blank :

$ expo init counter

After you create a new react native project, if you get an error that says “Something went wrong installing JavaScript dependencies,” run npm install and that should fix the error.

To see the live changes, make sure to get the expo client on your device and follow these instructions and then run expo start in your terminal.

Create a Greeting Component

Create a new file in the same directory and call it Greeting.js. This will have the greeting message. It can look something like this

import React, { useState } from 'react';
import { Text, TextInput, View } from 'react-native';
const Greeting = () => {
    const [name, setName] = useState("Sarah");
    
    return (
        <View>
           <TextInput placeholder="Enter your name..."
                      onChangeText={text => setName(text)}
            />
           <Text>Hello {name}!</Text>
        </View>
   );
}
export default Greeting;

Let me explain a little here. In the beginning, we are importing React and the useState component to be able to use React Hooks instead of using props. Later, we are defining the Greeting function where we initiate the state, const [name, setName] = useState("Sarah");. Then we are returning a TextInput and a greeting statement. In the TextInput, we are updating the state variable name to whatever the user is typing inside the TextInput.

Now, we will create the counter and a reset button:

Create a Counter Component with a Reset Button

Create another file in the same directory and call it Counter.js. This will have a button and a counter state variable to keep track of how many times you pressed this button. Also, it will have a reset button to reset the counter state variable.

import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';
const Counter = () => {
    const [count, setCount] = useState(0);
   return (
        <View>
           <Button
             onPress={() => {setCount(count + 1)}} title="Click Me"
           />
           <Button
             onPress={() => {setCount(0)}} title="Reset"
           />
           <Text>You clicked me {count} times</Text>
       </View>
   );
}
export default Counter;

The same as the Greeting.js component, we are importing React and useState that handles the changing in the state variable, counter. Then we are defining the Counter function which will have two buttons, one to increase the counter value by one and another to reset the counter. Also, we have the Texttag to display the counter value to make sure it listens to the changes when we click on Click Me and Reset button.

This was how you Create a Click Me button that would update the state. Make sure to include these two components, Greeting.js and Counter.js, in your App.js by importing both of them and add the following two tags inside the View tag in App.js :

import React from 'react';
import { Text, TextInput, View } from 'react-native';
import Counter from './Counter';
import Greeting from './Greeting';
export default function App() {
     
     return (
        <View>
           <Greeting />
           <Counter />
        </View>
     );
}

Hope that helped you in creating a react-native app with a counter state variable that can be updated by clicking a button. Also a greeting message with a name that can be changed according to the TextInput value. If you have anything you would like to add, please comment below!