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.
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.
increaseCount = () => {
this.setState({counter: this.state.counter + 1})
}
Here, every time we call on this function it will increase the counter value by 1.
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.
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 })
}
}
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
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.
React Native Select Dropdown for Android and iOS
Neumorphism design, alternatively termed as "soft UI" or "new skeuomorphism," represents a design trend that…
Debugging JavaScript code can sometimes be challenging, but with the right practices and tools, you…
Service Workers are one of the core features of modern web applications, offering powerful capabilities…
A database-driven website is a dynamic site that utilizes a database to store and manage…
Toasts are user interface elements commonly used in software applications, especially in mobile app development…
JavaScript has long been synonymous with frontend web development, powering interactive and dynamic user interfaces…