Question 33407 in React native Question posted in
The official React Native documentation can be found here.

How can a react native textinput be additive for numeric values?

I am developing a mobile app that takes numbers from the user. I am wondering how I can make that textinput to take user input(numbers) in an additive manner such that when a user clicks 5 two times the textInput accepts the input as 10 instead of 55

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I was able to achieve the textinput that I needed. My aim was to use a custom keyboard with buttons 1, 2, 5, 10, 20, 50, 100 and 200 so that when a user clicks 10 and then 5 the textinput displays 15 instead of 105 as a normal keyboard and textinput would behave.

    const CustomInput = () => {
  const [textValue, setTextValue] = useState();
  const [value, setValue] = useState('');
  const [input, setInput] = useState(false);
  const [lastInput, setLastInput] = useState(0);

  const onChangeText = text => {
    let newValue;
    setTextValue(text);

    if (value == '') {
      newValue = Number(text);
    } else {
      newValue = Number(value) + Number(text);
    }
    setValue(newValue);
    setTextValue('');
  };

  return (
    <View style={[styles.container, {marginTop: 40, paddingVertical: 70}]}>
      <CustomTextInput
        placeholder={value !== '' ? `${value}` : 'Enter a number'}
        placeholderTextColor={value !== '' ? 'black' : '#0009'}
        value={textValue}
        customKeyboardType="price"
        onChangeText={val => onChangeText(val)}
        style={styles.input}
      />
      <Text style={{color: 'black'}}>text: {textValue}</Text>
      <Text style={{color: 'black'}}>Price: {value}</Text>
    </View>
  );
};

  2. 0

    You can try this approach.

       const onTextInput = (value) => {
        let savedValue;
        if (savedValue == value) {
          savedValue = savedValue + value;
          performCalculation(savedValue);
        } else {
          savedValue = value;
          performCalculation(savedValue);
        }
      };

 const TypeHere = () => {

  return (
    <View style={{padding: 10}}>
      <TextInput
        style={{height: 40}}
        placeholder="Type here!"
      onChangeText={text => onTextInput(text)}
      />
    </View>
  );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search