Text is not updating in React Native-CodePudding

app.js

import { StatusBar } from "expo-status-bar";
import {
  TouchableOpacity,
  Button,
  StyleSheet,
  Alert,
  SafeAreaView,
  Text,
} from "react-native";

export default function App() {
  let count = 5;
  let counts = [count];
  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.Text}>Earn Money</Text>
      <TouchableOpacity
        onPress={() => {
          count  = 0.25;
          console.log(count);
        }}
        style={{
          height: 70,
          width: 130,
          backgroundColor: "#ff5c5c",
          alignSelf: "center",
          top: 25,
        }}
      >
        <Text
          style={{
            fontWeight: "900",
            alignSelf: "center",
            position: "relative",
            top: 25,
          }}
        >
          Earn 0.20$
        </Text>
      </TouchableOpacity>
      <Text style={styles.Balance}>{count}</Text>
      <StatusBar style="auto" />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: Platform.OS === "android" ? 90 : 0,
    paddingLeft: Platform.OS === "android" ? 10 : 0,
  },
  Text: {
    justifyContent: "center",
    alignSelf: "center",
    color: "orange",
    fontSize: 25,
    fontWeight: "900",
  },
  Balance: {
    justifyContent: "center",
    alignSelf: "center",
    color: "orange",
    fontSize: 25,
    fontWeight: "900",
    top: 100,
  },
});

So when I press touchableOpacity the count variable is supposed to add 0.25 to itself , That is working fine but the text

<Text style={styles.Balance}>{count}</Text>

is not updating.I would also want to know if the way I dispaly the variable count in <Text><Text/> is correct. THe text is just showing 5 I have no prior experience with React native if you would help pls do.

CodePudding user response：

React uses some hooks for updating the DOM you can't just use variables and expect it to update the DOM, in this instance you need to use useState hook

import { StatusBar } from "expo-status-bar";
import { useState} from "react";
import {
  TouchableOpacity,
  Button,
  StyleSheet,
  Alert,
  SafeAreaView,
  Text,
} from "react-native";

export default function App() {
  let [count, setCount] = useState(0);
  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.Text}>Earn Money</Text>
      <TouchableOpacity
        onPress={() => {
          setCount(c => c   0.5)
        }}
        style={{
          height: 70,
          width: 130,
          backgroundColor: "#ff5c5c",
          alignSelf: "center",
          top: 25,
        }}
      >
        <Text
          style={{
            fontWeight: "900",
            alignSelf: "center",
            position: "relative",
            top: 25,
          }}
        >
          Earn 0.20$
        </Text>
      </TouchableOpacity>
      <Text style={styles.Balance}>{count}</Text>
      <StatusBar style="auto" />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: Platform.OS === "android" ? 90 : 0,
    paddingLeft: Platform.OS === "android" ? 10 : 0,
  },
  Text: {
    justifyContent: "center",
    alignSelf: "center",
    color: "orange",
    fontSize: 25,
    fontWeight: "900",
  },
  Balance: {
    justifyContent: "center",
    alignSelf: "center",
    color: "orange",
    fontSize: 25,
    fontWeight: "900",
    top: 100,
  },
});

You can read this article to better understand react and how it works.

CodePudding user response：

import { useState} from "react";
const [count,setCount]=useState(5) // 5 is default value
const [update,setUpdate]=useState(0) // add this
export default function App() {
  let count = 5;
  let counts = [count];
  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.Text}>Earn Money</Text>
      <TouchableOpacity
        onPress={() => {
          count  = 0.25;
          setCount(count)       // add this
          setUpdate(update 1)   // add this
           
          console.log(count);
        }}
        style={{
          height: 70,
          width: 130,
          backgroundColor: "#ff5c5c",
          alignSelf: "center",
          top: 25,
        }}
      >
        <Text
          style={{
            fontWeight: "900",
            alignSelf: "center",
            position: "relative",
            top: 25,
          }}
        >
          Earn 0.20$
        </Text>
      </TouchableOpacity>
      <Text style={styles.Balance}>{count}</Text>
      <StatusBar style="auto" />
    </SafeAreaView>
  );
}