Navigation - Pass variable to other files

Question

I'm new on React-Native and it's my first React-Native app. However, I have already some problems.

I want to pass a variable from one class (Home.js) to an another. (Is it possible without using the composent in the render() fonction ?)

##### Home.js #####
class Home extends Component {
constructor(props) {
    super(props);
    this.state = {direction: "defaultvalue"};  
  }

  getCurrentDirection() {
        return this.state.direction;
    }

  render() {
  /***..... some elements ..*/
    }
}
export default Home

And

#### Two.js ####
import Home from './Home'

/** SOME CODE **/    

const DrawerOptions = {
  initialRouteName: Home.getCurrentDirection(),
  contentComponent: CustomDrawerContentComponent,  
  drawerWidth: 300,
};

However it doesn't work... How to resolve it ? I have already try some solutions as declare the getCurrentDirection as static but nothing.

In addition, it seems to be a specific case because DrawerOptions is not a class. Could you please, add to your response also, how make it if I want to obtain the variable into the class Two.js ? I meant if Two.js was for example :

 ##### Two.js #####
    class Two extends Component {
    var myvariable = Home.getCurrentDirection();

      render() {
      /***..... some elements ..*/
        }
    }

Thanks a lot in advance

score 1 · Accepted Answer · answered Jun 30 '17 at 21:20

A recommendable way of accessing the state from a component into another is to use (in this case) the Home component as a parent of Two component. This way you don't have to trigger a function to access the Home's state. On each time when the state of the parent (in this case) component will be updated, the Two component will receive the updated property (direction). If you want to call a function from Two component, you have to pass it a function as a property (changeCurrentDirection) that will call back the function you want to trigger from Home component.

So you would have something like this:

class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      direction: "defaultValue"
    };
  }

  changeCurrentDirection() {
    this.setState({
      direction: "valueChanged"
    })
  }

  render() {
    let state = this.state;

    return (
      <Two 
        direction={state.direction}
        changeCurrentDirection={() => this.changeCurrentDirection.bind(this)}/>
    )
  }
}

class Two extends React.Component {
  render() {
    let props = this.props;
    
    return (
      <div>
        <h3>{props.direction}</h3>
        <button onClick={props.changeCurrentDirection()}>Change value</button>
      </div>
    )
  }
}


React.render(<Home/> , document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.min.js"></script>
<div id="app"></div>

Additional info you can find here.

Also, if you want to have a good management of the state of your components, my advice for you is to use redux. Using this library you can easily connect the component's actions and properties that can further be accessible from other files where you can manage them.

Navigation - Pass variable to other files

1 Answers1