Project 93 of 100 - Counter App in React Native
Tags: reactnative, react, javascript, typescript
Published: 2022-01-05 05:48:34

*Hey! I'm on a mission to make 100 React.js projects. Please follow my dev.to profile or my [twitter](https://www.twitter.com/jwhubert91) for updates and feel free to reach out if you have questions. Thanks for your support!*

Link to the repo: [github](https://github.com/jwhubert91/reactNativeCounterApp)

Ok, I know this is a simple one. But the fact is that almost everyone builds a counter application when they're first learning a new language or technology.

Today's project just counts. That's it. It starts at 0 and there's a plus button and a minus button, and some text printed out on the screen shows the count, and it's updated as we press the buttons. 

This is an easy project to do but important because it's a real introduction to state management, which ends up being one of the most complex parts of front end development in large applications.

To start, we initialize a new React Native project by going to your Terminal or command line and running `expo init reactNativeCounterApp` (that's what I'm calling mine- you can call yours whatever you want).

When that creates the project, we can open it up in your favorite code editor. In the `App` file, clear out the template code and then add `Button` to the components destructured out of the React Native import. You should also import `useState` from 'react' because that's what we're going to use to keep track of state in this app. Your imports should look like this:

```JS
import { useState } from 'react';
import { Button, StyleSheet, Text, View } from 'react-native';
```

Next go ahead and initialize `useState` to 0 with named variables `counter` and `setCounter` array-destructured out. Anyone who's familiar with React (you should be if you're trying to learn React Native) will know this is a standard state management hook included with React for functional components. So your useState should be initialized like so just inside your App component:

```JS
export default function App() {
  const [ counter, setCounter ] = useState(0);
...
```

Next write a `<Text></Text>` component in the JSX somewhere. In between the brackets declare the `counter` variable. Below this add two `Button` components. These are React Native primitive components that are meant to be as simple of a button as can be, but they work. You should give each button a `title` prop to display why they're there. I gave mine titles of "+" and "-" to show that they're going to be adding and subtracting, respectively.

Next, give each button an `onPress` prop. This is where the only real logic happens in our application, because it's where we will change our `counter` value held in the component's state.

For the add button with a title of "+" go ahead and pass an anonymous function. In the function, we want to use the `setCounter` method we created earlier. As you should know, we aren't supposed to try to change `counter` itself, but we can use it in `setCounter()` and just add 1 to the existing counter value.

For the subtract button, you'll want to do the same but subtract 1 from counter rather than add. Those two buttons should now look something like this in your template:

```JS
<Button title="+" onPress={ ()=> setCounter( counter + 1 ) } />
<Button title="-" onPress={ ()=> setCounter( counter - 1 ) } />
```

You now have all of the guts necessary to make your counter application work and it should. So give it a shot! 

Mine... is not a work of sheer beauty or anything, but it does the job. Hey, now we can safely say we're well on our way to learning React Native... because we've just finished one of the major milestones in learning any new technology ;)

Can you make yours look better? Give it a shot!

![Preview of basic counter application](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8rpxtu4ofnci5evgqz0l.png)

**If you like projects like this and want to stay up to date with more, check out my Twitter [@jwhubert91](https://twitter.com/jwhubert91), I follow back! See you tomorrow for another project.**