React Native from child component to parent with StackNavigator - reactjs

Question

How I do to navigate from child component to parent?
YoutubeVideo.js
<YouTube
videoId={this.state.VideoId}
play={false}
loop={false}
apiKey={apikey}
onReady={e => this.setState({ isReady: true })}
onChangeState={e => this.setState({ status: e.state })}
onChangeQuality={e => this.setState({ quality: e.quality })}
onError={e => this.setState({ error: e.error })}
style={{ alignSelf: 'stretch', height: 250 }}
/>
<Related videoId={this.state.VideoId} />
</View>
RelatedComponent.js
<View>
<ScrollView>
<RkCard rkType='shadowed' >
{this.state.data.map((item, i) =>
<TouchableHighlight
key={item.id.videoId}
onPress={() => props.navigate('YoutubeVideo', {youtubeId:item.id.videoId})}>
<View rkCardContent>
<Image rkCardImg
source={{uri: item.snippet.thumbnails.medium.url}}
style={styles.image}/>
<View style={styles.vidItems}>
<Text style={styles.vidText}>{item.snippet.title}</Text>
<Icon name='more-vert' size={20} color='#555'/>
</View>
</View>
</TouchableHighlight>
)}
</RkCard>
</ScrollView>
</View>
I want to send new Youtube ID from related videos but its same page.

Answer 1

You don't need to navigate again to YoutubeVideo. you can pass videoID by a callback to parent like this:
RelatedComponent.js
...
<TouchableHighlight
onPress={() => {this.props.onVideoClick(item.id.videoId)} }
>
...
YoutubeVideo.js
...
<Related
videoId={this.state.VideoId}
onVideoClick={(videoID) => { this.setState({ VideoId: 'videoID' }) }}
/>
...
You can send data to parent by this way. I hope this will help you