title: How to reset react native Slider (child component) after I render the parent component?
body: <p>I am quite new to React/React-Native. I am building a small app which renders a heat-map by using data from an API server. I have a date picker that filters the data set that I fetch and so controls the rendered heat map. After I fetch and render the heatmap then the user can slide over the data set and see the corresponding results. So the max and mean value of the slider is dictated by the date picker. I set the state every time date picker picks a new date and render the  HeatMap component with the new state (which is the parent component which includes the slider component). After I render I want my Slider to move the starting position (value=0). However the slider seems to be in the same position as the previous state. How can I achieve the desired behavior. </p>
  
  <p>Here is my parent component which includes the date picker and the Slider component.</p>
  
  <pre><code>   class Home extends Component {
        constructor(props) {
          let start_date = new Date();
          start_date.setDate(1);
          start_date.setMonth(0);
          start_date.setFullYear(2019);
          let date = getLastBusinessDay(start_date);
          super(props);
          this.state = {
            date: date,
            data: false,
            slider: getGermanFormatDate(date)
          };
        }
  
    componentWillMount() {
      this.getHeatData();
    }
  
    getHeatData = () =&gt; {
      axios
        .get(heat_data_url, {
          params: {
            date: getGermanFormatDate(this.state.date)
          }
        })
        .then(response =&gt; this.setState({ data: response.data }));
    };
  
    setDate = date =&gt; {
      this.setState({ date: date }, this.getHeatData);
      this.setState({ slider: getGermanFormatDate(date) });
    };
  
    onSlideCallBack = value =&gt; {
      this.setState({ slider: value });
      this.setState({ date: makeDateFromString(value) });
    };
  
    render() {
      if (!this.state.data) {
        return (
          &lt;View style={styles.activityIndicator}&gt;
            &lt;ActivityIndicator size="large" color="#0000ff" /&gt;
          &lt;/View&gt;
        );
      } else {
        return (
          &lt;View style={styles.main}&gt;
            {/* // Header Menu bar */}
            &lt;View&gt;
              &lt;HeaderComponent
                navigation={this.props.navigation}
                title="Global Risk Alert"
              /&gt;
            &lt;/View&gt;
            {/* // Headr Menu bar ends */}
  
            {/* // Main Content section */}
            &lt;View style={styles.content}&gt;
              {/* // Header content */}
              &lt;View
                style={{
                  flex: 0,
                  height: 50
                }}
              &gt;
                &lt;Text style={styles.headerText}&gt;Global Risk Dynamic&lt;/Text&gt;
              &lt;/View&gt;
              {/* // Header content ends */}
  
              {/* Heatmap section */}
              &lt;Heatmap heat_data={this.state.data} date={this.state.date} /&gt;
              {/* Heatmap section ends */}
              &lt;View&gt;
                &lt;Text style={styles.headerText}&gt;{this.state.slider}&lt;/Text&gt;
              &lt;/View&gt;
              {/* Slider section */}
              &lt;DateSlider
                callBack={this.onSlideCallBack}
                data={this.state.data}
              /&gt;
              {/* Slider section  ends */}
  
              {/* DatePicker section */}
              &lt;PickDate
                callBack={this.setDate}
                slider_date={this.state.slider}
                navigation={this.props.navigation}
                data={this.state.data}
              /&gt;
              {/* DatePicker section  ends */}
            &lt;/View&gt;
            {/* // Main Content section ends */}
  
            &lt;View&gt;
              &lt;SocialMedia /&gt;
            &lt;/View&gt;
          &lt;/View&gt;
        );
      }
    }
  }
  </code></pre>
  
  <p>And here is my Slider component</p>
  
  <pre><code>const DateSlider = props =&gt; {
      const runCallBack = value =&gt; {
      let dates = Object.keys(props.data);
      dates = dates.map(_getDate);
  
      // dates are of the format ["22.7.2019", "23.7.2019"]
      dates.sort((a, b) =&gt; a - b);
      dates = dates.map(getGermanFormatDate);
      props.callBack(dates[value]);
    };
     const _getDate = date_string =&gt; {
     // date_string is of the format 22.7.2019
      let date = new Date();
      date.setDate(date_string.split(".")[0]);
      date.setMonth(date_string.split(".")[1] - 1);
      date.setFullYear(date_string.split(".")[2]);
      return date;
    };
  
    if (getDataLength(props.data) &lt;= 1) {
      return &lt;View /&gt;;
    }
    return (
       &lt;View style={styles.container}&gt;
         &lt;Slider
           value={0}
           onValueChange={runCallBack}
           minimumValue={0}
           maximumValue={getDataLength(props.data)}
           step={1}
         /&gt;
        &lt;/View&gt;
     );
   };
  </code></pre>
  
  <p>UPDTE:  When should the slider be brought back to the starting end (reset): Whenever I pick a new a date from the date picker. The date picker event calls the 'setDate' method (in the parent component), which sets the 'date' state and calls the 'getHeatData' method. Get heatData fetches the data and sets the 'data' state. The 'data' state dictates the 'maximumValue' of the of the slider. So basically I want to reset (bring the slider pointer back the to starting end) the Slider whenever I choose a new date.</p>