title: Passing State to another Component in React Native
body: <p>React Native <strong>Newbie</strong> here.</p>
  
  <p>I have an (in my opinion) common use case here. I work with React Navigation and have 4 different Tabs. In the first Tab I have a FlatList from which I want to choose Favourites. These Favourites should be then listed in the other Tab. Nothing more so far.</p>
  
  <p>The Problem I encounter is that I'm not figuring out how I can transmit the favourites variable declared in my state of the first tab, to the other Tab. Maybe the approach is completely wrong too..</p>
  
  <p><strong>First Tab/Screen</strong>:</p>
  
  <pre><code>import React, {Component} from 'react';
  import { FlatList, Text, View, ScrollView, Image, TouchableHighlight} from 'react-native';
  import Icon from 'react-native-vector-icons/Ionicons'
  
  export default class HomeScreen extends Component {
  
    state = {
      data: [],
      favourites: []
    };
  
    //Function called on the click of the Heart Button, adding the List Element to the State
    addFav = item =&gt; {
      this.setState((prevState) =&gt; ({'favourites': prevState.favourites+item.title+' '}))
      alert(item.title)
    }
  
    componentWillMount() {
      this.fetchData();
    }
  
    //Fetching the data from the API
    fetchData = async () =&gt; {
      const response = await fetch("http://192.168.1.19:8080/v1/api/event");
      const json = await response.json();
      this.setState({ data: json});
    };
  
    render() {
      return &lt;FlatList
            ItemSeparatorComponent={() =&gt;
              &lt;View
                style={{ height: 1, width: '100%', backgroundColor: 'lightgray' }}
              /&gt;
            }
            data={this.state.data}
            keyExtractor={(item =&gt; item.title)}
            renderItem={({ item }) =&gt;
              &lt;ScrollView&gt;
                &lt;Image style={{alignSelf:'stretch', width:undefined, height:undefined, flex : 1, borderRadius:10}} source = {require('../img/landscape.jpeg')}/&gt;
                &lt;TouchableHighlight onPress={()=&gt;this.openEvent(item)}&gt;
                  &lt;View style={{flex: 1, flexDirection:'row', padding: 5}}&gt;
                    &lt;View style={{flex: 1}}&gt;
                      &lt;Text style={{fontSize:15, textAlign:'center', padding: 2}}&gt;{this.timeConverterMonth(item.time)}&lt;/Text&gt;
                      &lt;Text style={{fontSize:15, textAlign:'center', padding: 2}}&gt;{this.timeConverterDay(item.time)}&lt;/Text&gt;
                    &lt;/View&gt;
                    &lt;View style={{flex: 4}}&gt;
                      &lt;Text style={{fontSize:15, padding: 2}}&gt;{item.title}&lt;/Text&gt;
                      &lt;Text style={{fontSize:10, padding: 2}}&gt;{item.locShort}&lt;/Text&gt;
                    &lt;/View&gt;
  //That's where the function is called
                    &lt;TouchableHighlight 
                      style={{flex: 2}} 
                      onPress={() =&gt; this.addFav(item)}
                    &gt;
                      &lt;Icon name="ios-heart-empty" size={24} style={{alignSelf: 'center', padding: 10}}/&gt;
                    &lt;/TouchableHighlight&gt;
                  &lt;/View&gt;
                &lt;/TouchableHighlight&gt;
  //just checking the state
                &lt;Text&gt;{this.state.favourites}&lt;/Text&gt;
              &lt;/ScrollView&gt;}
          /&gt;;
    }
  }
  </code></pre>
  
  <p><strong>Second Tab/Screen</strong>:</p>
  
  <pre><code>import React, {Component} from 'react';
  import {Text} from 'react-native';
  
  export default class FavouritesScreen extends Component {
  
    constructor(props){
      super(props)
    }
  
    render(){
  //Here I want to display my favourites Array from the HomeScreen State
      return &lt;Text&gt;{this.props.favourites}&lt;/Text&gt;;
    }
  }
  </code></pre>
  
  <p>I am actually not wondering why it's not functioning, I just tried the props method by reading all the other articles but the Screens are not in Parent/Child relation. </p>
  
  <p>So what I want to do would be in the Second Tab something like</p>
  
  <pre><code>HomeScreen.state.favourites
  </code></pre>
  
  <p>Thanks.</p>