Manipulating Global State Variables in React Native

Question

I'm fairly new to react native and developing a very simple game. This game consists of three different tabs through the use of the bottom tab navigation.

Here are the different tabs I'm using for this game.

Screen 1: https://i.stack.imgur.com/R6TNm.png

Screen 2: https://i.stack.imgur.com/o21rh.png

Screen 3: https://i.stack.imgur.com/argoi.png

My main question is: If someone presses the Weapon1 button in Screen2 it will call the weaponOne() function defined in my Game.js file. It should update the current state of my global state variable enemyBar to enemyBar = enemyBar - 0.1 and accordingly update the UI in Screens 1 & 2. Likewise if the user presses QuickFix in Screen 3 it will call the quickFix() and change the state variable from hpBar to hpBar = hpBar + 0.1 and update the UI for Screens 1 & 3. How would I go about manipulating these global state variables?

Thanks in advance for the help.

Global State Reference: Global state in React Native

Global.js

module.exports = {
    screen1: null
};

Game.js

import React from 'react';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import * as Progress from 'react-native-progress';
import GLOBAL from '../../state/Global'

import {
    SafeAreaView,
    StyleSheet,
    ScrollView,
    View,
    Text,
    StatusBar,
    Button

} from 'react-native';

import {
    Header,
    LearnMoreLinks,
    Colors,
    DebugInstructions,
    ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import { createAppContainer } from 'react-navigation';
import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs';

//GLOBAL.screen1 = this;

GLOBAL.screen1 = {
    hpBar: 0.65,
    enemyBar: 0.87
}




class CaptainScreen extends React.Component {

    /* constructor() {
         super();
         this.state = {
             hpBar: 1,
             enemyBar: 1,
         }
     } */


    render() {

        return (
            <View style={styles.container}>

                <Text style={styles.title}>Captain Screen</Text>

                <View style={styles.container2} >
                    <Progress.Bar progress={GLOBAL.screen1.hpBar} width={200} animated={true} borderColor={'black'} />
                    <Text style={styles.text}>Your HP: {GLOBAL.screen1.hpBar * 100}%</Text>
                    <Progress.Bar progress={GLOBAL.screen1.enemyBar} width={200} color={'red'} animated={true} borderColor={'black'} />
                    <Text style={styles.text}>Enemy HP: {GLOBAL.screen1.enemyBar * 100}%</Text>
                </View>

            </View>
        )
    }
}


class WeaponsScreen extends React.Component {

    weaponOne = () => {


        this.setState({ enemyBar: 1.0 - 0.1 })
    }

    render() {
        //GLOBAL.screen1 = this;

        return (
            <View style={styles.container}>
                <Text style={styles.title}>Weapons Screen</Text>

                <View style={styles.container2} >

                    <Progress.Bar progress={GLOBAL.screen1.enemyBar} width={200} color={'red'} animated={true} borderColor={'black'} />
                    <Text style={styles.text}>Enemy HP: {GLOBAL.screen1.enemyBar * 100}%</Text>
                    <Button title="Weapon 1" onPress={() => this.weaponOne()}> </Button>
                    <Button title="Weapon 2"> </Button>
                    <Button title="Weapon 3"> </Button>

                </View>
            </View>
        )
    }

}



class EngineersScreen extends React.Component {
    quickFix = () => {

        this.setState({ hpBar: hpBar + 0.1 })
    }

    render() {

        return (
            <View style={styles.container}>
                <Text style={styles.title}>Engineer Screen</Text>

                <View style={styles.container2} >

                    <Progress.Bar progress={GLOBAL.screen1.hpBar} width={200} animated={true} borderColor={'black'} />
                    <Text style={styles.text}>Your HP: {GLOBAL.screen1.hpBar * 100}%</Text>

                    <Button title="Quick Fix" onPress={() => this.quickFix()}> </Button>
                    <Button title="Medium Fix"> </Button>
                    <Button title="Indepth Fix"> </Button>
                </View>
            </View>
        )
    }
}

Answer 1

In any case, handling global state is not difference with common apps. You can use Redux or RxJs or MobX yourself.

I prefer using Context API and hooks for state handling in my simple app.

Or you can just make a module for state handling.

State.ts

export let hp: number = 1

Consumer.ts

import { hp } from 'State';

console.log(hp); // 1
hp = 2;
console.log(hp); // 2