Хочет показать выбранное изображение в другом компоненте в reactNative

У меня проблема, я выбрал изображение из своей телефонной галереи, но теперь хочу передать его другому компоненту, как я могу этого добиться? У меня есть компонент, названный галереей в этом компоненте, я визуализирую изображения из моей телефонной галереи. и я могу выбрать любое изображение из галереи после этого, когда я выбираю изображение, я хочу отправить его в другой компонент с именем APPLYFILTER вот мой код компонента, названного галереей, который я использовал, чтобы получить изображение из галереи

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,
}
})