Note, This post is for beginners
In this post we see how to design a e-commerce shopping app quantity / qty component with regex validation.
This is the basic page and basic functions, hope you know them already.
import React, { useState } from 'react';
import {
View,
Text,
StyleSheet,
TextInput,
TouchableOpacity,
} from 'react-native';
export default function App() {
const [qty, setQty] = useState(0);
return (
<View style={styles.container}>
<View style={styles.qtyLine}>
<TouchableOpacity
onPress={() => qty < 100 && setQty(qty + 1)}
style={styles.btn}>
<Text style={styles.btnText}>{'+'}</Text>
</TouchableOpacity>
<TextInput
keyboardType={'number-pad'}
maxLength={3}
style={styles.qtyInput}
value={'' + qty}
onChangeText={(txt) => {
let num = Number(txt);
if (!isNaN(num) && num > 0 && num < 101) {
setQty(num);
} else setQty(0);
}}
/>
<TouchableOpacity
onPress={() => qty > 0 && setQty(qty - 1)}
style={styles.btn}>
<Text style={styles.btnText}>{'-'}</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => setQty(0)}
style={[styles.btn, { marginLeft: 5 }]}>
<Text style={styles.btnText}>{'x'}</Text>
</TouchableOpacity>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'snow',
alignItems: 'center',
justifyContent: 'center',
padding: 10,
paddingTop: 20,
},
qtyLine: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
},
qtyInput: {
marginHorizontal: 10,
borderWidth: 0.5,
borderColor: 'dodgerblue',
padding: 5,
textAlign: 'center',
width: '20%',
},
btn: {
backgroundColor: 'dodgerblue',
paddingVertical: 5,
paddingHorizontal: 10,
borderRadius: 3,
},
btnText: {
color: 'white',
},
});
Number(txt)
// also converts empty string and blank space(s) as 0
At present in TextInput onChangeText event we are checking 3 conditions. Checking a text is a number, number is > 0 and number is < 101. But this can be simplified in one step by using regex validation.
Lets touch the TextInput component. In onChangeText event we are using regex to validate the given string is a number and the value is between 1 to 100.
TextInput with RegEx pattern
const qtyRgPtn = /^([0-9][0-9]?|100)$/;
. . .
<TextInput onChangeText={txt =>
qtyRgPtn.test(txt) && setQty(Number(txt))} />
so simple isn't it?
Now in addition to that we are showing a warning message for short time when the user inputs invalid qty.
const qtyRgPtn = /^([0-9][0-9]?|100)$/;
export default function App() {
const [qty, setQty] = useState(0);
const [qtyError, setQtyError] = useState('');
. . .
<TextInput
onChangeText={(txt) => {
/*
let num = Number(txt);
if (!isNaN(num) && num > 0 && num < 101) {
setQty(num);
} else {
setQty(0);
}
*/
if (qtyRgPtn.test(txt)) setQty(Number(txt));
else {
setQty(0);
if (!txt || !txt.trim().length) {
setQtyError('Qty should be in between 1-100');
setTimeout(() => setQtyError(''), 2000);
}
}
}}
/>
. . .
{/* final child of container */}
{qtyError ? (
<Text style={{ color: 'salmon', fontSize: 12, marginTop: 5 }}>
{qtyError}
</Text>
) : null}
Good! we are done :)
Hope this post will be useful. Source code here. Thank you.
Top comments (0)