title: Passing Data in React Navigation using setParam and getParam
body: <p>What I'm trying to do is to send the Image or Data to other Stack Navigator using getParams and setParams.</p>
  
  <p>In GalleryScreen, what Image picked will set to <code>pickedImage</code> state, then I <code>setParams</code> the <code>pickedImage</code> state and I pass it to the parameter of <code>navigate(screen), {here}</code>. Then on the other screen, I <code>getParam(submitFn)</code> then pass to my <code>Image source={getImage}</code></p>
  
  <p>I think what I went wrong is the part <code>setImageData</code> because I think this will not trigger to <code>setParams</code>? </p>
  
  <p>GalleryScreen.js:</p>
  
  <pre><code>class GalleryScreen extends React.Component {
    state = {
      photos: [],
      index: null,
      pickedImage: null
    };
  
    setImageData = () =&gt; {
      this.props.navigation.setParams({submitImage: this.state.pickedImage});
    }
  
  
    getPhotos = () =&gt; {
      CameraRoll.getPhotos({
        first: 1000,
        assetType: 'All',
        groupTypes: 'Event'
      })
      .then(res =&gt; {
        this.setState({ 
          photos: res.edges,
        });
      })
      .catch((err) =&gt; {
        console.log('Error image: ' + err);
      });
    };
  
    render() {
      return (
          &lt;View style={styles.container}&gt;
              &lt;StatusBar backgroundColor="white"/&gt;
              &lt;Image source={{uri: this.state.pickedImage}} style={styles.image}/&gt;
              &lt;ScrollView contentContainerStyle={styles.scrollView} showsVerticalScrollIndicator={false}&gt;
                  {this.state.photos.map((photos, index) =&gt; {
                      return(
                          &lt;TouchableHighlight 
                              style={{opacity: index === this.state.index ? .5 : 1}}
                              onPress={() =&gt; this.setState({pickedImage: photos.node.image.uri})}
                              key={index}
                              underlayColor='transparent'
                          &gt;
                              &lt;Image
                                  style={{width: width / 3, height: width / 3}}
                                  source={{uri: photos.node.image.uri}}
                                  resizeMode='cover'
                              /&gt;
                          &lt;/TouchableHighlight&gt;
                      );
                  })}
              &lt;/ScrollView&gt;
          &lt;/View&gt;
      );
    }     
  
  }
  
  GalleryScreen.navigationOptions = navData =&gt; {
  const submitFn = navData.navigation.getParam('submitImage');
  return {
      headerTitle: 'Gallery',
      headerStyle: {
          paddingTop: 20,
          height: 75
      },
      headerRight: () =&gt; (
          &lt;HeaderButtons HeaderButtonComponent={HeaderButton}&gt;
              &lt;Item
                  // title="Cart"
                  iconName="md-arrow-forward"
                  onPress={() =&gt; {
                      navData.navigation.navigate('EventInput', {
                          submitFn
                      })
                  }}
              /&gt;
          &lt;/HeaderButtons&gt;
      )
  };
  </code></pre>
  
  <p>};</p>
  
  <p>EventInput.js:</p>
  
  <pre><code>render(){
    const getImage = this.props.navigation.getParam('submitFn');
    return (
      &lt;Image source={{uri: getImage}} style={styles.image}/&gt;
    );
  }
  </code></pre>