wants to show selected image in other component in reactNative - react-native

Question

i have a problem i select an image from my phone gallery but now i want to pass it into an other component how i can achieve this ?
i have a component named as gallery in this component i render images from my phone gallery .and i can select any one image from gallery after that when i select a image i want to send it into an other component named as APPLYFILTER
here is my code of Component named as gallery which i used too get image from gallery
import React, { Component } from "react";
import { TouchableOpacity,StatusBar,View,Modal,
TouchableHighlight,StyleSheet,Image } from "react-native";
import { connect } from "react-redux";
import { DrawerNavigator, NavigationActions } from "react-navigation";
import {Icon} from 'react-native-elements';
import {
Container,
Header,
Title,
Content,
Text,
Button,
Left,
Body,
Right,
List,ListItem,Thumbnail,Footer,FooterTab
} from "native-base";
import { Grid, Row } from "react-native-easy-grid";
import CameraRollPicker from 'react-native-camera-roll-multi-picker';
export default class Search extends Component {
static navigationOptions = {
header: null
}
constructor(props) {
super(props);
this.state = {
pickedImage:null,
num:0,
selectSingleItem:true,
images:[],
};
}
getSelectedImages(images){
let image = images.length > 0 ? images[images.length-1] : null;
this.setState({pickedImage:image, images:images,num:images.length});
}
addfilter()
{
if(this.state.num>0)
{
this.props.navigation.navigate('AddFilter');
}
else{
alert('Please select a image');
}
}
render() {
return (
<Container>
<Header>
<Left>
<Button transparent active onPress={()
=>this.props.navigation.navigate('Home') }>
<Text style={{color:'#000'}}>Cancel</Text>
</Button>
</Left>
<Right>
<Button transparent onPress={this.addfilter.bind(this) }>
<Text style={{color:'#000'}}>Next</Text>
</Button>
</Right>
</Header>
<Content >
<View style={{height:300,}}>
<Image source={this.state.pickedImage} resizeMode={'stretch'}style={{ width: '100%', height:300 }} />
{/* {this.state.image} */}
</View>
<CameraRollPicker selectSingleItem='true'
callback={this.getSelectedImages.bind(this)} />
</Content>
<Footer>
<FooterTab>
<Button >
<Text >Gallery</Text>
</Button>
<Button>
<Text>Photos</Text>
</Button>
<Button >
<Text>Videos</Text>
</Button>
</FooterTab>
</Footer>
</Container>
);
}
}
const styles = StyleSheet.create({
container:{
flex: 1,
}
})

Answer 1

You can pass Image as props value to AddFilter component.
this.props.navigation.navigate('AddFilter',<Image Value>).