TextInput Not Updating When Buttons Are Pressed

Question

I am working on a React Native application to create a calculator. I have a TextInput field where I want to display the input, and I'm trying to use the showSoftInputOnFocus property with editable={false} to prevent the keyboard from showing. However, even with this configuration, the content in the TextInput field is not updating when I press the number buttons.

I've set up my code to use the showSoftInputOnFocus property, and I'm wondering if there's something I'm missing or if there's an alternative approach to make the TextInput field update when the number buttons are pressed.

Below is my code for reference:

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

export default function App() {
  const [total, setTotal] = useState("")
  const handlePressBtn = (val) => {
    if (val == "C") {
      setTotal("")
    }
  }
  return (
    <SafeAreaView style={styles.main}>
      <TextInput showSoftInputOnFocus={false} editable={false} style={styles.screen} value={total}></TextInput>

      <View style={styles.button_row}>
        <TouchableOpacity style={styles.number_button}>
          <Text style={styles.button_text} onPress={() => handlePressBtn("7")}>7</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.number_button}>
          <Text style={styles.button_text} onPress={() => handlePressBtn("9")}>8</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.number_button}>
          <Text style={styles.button_text} onPress={() => handlePressBtn("9")}>9</Text>
        </TouchableOpacity>
      </View>

      <View style={styles.button_row}>
        <TouchableOpacity style={styles.number_button}>
          <Text style={styles.button_text} onPress={() => handlePressBtn("4")}>4</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.number_button}>
          <Text style={styles.button_text} onPress={() => handlePressBtn("5")}>5</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.number_button}>
          <Text style={styles.button_text} onPress={() => handlePressBtn("6")}>6</Text>
        </TouchableOpacity>
      </View>
      <View style={styles.button_row}>
        <TouchableOpacity style={styles.number_button}>
          <Text style={styles.button_text} onPress={() => handlePressBtn("1")}>1</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.number_button}>
          <Text style={styles.button_text} onPress={() => handlePressBtn("2")}>2</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.number_button}>
          <Text style={styles.button_text} onPress={() => handlePressBtn("3")}>3</Text>
        </TouchableOpacity>
      </View>

    </SafeAreaView >
  );
}
const styles = StyleSheet.create({
  main: {
    flex: 1,
    backgroundColor: 'black',
    justifyContent: 'flex-end',
    alignItems: 'center',
    paddingBottom: 20,
    gap: 10
  },
  screen: {
    width: '100%',
    height: 200,
    color: 'white',
    textAlign: "right",
    fontSize: 34
  },
  button_row: {
    flexDirection: 'row',
    gap: 15,
    width: '90%'

  },
  number_button: {
    flex: 1,
    width: 80,
    height: 80,
    borderRadius: 60,
    backgroundColor: 'blue',
    justifyContent: 'center',
    alignItems: 'center',
  },
  button_text: {
    color: 'white',
    fontSize: 35
  },
});

How to resolve this issue without using state hooks?

Answer 1

Maybe this happens because, the area clickable in the <Text/> components is small. Try to use the onPress event in the <TouchableOpacity/> components.

https://snack.expo.dev/@hlmnd/demo