title: react-native: send complete STATE from one component to another?
body: <p>I have a <code>Reminder component</code> comprising of a form where I am storing text and date onClick of a button using <code>AsyncStorage</code>. </p>
  
  <p>Now, I want to display this stored data in <code>Agenda Component</code>. </p>
  
  <p>I am using <code>Agenda component</code> from <code>react-native-calendars</code> library <a href="https://github.com/wix/react-native-calendars" rel="nofollow noreferrer">react-native-calendars</a></p>
  
  <p>this is my <code>reminder component</code></p>
  
  <pre><code>    class Reminder extends Component {
          constructor(props) {
              super(props);
              this.state = {
                  input: '',
                  chosenDate: new Date(),
              };
              this.setDate = this.setDate.bind(this);
              this.handleChangeInput = this.handleChangeInput.bind(this);
              this.saveData = this.saveData.bind(this);
          }
  
          setDate(newDate) {
              this.setState({
                  chosenDate: newDate
              });
          }
  
          handleChangeInput = (text) =&gt;  {
              this.setState({input:text});
          }
  
          //save the input
          saveData() {
              AsyncStorage.setItem("key", JSON.stringify(this.state));
          }
          render() { 
              return ( 
                  &lt;View&gt;
                      &lt;Form style={styles.formContainer}&gt;
                          &lt;View style={styles.formView}&gt;
  
                                  &lt; TextInput
                                  placeholder = "Set your reminder"
                                  onChangeText={this.handleChangeInput}
                                  value={this.state.input}
                                  /&gt;
  
                              &lt;DatePicker
                                  defaultDate={new Date()}
                                  minimumDate={new Date(2018, 1, 1)}
                                  maximumDate={new Date(2019, 12, 31)}
                                  locale={"en"}
                                  timeZoneOffsetInMinutes={undefined}
                                  modalTransparent={false}
                                  animationType={"fade"}
                                  androidMode={"default"}
                                  placeHolderText="Select date"
                                  textStyle={{ color: "green" }}
                                  placeHolderTextStyle={{ color: "#d3d3d3" }}
                                  onDateChange={this.setDate}
                              /&gt;
                              &lt;Text style={styles.datePicker}&gt;
                                  {this.state.chosenDate.toString().substring(0,10)}
                              &lt;/Text&gt;
                          &lt;/View&gt;
                          &lt;View style={styles.footer}&gt;
                              &lt;Button block success style={styles.saveBtn} 
                              onPress={ () =&gt; 
                                  {
                                    this.saveData()
                                    console.log('save data',this.state);
                                  }
                              } 
                                 &gt;
                                  &lt;Icon type='MaterialIcons' name='done' /&gt;                        
                              &lt;/Button&gt;
                          &lt;/View&gt;
                      &lt;/Form&gt;
                  &lt;/View&gt; 
              );
          }
      }
  
  export default Reminder;
  </code></pre>
  
  <p>and this it's screen <code>Reminder screen</code></p>
  
  <pre><code>import React, { Component } from 'react';
  import { View, StatusBar } from 'react-native';
  import PropTypes from 'prop-types';
  
  import Reminder from '../components/Reminder';
  
  const ReminderScreen = ({navigation}) =&gt; (
      &lt;View &gt;
          &lt;Reminder navigation={navigation} &gt;
              &lt;StatusBar backgroundColor = "#28F1A6" /&gt;
           &lt;/Reminder &gt;
      &lt;/View&gt;
  );
  
  Reminder.propTypes = {
      navigation: PropTypes.object.isRequired
  }
  
  export default ReminderScreen;
  </code></pre>
  
  <p>and this is the component I want to display that data <code>Agenda Component</code></p>
  
  <pre><code>class WeeklyAgenda extends Component {
      constructor(props) {
      super(props);
      this.state = {
        items: {},
        selectedDate: ''
      };
    }
  
    render() {
      return (
        &lt;View style={{height:600}}&gt;
              &lt;Agenda
                items={this.state.items}
                loadItemsForMonth={this.loadItems.bind(this)}
                selected={this.props.day}
                renderItem={this.renderItem.bind(this)}
                renderEmptyData={this.renderEmptyDate.bind(this)}
                rowHasChanged={this.rowHasChanged.bind(this)}
                onRefresh = {() =&gt; { this.setState({refeshing : true})}}
                refreshing = {this.state.refreshing}
                refreshControl = {null}
                pastScrollRange={1}
                futureScrollRange = {3}
                theme = {
                  {
                    agendaTodayColor: '#28F1A6',
                    agendaKnobColor: '#28F1A6',
                    dotColor: '#28F1A6',
                    selectedDayBackgroundColor: '#28F1A6',
                    todayTextColor: '#28F1A6',
                  }
                }
            /&gt;
            &lt;View &gt;
                &lt;Fab
                    active={!this.state.active}
                    direction="up"
                    style={{ backgroundColor: '#28F1A6'}}
                    position = 'bottomRight'
                    onPress={() =&gt; this.props.navigation.navigate('Reminder')}&gt;
                    &lt;Icon type='MaterialCommunityIcons' name="reminder" /&gt;
                &lt;/Fab&gt;
            &lt;/View&gt;
        &lt;/View&gt;
      );
    }
  
    //On application loads, this will get the already saved data and set the state true when it's true.
      componentDidMount() {
          AsyncStorage.getItem("key").then((newItems) =&gt; {
              this.setState(JSON.parse(newItems));
          });
      }
  
    loadItems = (day) =&gt; {
      console.log('day',day);
      console.log('items', this.state.items);
      const {selectedDate} = this.state;
  
      setTimeout(() =&gt; {
        console.log('selected date', selectedDate);
        this.setState({selectedDate: day});
        console.log('selected date later', day);
        const newItems = {};
        Object.keys(this.state.items).forEach(key =&gt; {newItems[key] = this.state.items[key];});
        console.log('new items later', newItems);
        this.setState({
          items: newItems
        });
        console.log('new items later', this.state.newItems);
        console.log('items later', this.state.items);
        this.state.items;
      },1000);
  
    };
  
    renderItem(item) {
      return (
        &lt;View style={[styles.item, {height: item.height}]}&gt;
          &lt;TouchableOpacity onPress={() =&gt; {this.props.navigation.navigate('Reminder')}}&gt;
            &lt;Text&gt;{item.name}&lt;/Text&gt;
          &lt;/TouchableOpacity&gt;
        &lt;/View&gt;
      );
    }
  
    renderEmptyDate() {
      return (
        &lt;View style={styles.emptyDate}&gt;
          &lt;TouchableOpacity onPress={() =&gt; {this.props.navigation.navigate('Reminder')}}&gt;
            &lt;Text style={styles.emptyTextColor}&gt; No Event or Reminder on this date &lt;/Text&gt;
          &lt;/TouchableOpacity&gt;
        &lt;/View&gt;
  
      );
    }
  
    rowHasChanged(r1, r2) {
      return r1.name !== r2.name;
    }
  
    timeToString(time) {
      const date = new Date(time);
      return date.toISOString().split('T')[0];
    }
  }
  
  export default WeeklyAgenda;
  </code></pre>
  
  <p>and this is it's screen <code>Agenda Screen</code></p>
  
  <pre><code>import React, { Component } from 'react';
  import { View, Text, StatusBar } from 'react-native';
  import PropTypes from 'prop-types';
  
  import WeeklyAgenda from '../components/Agenda';
  class AgendaScreen extends Component {
      state = {  }
      render() { 
          const {navigation} = this.props;
          const { params } = this.props.navigation.state;
          return (
              &lt;View style={{height: 100}}&gt;     
                  &lt;WeeklyAgenda day={params["day"]} navigation={navigation}&gt;
                      &lt;StatusBar backgroundColor="#28F1A6" /&gt;
                  &lt;/WeeklyAgenda &gt;
              &lt;/View&gt;
          );
      }
  }
  
  WeeklyAgenda.propTypes = {
      navigation: PropTypes.object.isRequired
  }
  
  export default AgendaScreen;
  </code></pre>
  
  <p>I am fairly new to react-native and still trying to figure out how to share data between components and screens.</p>
  
  <p><a href="https://i.stack.imgur.com/4B2e1.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4B2e1.jpg" alt="project stucture"></a></p>