global variable update in react native

Question

hey guys I have a global variable which can hold my count of items.and I have have a class which can contain a textbox and showing my count on header. when I update my global variable .. like global.variable = 5 and then I'm updating it like.. ++global.variable. it update its value but it can't serenader that textbox at that time and that textbox is used in many classes. here's my count class

    class count  extends Component {
    constructor(props){
      super(props);
      state = {
        xyz:0
      }
    }


    render() {
      return (        
  <Text style={{color:'white',fontSize:10}}>{global.count}</Text>  
    )}
  }
export default count;

and this way that I'm using this class

<count />

I want that whenever I do global.count++ it can increase its value and update that value on textbox and that text is used in many..and that item is in header thanks...

ROFactum · Accepted Answer · 2018-10-04 13:59:07Z

1

You can put that variable in your state and everytime you want to update this variable you can use this.setState({ yourvariable : newValue}). In react-native when you change your state the function render() is called again, therefore it will change your textbox value.

A good way to deal with this kind of global value is to use Redux to share a global state in your app, using Redux you can guarantee that the value will be accessed in every part of your app that this value is necessary. You can read more about redux in https://redux.js.org/

answered Oct 4, 2018 at 13:59

ROFactum

213 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tanveerbyn Over a year ago

my count class is a child class which is set on a header of main screen when I navigate to main screen it says this.state... is not an object

talhamaqsood890 · Accepted Answer · 2023-10-31 09:02:39Z

0

This is some based on standard practices in React and JavaScript.

you can use React's built-in state management to achieve your goal

<Text style={{ color: 'white', fontSize: 10 }}>{this.props.global.count}</Text>

Call the component like this,

<Count global={global} />

answered Oct 31, 2023 at 9:02

talhamaqsood890

3894 silver badges17 bronze badges

Collectives™ on Stack Overflow

global variable update in react native

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related