title: React-native how to use a state value in another javasript file
body: <p>I want to use a value, from the file Step3.js in Step4.js, the value can change after user input in Step3. But how can I use this value in Step4?</p>
  
  <p>I have tried some things, but I guess I miss the point here, so hopefully somebody can help me out with this.</p>
  
  <p>This is my code:</p>
  
  <p>App.js:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from 'react'
  import { AppRegistry, StyleSheet, View, Text } from 'react-native'
  import { ViewPager } from 'rn-viewpager'
  
  import StepIndicator from 'react-native-step-indicator'
  
  import Step1 from "./Step1";
  import Step2 from "./Step2";
  import Step3 from "./Step3";
  import Step4 from "./Step4";
  
  const PAGES = [{id: 1, page: &lt;Step1/&gt;},{id: 2, page: &lt;Step2/&gt;}, {id: 3, page: &lt;Step3/&gt;}, {id: 4, page: &lt;Step4/&gt;}];
  
  const firstIndicatorStyles = {
      stepIndicatorSize: 30,
      currentStepIndicatorSize: 40,
      separatorStrokeWidth: 5,
      currentStepStrokeWidth: 3,
      separatorFinishedColor: '#4aae4f',
      separatorUnFinishedColor: '#a4d4a5',
      stepIndicatorFinishedColor: '#4aae4f',
      stepIndicatorUnFinishedColor: '#a4d4a5',
      stepIndicatorCurrentColor: '#ffffff',
      stepIndicatorLabelFontSize: 15,
      currentStepIndicatorLabelFontSize: 15,
      stepIndicatorLabelCurrentColor: '#000000',
      stepIndicatorLabelFinishedColor: '#ffffff',
      stepIndicatorLabelUnFinishedColor: 'rgba(255,255,255,0.5)',
      labelColor: '#666666',
      labelSize: 12,
      currentStepLabelColor: '#4aae4f'
  };
  
  
  
  export default class App extends Component {
      constructor (props) {
          super(props);
          this.state = {
              currentPosition: 0,
              stepCount: 4,
          }
      }
  
      componentWillReceiveProps (nextProps, nextState) {
          if (nextState.currentPosition != this.state.currentPosition) {
              if (this.viewPager) {
                  this.viewPager.setPage(nextState.currentPosition)
              }
          }
      }
  
      render () {
          return (
              &lt;View style={styles.container}&gt;
                  &lt;ViewPager
                      style={{ flexGrow: 1 }}
                      ref={viewPager =&gt; {
                          this.viewPager = viewPager
                      }}
                      onPageSelected={page =&gt; {
                          this.setState({ currentPosition: page.position })
                      }}
                  &gt;
                      {PAGES.map(page =&gt; this.renderViewPagerPage(page))}
                  &lt;/ViewPager&gt;
                  &lt;View style={styles.stepIndicator}&gt;
                      &lt;StepIndicator
                          customStyles={firstIndicatorStyles}
                          currentPosition={this.state.currentPosition}
                          stepCount={this.state.stepCount}
                          labels={['Kleur', 'Vorm', 'Moeite', 'Overzicht']}
                      /&gt;
                  &lt;/View&gt;
              &lt;/View&gt;
          )
      }
  
      renderViewPagerPage = (data) =&gt; {
          console.log(data);
          console.log(this.state.currentPosition);
          return (
              &lt;View key={data.id}&gt;
                  {data.page}
              &lt;/View&gt;
          )
      }
  }
  
  const styles = StyleSheet.create({
      container: {
          flex: 1,
          backgroundColor: '#ffffff'
      },
      stepIndicator: {
          marginVertical: 20
      },
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>Step3.js:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export function getSelected3() {
      return this.state.selected;
  }
  
  class Step3 extends Component {
      constructor(props){
          super(props);
          this.state = {
              happy: {
                  "id" : "1",
                  "name" : "happy",
                  "src" : require('../../assets/images/makkelijk.png')
              },
              normal: {
                  "id" : "2",
                  "name" : "normal",
                  "src" : require('../../assets/images/gemiddeld.png'),
              },
              sad: {
                  "id" : "3",
                  "name" : "sad",
                  "src" : require('../../assets/images/moeilijk.png'),
              },
              selected: {
                  "id" : "4",
                  "name" : "",
                  "src" : require('../../assets/images/moeilijk.png'),
              },
          };
      }
  
      onPress = (item) =&gt; {
          this.state.selected.name = item.name;
          this.state.selected.src = item.src;
          alert(this.state.selected.name);
      };
  
      render() {
          return  (
              &lt;View style={styles.container}&gt;
                  &lt;View style={[styles.box]}&gt;
                      &lt;TouchableHighlight onPress={() =&gt; this.onPress(this.state.happy)}&gt;
                          &lt;Image
                              style={styles.image}
                              source={this.state.happy.src}
                          /&gt;
                      &lt;/TouchableHighlight&gt;
                  &lt;/View&gt;
                  &lt;View style={[styles.box]}&gt;
                      &lt;TouchableHighlight onPress={() =&gt; this.onPress(this.state.normal)}&gt;
                          &lt;Image
                              style={styles.image}
                              source={this.state.normal.src}
                          /&gt;
                      &lt;/TouchableHighlight&gt;
                  &lt;/View&gt;
                  &lt;View style={[styles.box]}&gt;
                      &lt;TouchableHighlight onPress={() =&gt; this.onPress(this.state.sad)}&gt;
                          &lt;Image
                              style={styles.image}
                              source={this.state.sad.src}
                          /&gt;
                      &lt;/TouchableHighlight&gt;
                  &lt;/View&gt;
              &lt;/View&gt;
          )
      }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>So I want to use the date from the state in Step3 selected into Step4.js, How can I Do this?</p>
  
  <p>Step4.js:</p>
  
  <pre><code>class Step4 extends Component {
  constructor(props) {
      super(props);
      this.state = {
          value3: {
              "id": "3",
              "name" : "",
              "src" : "",
          },
      };
  }
  
  render() {
  
      let test = getSelected3();  
      this.state.value3.src = value3.src;
      return (
          &lt;View style={styles.container}&gt;
              &lt;View style={[styles.box]}&gt;
                  &lt;TouchableHighlight&gt;
                      &lt;Image
                          style={styles.image}
                          source={this.state.value3.src}
                      /&gt;
                  &lt;/TouchableHighlight&gt;
              &lt;/View&gt;
              &lt;View style={[styles.box]}&gt;
                  &lt;TouchableHighlight&gt;
                      &lt;Image
                          style={styles.image}
                          source={this.state.value3.src}
                      /&gt;
                  &lt;/TouchableHighlight&gt;
              &lt;/View&gt;
              &lt;View style={[styles.box]}&gt;
                  &lt;TouchableHighlight&gt;
                      &lt;Image
                          style={styles.image}
                          source={this.state.value3.src}
                      /&gt;
                  &lt;/TouchableHighlight&gt;
              &lt;/View&gt;
          &lt;/View&gt;
      )
  }
  </code></pre>