softare development

Increase and Decrease Number on Button Click in React Native

When writing real-time software applications, there are times when you want to increase and decrease a value when a button is clicked.

A good example is increasing the quantity of an item in a cart or counting page visits on a website. This can be done easily in React Native by writing two functions that will simultaneously increase and decrease the counter value and then passing these functions to their respective button components.

In this article, we are going to increase and decrease number on button click in React Native.

1. Set Initial State

The first thing we want to do is set our initial state in the React application

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: 0
    };
  }
}
export default App;

As we can see in the code above, we have set our initial state variable to 0. It is important to note that it must not always be 0, you can start from any number you wish.

If, for instance, you are incrementing cart items, then you can’t have 0 items in a cart in terms of quantity. You want the least quantity to 1, which makes sense.

2. We write Increment Function


  increaseCount = () => {
    this.setState({counter: this.state.counter + 1})
  }

Here, every time we call on this function it will increase the counter value by 1.

3. We write the Decrement Function

decreaseCount = () => {
    this.setState({counter: this.state.counter - 1})
    if(this.state.counter === 0){
      this.setState({counter: 0 })
    }
  }

Here, every time we call on this function, it will decrease the counter value by 1.

4. Pass the functions to the button

render(){
    return(
      <View style={styles.container}>
      <TouchableOpacity style={styles.button} onPress={()=>this.increaseCount()}>
      <Text>Increase</Text>
      </TouchableOpacity>

      <Text>{this.state.counter}</Text>

      <TouchableOpacity style={styles.button} onPress={()=>this.decreaseCount()}>
      <Text>Decrease</Text>
      </TouchableOpacity>
      </View>
    )
  }

If you want to restrict to the state value to 1 instead of 0 as said earlier, you modify the c like so:

 decreaseCount = () => {
    this.setState({counter: this.state.counter - 1})
    if(this.state.counter === 0){
      this.setState({counter: 0 })
    }
  }

Here’s the full code

import React, { PureComponent } from 'react';
import { View, Text, Image, TouchableOpacity } from 'react-native';
import { styles } from '../assets/styles/Style';

class Sample extends PureComponent{

  constructor(props){
    super(props);
    this.state = {
      counter: 0
    }
  }

  increaseCount = () => {
    this.setState({counter: this.state.counter + 1})
  }
  decreaseCount = () => {
    this.setState({counter: this.state.counter - 1})
    if(this.state.counter === 0){
      this.setState({counter: 0 })
    }
  }

  render(){
    return(
      <View style={styles.container}>
      <TouchableOpacity style={styles.button} onPress={()=>this.increaseCount()}>
      <Text>Increase</Text>
      </TouchableOpacity>

      <Text>{this.state.counter}</Text>

      <TouchableOpacity style={styles.button} onPress={()=>this.decreaseCount()}>
      <Text>Decrease</Text>
      </TouchableOpacity>
      </View>
    )
  }
}

export default Sample

See also How to use Flexbox in React Native

Don’t forget the Style!

import { StyleSheet } from 'react-native';


const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-evenly',
    alignItems: 'center',
    margin: 18,
  },
  button: {
    width: 100,
    height: 45,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#87CEEB'
  },
})

export { styles }

This is how you increase and decrease number on button click in React Native.

increase and decrease number on button click in react native

React Native Select Dropdown for Android and iOS

Recent Posts

Why Grok 4 is the AI Game-Changer You Need to Know

Move over ChatGPT, there's a new, significantly upgraded player causing a stir. xAI, Elon Musk's…

3 days ago

Cloudinary vs. AWS vs. ImageKit.io vs. Cloudflare

Choosing the right asset management service is vital. Cloudinary is frequently mentioned, but how does…

2 weeks ago

How to Integrate Cloudinary with PHP

Cloudinary is a powerful cloud-based media management platform that allows you to upload, store, manage,…

2 weeks ago

Trump Extends U.S. TikTok Sale Deadline to September 2025

In a surprising turn of events, former President Donald Trump announced on June 19, 2025,…

3 weeks ago

Master React Native Flexbox

Flexbox is a powerful layout system in React Native that allows developers to create responsive…

4 weeks ago

Getting Started With TensorFlow

"The journey of a thousand miles begins with a single step." — Lao Tzu Welcome…

1 month ago