How to modify/calculate a balance on different screens? - react-native

Question

I want to have a balance account screen, which when a user withdraws or deposits, the balance account is modified accordingly. Sounds simple enough only problem is that I've just started learning react and google isn't being super helpful.
So far I have a BankBalance.js and several screens that I will use to modify the value, so below is the current code for BankBalance.js:
import React from "react";
import { Text } from "react-native";
import styles from "../components/styles";
var initBalance = 1903.54;
var amount = 0;
var finalBalance = initBalance + amount;
var BankBalance = () => {
return <Text style={styles.textMain}>£{finalBalance.toString()}</Text>;
};
export default BankBalance;
And an example from the deposit screen:
import React from "react";
import { useNavigation } from "#react-navigation/core";
import { Text, View, Image } from "react-native";
import { StatusBar } from "expo-status-bar";
import styles from "../components/styles";
import AppButton from "../components/AppButton";
import ExitBtn from "../components/ExitBtn";
import Keyboard from "../components/Keyboard";
function CDScreen(props) {
const navigation = useNavigation();
return (
<View style={styles.container}>
<StatusBar style="auto" />
<View style={styles.topBanner}>
<Text style={styles.topBanTxt}>Enter an amount to deposit</Text>
</View>
<View style={styles.container}>
<Image
resizeMode="contain"
source={require("../assets/cash-dep.png")}
/>
<Keyboard />
<AppButton
style={styles.textMain}
onPress={() => navigation.push("Receipt")}
title="Accept"
/>
</View>
<View style={styles.btmBanner}>
<ExitBtn
style={styles.btmBanTxt}
onPress={() => navigation.goBack()}
title="Go Back"
/>
</View>
</View>
);
}
export default CDScreen;
I'm probably going about this the wrong way so if anyone has pointers that would be really great.
Just in case Keyboard:
import React, { Component } from "react";
import { TextInput, StyleSheet, View } from "react-native";
import { Entypo } from "#expo/vector-icons";
import styles from "../components/styles";
class Keyboard extends Component {
constructor() {
super();
this.state = {
amount: "",
};
}
handleAmount(txt) {
this.setState({
amount: txt,
});
}
render() {
return (
<View style={keyStyles.keyContainer}>
<Entypo name="keyboard" size={35} color="black" />
<TextInput
keyboardType="numeric"
onChangeText={this.handleAmount.bind(this)}
value={this.state.amount}
style={styles.txtInput}
></TextInput>
</View>
);
}
}
const keyStyles = StyleSheet.create({
keyContainer: {
justifyContent: "center",
alignItems: "center",
alignContent: "center",
padding: 8,
},
});
export default Keyboard;
Thanks in advance :)

Answer 1

Redux You can translate a simple counter application given here. It can be a main balance, not initial 0. Accordingly, you can find a solution to the problem by triggering 'increment' when depositing money, and 'decrement' when withdrawing money.

Answer 2

In react the values of the components are not globally accessible. You will have to use something to store them and access them everywhere.
You can use Redux or Context for that