CODEWITHSUNDEEP
javascriptreactjsreact-native
the python guy
the python guy

Reputation: 65

Text is not updating in React Native

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.

Upvotes: 0

Views: 840

Answers (2)

Vhora Abdulrauf
Vhora Abdulrauf

Reputation: 122

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>
  );
}

Upvotes: 1

Sarkar
Sarkar

Reputation: 1879

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.

Upvotes: 4

Related Questions