title: React Native - How to select an Image then send to another screen
body: <p>I'm new to coding and I have a question on how can you select an image from an array and send it to another page in the image source.</p>
  
  <p>I dont know if that is properly worded but this has been bothering for the last 4 days. </p>
  
  <p>I'll take any suggestions at all I want to learn from you.</p>
  
  <pre><code>import React, {Component,} from 'react';
  import {StyleSheet, Text, View, Platform, StatusBar, Image, Dimensions, TouchableOpacity, ScrollView } from 'react-native';
  import { Icon, Button, Container, Header, Content, Left, Right, Body } from 'native-base';
  import  Ionicons  from 'react-native-vector-icons/Ionicons';
  
  
  import Settings from './settings';
  import homescreen from './homescreen';
  import Saved from './bookmarkscreen';
  import IndivPhoto from './indivphoto';
  
  
  var gold = [
      require('../../images/pc1.jpg'),
      require('../../images/pc3.jpg'),
      require('../../images/pc4.jpg'),
      require('../../images/pc5.jpg'),
      require('../../images/pc6.jpg'),
      require('../../images/pc7.jpg'),
      require('../../images/pc8.jpg'),
      require('../../images/storm.png'),
      require('../../images/vanguard.png'),
      require('../../images/vanguard2.png'),
  ]
  </code></pre>
  
  <p><strong>This is the array of images.</strong></p>
  
  <pre><code>var {width,height} = Dimensions.get('window')
  export default class Profile extends React.Component {
  constructor(props)
  {
      super(props)
  
      this.state = {
          activeIndex: 0, 
      }
  }
  segmentClicked = (index) =&gt; {
      this.setState({
          activeIndex: index
      })
  }
  
  renderSectionOne = () =&gt; {
      return gold.map((image,index)=&gt;{
          return(
          &lt;TouchableOpacity key={index} onPress={() =&gt;  this.props.navigation.navigate('IndivPhoto')}&gt;
              &lt;View key={index} style={[ {width:(width)/3}, {height:(width)/3},
              { marginBottom: 2 },
               index % 3 !==0 ? {paddingLeft: 2 }: {paddingLeft: 0 }
               ]}&gt;
                  &lt;Image  
                      resizeMethod="resize" 
                      style={{flex:1, width: undefined, height: undefined}}
                      source={image}
                  /&gt;
              &lt;/View&gt;
          &lt;/TouchableOpacity&gt;
          )
      })
  }
  </code></pre>
  
  <p>This is the render method for the images in var gold. What i want to know is how can i select an individual image from the map render section and send it to another screen.</p>
  
  <p>class IndivPhoto extends React.Component {
   constructor(props)
      {
          super(props)</p>
  
  <pre><code>    this.state = {
          activeIndex: 0
      }
  }
   render() {
       return(
          &lt;ScrollView&gt;
              &lt;Header&gt;
                  &lt;Left&gt;
                      &lt;TouchableOpacity onPress={() =&gt; this.props.navigation.navigate('Profile')}&gt;
                        &lt;Icon name="ios-arrow-round-back" 
                        style={{paddingLeft:10, right:8, fontSize: 50}}/&gt;
                      &lt;/TouchableOpacity&gt;
                      &lt;/Left&gt;
                      &lt;Body&gt;
                  &lt;Text style={{right: 45, fontSize: 19, fontFamily: 'SourceSansPro-SemiBold' }}&gt;Photo&lt;/Text&gt;
                  &lt;/Body&gt;
              &lt;/Header&gt; 
              &lt;Content&gt;
                  &lt;View style={{borderTopWidth: 1, borderTopColor: '#eae5e5', shadowOpacity: 10}}&gt;
                  &lt;Left&gt; 
                      &lt;Image style={{borderRadius: 75, height: 32, width: 32, right: 145, top: 10}}
                      source={require('../../images/outfit2.png')}/&gt;
                          &lt;Text style={{ color: '#000',bottom: 18, right: 101, fontSize: 15, fontFamily: 'Roboto-Medium'}}&gt;outfit&lt;/Text&gt;
                  &lt;/Left&gt; 
                  &lt;/View&gt;
                  &lt;View style={{borderTopWidth: 1, borderTopColor: '#eae5e5'}}&gt;
                      &lt;Image resizeMethod="resize"
  
                      // put here from what is selected from profilescreen
                      source={{ }}
  
                      style={{height:350, width:null, flex:1}}/&gt;
                      &lt;/View&gt;
  </code></pre>
  
  <p>This is the screen I want to send the image into the source from profilescreen.</p>