qtyComp.js

import { useState } from 'react';
import {
  Text,
  SafeAreaView,
  StyleSheet,
  Dimensions,
  View,
  TextInput,
  Button,
  ImageBackground,
  TouchableOpacity,
  Image,
} from 'react-native';

const imgBack =
  'https://img.lovepik.com/background/20211029/medium/lovepik-lemon-mint-fruit-mobile-phone-wallpaper-background-image_400297886.jpg';
const plusSign = 'https://cdn-icons-png.freepik.com/512/3114/3114824.png';
const mSign =
  'https://cdn-icons-png.freepik.com/512/6862/6862005.png?ga=GA1.1.1340975451.1715696545';
const delSign =
  'https://cdn-icons-png.freepik.com/512/12514/12514386.png?ga=GA1.1.1340975451.1715696545';
const prodImg = 'https://freepngimg.com/thumb/guava/6-2-guava-png-pic.png';
const qtyRgPtn = /^([0-9][0-9]?|100)$/;

export default function App() {
  const [qty, setQty] = useState(1);
  const [qtyError, setQtyError] = useState('');

  return (
    <ImageBackground source={{ uri: imgBack }} style={styles.container}>
      <View style={styles.prodRow}>
        <Image
          resizeMode={'center'}
          style={styles.prodImg}
          source={{ uri: prodImg }}
        />
        <Text style={{ color: 'black', flex: 1, marginHorizontal: 5 }}>
          {'Guava 1Kg'}
        </Text>
        <TouchableOpacity onPress={() => qty < 99 && setQty(qty + 1)}>
          <Image
            resizeMode={'center'}
            style={styles.iconImg}
            source={{ uri: plusSign }}
          />
        </TouchableOpacity>
        {/* <Button title="+" onPress={() => qty < 99 && setQty(qty + 1)} /> */}
        <TextInput
          keyboardType={'number-pad'}
          maxLength={3}
          value={'' + qty}
          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.trim().length > 0) {
                setQtyError('Qty should be in between 1-100');
                setTimeout(() => setErrQty(''), 2000);
              }
            }
          }}
          style={styles.qtyInput}
          placeholder={'0'}
        />        
        {/* <Button title="-" onPress={() => qty > 0 && setQty(qty - 1)} /> */}
        <TouchableOpacity onPress={() => qty > 0 && setQty(qty - 1)}>
          <Image
            resizeMode={'center'}
            style={styles.iconImg}
            source={{ uri: mSign }}
          />
        </TouchableOpacity>
        <TouchableOpacity style={{ marginLeft: 5 }} onPress={() => setQty(0)}>
          <Image
            resizeMode={'center'}
            style={styles.iconImg}
            source={{ uri: delSign }}
          />
        </TouchableOpacity>
      </View>
      {qtyError ? (
        <Text style={{ color: 'salmon', fontSize: 12, marginTop: 5 }}>
          {qtyError}
        </Text>
      ) : null}
    </ImageBackground>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    //  justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
    paddingTop: 50,
  },
  prodRow: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: 10,
    paddingHorizontal: 5,
    backgroundColor: 'rgba(250,250,250,0.5)',
  },
  prodImg: {
    height: 45,
    width: 45,
  },
  iconImg: {
    height: 30,
    width: 30,
  },
  qtyInput: {
    marginHorizontal: 10,
    width: '15%',
    backgroundColor: 'snow',
    paddingVertical: 5,
    textAlign: 'center',
    borderColor: 'skyblue',
    borderWidth: 2,
    borderRadius: 2,
  },
});