How to set a few variables in ALL my .js files when app first loads? I need these to proportion all my screen sizes before the user sees

Question

I need to set ~10 variables relating to screen sizes BEFORE the user sees all the screens in the app. I can do this in the AppLoadingScreen.js (as that is universal in terms of size). I have the following function and switch statement (but i don't know how exactly to run it). Once they're set, i want to ensure all the screens (or .js files) have these variables set and ready to go.

export function whichScreen() {
  const dim = Dimensions.get('window');

  if ((dim.width === 375 )){
    return 0;
  }
  else if((dim.width === 414)){
    return 1;
  }
  else if((dim.width === 484 )){
    return 2;
  }
  else if((dim.width === 578 )){
    return 3;
  }
}


getScreenParams=()=>{

  let size = this.whichScreen();

  switch(size) {

      case 0:
        this.setState({ marginforcontainer: 2, marginforSignIn: 5, ....}) //Don't even know which class to put the state variables in?
        break;

      case 1:
        this.setState({ marginforcontainer: 6, marginforSignIn: 7, ....}) //Don't even know which class to put the state variables in?
        break;

      case 2:
        this.setState({ marginforcontainer: 8, marginforSignIn: 6, ....}) //Don't even know which class to put the state variables in?
        break;

      case 3:
        this.setState({ marginforcontainer: 4, marginforSignIn: 1, ....}) //Don't even know which class to put the state variables in?
        break;

      default:

    }
  }

I dont want to have to run the getScreenParams() function EVERY TIME a user moves onto each of the screens, thats just awful. Also putting them in AsyncStorage and calling a getItem() from AsyncStorage each time is expensive.

How do i run this once while the app is loading and set the variables i need??

Answer 1

You can create a parent wrapper component and inside you can render the routes. Route change will only re render the components within it. Not outside of it. So your getScreenParams() won't get called multiple times.

export class WrapperComponent() {
  componentDidMount() {
       getScreenParams(); 
  }

  render() {
    <React.Fragment>
     <Router>
       <Switch>
         <Route path="/about">
           <About dimensions={marginforcontainer}/>
         </Route>
         <Route path="/sign-in" dimensions={marginforSignIn}>
           <Users />
         </Route>
         <Route path="/">
           <Home dimensions={marginforcontainer}/>
         </Route>
       </Switch>
     </Router
   <React.Fragment>
  }
}


// Usage in app.js or any other main component.
const {marginforcontainer, marginforSignIn} = this.state;

<WrapperComponent>

Or instead of returning the case what you can do is just return an Object

export function whichScreen() {
  const dim = Dimensions.get('window');

  if ((dim.width === 375 )){
    return { marginforcontainer: 2, marginforSignIn: 5, ....};
  }

  else if((dim.width === 414)){
    return { marginforcontainer: 6, marginforSignIn: 7, ....};
  }
}

then each component { marginforcontainer, marginforSignIn} = this.whichScreen(); You're not changing any state by doing this. Just accessing the params from global/window.