CODEWITHSUNDEEP
reactjsreact-native
priyo
priyo

Reputation: 85

React Native: How to declare and call global variables

I'm a beginner in react native. I am familiar with PHP. In PHP there is a global variable called: $_SESSION. Session is a way to store information (variables) that can be used across multiple pages.

I have created a login page with react native, through fetching to the mysql database, I get the user's identity and this identity will be used in various processes on many subsequent pages. I want to make the user's identity as a global variable.

My question, is there a global variable in react native ?

How to declare it ? Is it declared here and how is the structure ?

    constructor(props){
        super(props);
        this.state={
        }
    }

And how to call it? Do with models like here?

    const { navigation } = this.props;
    data={this.props.navigation.state.params.ds}

Thank you for the help

Upvotes: 2

Views: 11648

Answers (4)

amirhosein
amirhosein

Reputation: 921

the best way i khnow is to use redux , but if you dont want,you can create a global.ts file,define variables , create setter and getter and some more...

global.ts

class Variables {
    private myNumber:number = 0;
    private myName:string = ''
    // you can define more variables

    public get_myNumber(){
        return this.myNumber;
    }

    public set_myNumber(new_number:number){
        this.myNumber = new_number;
    }

    public get_myName(){
        return this.myname;
    }

    public set_myName(new_name:string){
        this.myName = new_name;
    }

}

export default new Variables() // this line is important because make this class singleton,so it will same in every where you want to use it
//also you can use react and react native functionality like Dimension as like as use in normal js file,for example you can set width and heigth from "import { Dimension } from 'react-native' in this file and use it globaly

Upvotes: 2

Pramod
Pramod

Reputation: 1940

Create a js file in your folder structure (myVariables.js). add your variables with global as prefix like: global.domain = "www.xyz.com"

Then import the file in your app.js (import ./myVariables.js) Now access your declared global variable in your components like: global.domain

Upvotes: 1

Govind Soni
Govind Soni

Reputation: 313

You can use the React context it provides a way to pass data through the component tree without having to pass props down manually at every level.

First, you have to create the React Context itself which gives you access to a Provider and Consumer component. When you create the context with React by using createContext, you can pass it an initial value. The initial value can be null too.

Please have a look as below:

// src/ThemeContext.js
import React from 'react';
const ThemeContext = React.createContext(null);
export default ThemeContext;

Second, component A would have to provide the context with the given Provider component. In this case, its value is given to it right away, but it can be anything from the component state (e.g. fetched data) to props. If the value comes from a modifiable React State, the value passed to the Provider component can be changed too.

// src/ComponentA.js
import React from 'react';
import ThemeContext from './ThemeContext';
const A = () => (
  <ThemeContext.Provider value="green">
    <D />
  </ThemeContext.Provider>
);

Component A displays only component D, doesn't pass any props to it though, but rather makes the value green available to all the React components below. One of the child components will be component C that consumes the context eventually.

Third, in your component C, below component D, you could consume the context object. Notice that component A doesn’t need to pass down anything via component D in the props so that it reaches component C.

// src/ComponentC.js
import React from 'react';
import ThemeContext from './ThemeContext';
const C = () => (
  <ThemeContext.Consumer>
    {value => (
      <p style={{ color: value }}>
        Hello World
      </p>
    )}
  </ThemeContext.Consumer>
);

The component can derive its style by consuming the context. The Consumer component makes the passed context available by using a render prop. As you can imagine, following this way every component that needs to be styled according to the theme could get the necessary information from React's Context by using the ThemeContext's Consumer component now. You only have to use the Provider component which passes the value once somewhere above them.

Upvotes: 2

savan patel
savan patel

Reputation: 264

declare => [global.SampleVar = 'This is Global Variable.';]

call => [console.log(global.SampleVar)]

Upvotes: 1

Related Questions