How can I carry a variable from one page to another using YouTube-API-Iframe and React-native-router-flux

I am very new to react-native and currently following a instruction page related to making a Youtube API with React-router-flux & Youtube-iFrame.

The App I am making uses a Youtube API and Iframe and utilises react-native-router-flux. The App will look at a routing page to determine how to interpret where to send routing requests (this.watchVideo-> Actions.watchvideo->Route.js->App from Videos.js)

I can get functionality from the App I am building, by that I mean I can get it to play one.single.Youtube video that is hardcoded into the destination page but in a very simple paragraph I would like to carry a dynamic variable (The youtube video Id) from one page to another.

In previous attempts by some luck (Perhaps a hack) I have managed to drill down through the JSON that is retreived by using this.state.videos[0]id.VideoId and managed to retreive the Youtube video Id I would like to use from a variable on the destination page

Hacks

It seems in the destination page the target video must be surrounded by speech marksI have tried the following on the destination page:this.state.Videos[0]using a variable (I.E Refine = this.state.videos - calling refine with curly braces)putting quotation marks in the destination page ("+"+"+{Refine}+"+"+")using a Array in the destination page ("+"+"+[Refine]"+"+"")

I understand the logic behind the Onpress feature and that I will be sending the Variable to Youtube through the router flux. I do understand how to send the variable from on press feature to the

I have tried various options such as

Here is the page I am following

Here is my code from the page that will house the Youtube video player:

import React, { useState, useCallback, useRef } from "react";import { Button, View, Alert } from "react-native";import YoutubePlayer from "react-native-youtube-iframe";import fetchPlaylistData from './Home.js';export default function App() {const [playing, setPlaying] = useState(false);const onStateChange = useCallback((state) => {if (state === "ended") {  setPlaying(false);  Alert.alert("video has finished playing!");}}, []);const togglePlaying = useCallback(() => {setPlaying((prev) => !prev);}, []);return (<View><YoutubePlayer    height={300}    play={playing}    videoId={"5NvUjGrwl_g"}    onChangeState={onStateChange}  /><Button title={playing ? "pause" : "play"} onPress={togglePlaying} /></View>); }

Here is my code from the page that will make the request for the Youtube video

       import React, { Component } from 'react'; import { StyleSheet, SafeAreaView,           FlatList, Text, TouchableOpacity } from 'react-native';     import { WebView } from 'react-native-webview';    import Youtube from 'react-native-youtube';    import text from './Intro.tsx';     import {Actions, Stack, Scene} from 'react-native-router-flux'; const MAX_RESULT =     1500 ; const SNIPPET = {text} ; const API_KEY = "YOUR KEY HERE"; export default class home extends Component<{}> {  home(){    Actions.home();  }  watchVideo(video_url){    Actions.watchvideo({video_url: video_url});  }  componentDidMount() {    this.fetchPlaylistData();  }  fetchPlaylistData = async () => {let i= text;let item = this.state.videos[0];    const response = await fetch(`https://www.googleapis.com/youtube/v3/search?part=snippet&q=${[i]}&key=${API_KEY}`);    const json = await response.json();    this.setState({ videos: json ['items'] , loading : false })      };  constructor(props) {    super(props);    this.state = {      videos: [], loading :true    }  }  render() {    const videos = this.state.videos;    return (<SafeAreaView style={styles.safeArea}><FlatList              data={this.state.videos}              keyExtractor={(_, index) => index.toString()}              renderItem={                ({item}) => <TouchableOpacity                youtube_url={item.id.videoId}                    style={styles.demacate}                    onPress={() => this.watchVideo(item.id.videoId)}><Text style={styles.item}>Lyrics Search :                {item.snippet.title} - This Is the most relevant search result</Text></TouchableOpacity>              }            /></SafeAreaView>    );  }}const styles = StyleSheet.create({  safeArea: {    flex: 1,    backgroundColor: '#000',    color: "#FFD700",  },  demacate: {    borderBottomColor: 'gold',    borderBottomWidth: 2,    borderRadius:10  },  item: {  color: "#FFD700",    padding: 10,    fontSize: 12,    height: 44,  },});