title: React native need manual refresh ctrl+s to display data
body: <pre><code>export default class AchieveScreen extends ValidationComponent{
  constructor(props) {
      super(props)
      this.state = {
          visible: false,
          filter: 1,
          date: new Date(),
          selected: new Date(),
          loaded: false,
          data: [],
          feedbackText:&quot;&quot;,
          target:[],
          refreshing:false,
          refreshValue:1
      }
  }
  
  handleUpdate = async () =&gt; {
      this.setState({ loaded: false })
      await this.getter()
      this.forceUpdate();    
  };
  
  
  GetData = async () =&gt; {
      const {date,selected}=this.state
      const data = await GetAchieve()
      if (data.status == 200) {
          this.setState({
              data: data.data,
              target:data.data !== null ? data.data.filter((achieve) =&gt; achieve.date.includes(selected)) : null,
              loaded: true,
  
          })
      }
  
  }
  
    componentDidMount() {
      this._unsubscribe = this.props.navigation.addListener('focus',() =&gt; {
          console.log('ok')
          const UserStatus=this.status()
          if(UserStatus){
              this.GetData()
          }
      });
    }
  
  _onRefresh=async()=&gt; {
      try {
          this.setState({refreshing: true});
  
          this.setState(({ refreshValue }) =&gt; ({
              refreshValue: refreshValue + 1,
            }));
          this.setState({refreshing: false});
  
      } catch (error) {
          throw error
      }
    }
  
  componentWillUnmount() {
      this._unsubscribe();
  }
  
  shouldComponentUpdate(nextProps, nextState) {
      if(this.state.data != nextState.data){
          console.log('data re')
          return true;
      }
      if(this.state.refreshValue != nextState.refreshValue || this.state.selected != nextState.selected ||  this.state.target != nextState.target ){
          console.log('refreshing value')
          return true;
      }
      return false
    }
  
  sendFeedBack=async()=&gt;{
      const {feedbackText} = this.state
      this.validate({
        feedbackText: {minlength:3, maxlength:4000},
      });
      if(!this.isFieldInError('feedbackText')){
        const request = await feedback(feedbackText)
        if(request.status == 200){
          this.setState({
           feedbackText:&quot;&quot;,
           visible:false
          })
        }
      }
    }
  
  flag = (date) =&gt; {
      items = this.state.data !== null ? this.state.data.filter((achieve) =&gt; achieve.date.includes(date)) : null
      let Professional = false
      let Personal = false
      if (!!items) {
          items.map(item =&gt; {
              if (item.flag == 1) { Professional = true } else if (item.flag == 2) { Personal = true }
          })
  
          if (Professional &amp;&amp; Personal) {
              return &lt;&gt;
                  &lt;Text&gt; &lt;Icon name=&quot;flag-o&quot; size={10} color=&quot;#ff6666&quot; /&gt; &lt;/Text&gt;
                  &lt;Text&gt; &lt;Icon name=&quot;star-o&quot; size={10} color=&quot;#cc80ff&quot; /&gt; &lt;/Text&gt;
              &lt;/&gt;
  
          } else if (Professional) {
              return &lt;Text&gt; &lt;Icon name=&quot;flag-o&quot; size={10} color=&quot;#ff6666&quot; /&gt; &lt;/Text&gt;
  
          } else if (Personal) {
              return &lt;Text&gt; &lt;Icon name=&quot;star-o&quot; size={10} color=&quot;#cc80ff&quot; /&gt; &lt;/Text&gt;
          }
      }
  }
  week = () =&gt; {
      const { date, selected,loaded } = this.state
      const week = this.state.date.week()
      if(loaded){
      return (
          &lt;&gt;
              {week.map((day, index) =&gt; {
                  return (
                      selected === week[index].plenaDiem ?
                          &lt;LinearGradient key={index} colors={['#EBDDFD', '#DFDCFF']} start={[0, 1]} end={[1, 0]} style={{ borderRadius: 12 }}&gt;
                              &lt;TouchableOpacity
                                  key={index}
                                  style={[styles.weekday]}
                                  onPress={() =&gt; { this.setState({ selected: week[index].plenaDiem }) }}
                                  disabled={week[index].enable}
                              &gt;
  
                                  &lt;Text style={styles.name} &gt;{week[index].dies}&lt;/Text&gt;
                                  &lt;Text style={[styles.num, { color: week[index].color }]} &gt;{week[index].diem}&lt;/Text&gt;
                                  &lt;View style={styles.flags}&gt;
                                      {this.flag(week[index].plenaDiem)}
                                  &lt;/View&gt;
                              &lt;/TouchableOpacity&gt;
                          &lt;/LinearGradient&gt;
                          :
                          &lt;TouchableOpacity
                              key={index}
                              style={[styles.weekday]}
                              onPress={() =&gt; {
                                  console.log(this.state.target)
                                   this.setState({ 
                                       selected: week[index].plenaDiem,
                                       target:this.state.data !== null ? this.state.data.filter((achieve) =&gt; achieve.date.includes(week[index].plenaDiem)) : null,
  
                                  })
                                   }}
                              disabled={week[index].enable}
                          &gt;
  
  
                              &lt;Text style={styles.name} &gt;{week[index].dies}&lt;/Text&gt;
  
                              &lt;Text style={[styles.num, { color: week[index].color }]} &gt;
                                  {week[index].diem}
                              &lt;/Text&gt;
  
                              &lt;View style={styles.flags}&gt;
                                  {this.flag(week[index].plenaDiem)}
                              &lt;/View&gt;
  
                          &lt;/TouchableOpacity&gt;
  
                  )
              
              })
          }
              
              
          &lt;/&gt;
      )
      }
  }
  
  
  
  render() {
      const { data, date, visible, selected, filter, loaded,feedbackText,refreshing,target } = this.state
      // let render = data !== null ? data.filter((achieve) =&gt; achieve.date.includes(selected)) : null
      // if (filter !== 3 &amp;&amp; render !== null) {
      //     render = render.filter((item) =&gt; item.flag == filter)
      // }
       
      return (
      
          &lt;&gt;
  
  
              &lt;View style={styles.header}  &gt;
                  &lt;View style={styles.top}&gt;
                      &lt;View style={styles.icon}&gt;
  
                          &lt;Image source={require('../../assets/header/CalendarIcon.png')} /&gt;
                          &lt;Text style={styles.day}&gt;{date.day()}&lt;/Text&gt;
  
                      &lt;/View&gt;
  
                      &lt;View style={styles.items}&gt;&lt;Image source={require('../../assets/header/medalLogo.png')} /&gt;&lt;/View&gt;
                      &lt;View style={styles.items}&gt;&lt;IconButton icon='question' style={styles.question} color={&quot;#000&quot;} size={16} onPress={() =&gt; this.setState({ visible: true })} /&gt;&lt;/View&gt;
  
                  &lt;/View&gt;
  
                  &lt;Modal
                      visible={visible}
                      backdropStyle={styles.backdrop}
                      onBackdropPress={() =&gt; this.setState({ visible: false })}&gt;
                      &lt;Card disabled={true} style={{backgroundColor:&quot;#FFF&quot;,width:wp('90%'),borderRadius:10}}&gt;
                         &lt;Input
                          name='feedbackText'
                          value={feedbackText}
                          style={styles.feedbackText}
                          multiline={true}
                          maxLength={4000}
                          placeholder=&quot;tell us about you expermenit&quot;
                          onChangeText={(text) =&gt; { this.setState({ 
                              feedbackText: text,
                           }) }}
                          /&gt;   
                          &lt;Button
                          disabled={feedbackText.length&lt;3?true:false}
                          onPress={() =&gt; {this.sendFeedBack()}}&gt;
                                  subimt
                          &lt;/Button&gt;
  
                      &lt;/Card&gt;
                      
                      &lt;View style={[styles.close]}&gt;
                          &lt;AntDesign name={&quot;closecircleo&quot;} color=&quot;#000&quot; onPress={() =&gt; this.setState({ visible: false })} size={25} /&gt;
                      &lt;/View&gt;
                  &lt;/Modal&gt;
                  &lt;ScrollView
                      contentContainerStyle={styles.scrollView}
                      refreshControl={
                      &lt;RefreshControl
                          refreshing={refreshing}
                          onRefresh={this._onRefresh.bind(this)}
                      /&gt;
                      }
                  &gt;
  
                  &lt;View style={styles.month}&gt;
                      &lt;Text style={styles.monthName}&gt;{date.monthName()}&lt;/Text&gt;
                  &lt;/View&gt;
                  &lt;View style={styles.week}&gt;
                      {loaded ? this.week() : &lt;LoadingScreen/&gt;}
                  &lt;/View&gt;
                  &lt;/ScrollView&gt;
  
              &lt;/View&gt;
  
              &lt;View style={styles.container}  &gt;
                  &lt;View style={styles.achieve}&gt;
                      &lt;View&gt;
                          {/* &lt;SwitchSelector
                              options={options}
                              initial={0}
                              style={styles.switch}
                              buttonColor={&quot;#fff&quot;}
                              textColor={&quot;#AB9CB3&quot;}
                              selectedColor={&quot;#000&quot;}
                              buttonMargin={3}
                              imageStyle={styles.switchicon}
                              backgroundColor={&quot;#F0F1F8&quot;}
                              onPress={value =&gt; this.setState({ filter: value })}
                          /&gt; */}
                      &lt;/View&gt;
                      &lt;View style={styles.count}&gt;
                          &lt;Text style={styles.countText}&gt;you have achieved {target !== null ? target.length : null}&lt;/Text&gt;
                      &lt;/View&gt;
                  &lt;/View&gt;
  
                  &lt;View style={styles.cards}&gt;
                      &lt;Cards type={true} data={target} storage={data} handle={this.handleUpdate} /&gt;
                  &lt;/View&gt;
  
  
              &lt;/View&gt;
          &lt;/&gt;
      )
  }
  </code></pre>
  <p>}
  this is calendar component when run it no thing to display but data can be in console log. i can show data there, I need to hit Ctrl+s to refresh expo 'fast refresh' to show data in simulator</p>
  <p>I have load Logic in render section but issue is still need fix</p>
  <p>any suggestions?</p>
  <p><a href="https://i.stack.imgur.com/bjYSn.jpg" rel="nofollow noreferrer">this screen before hit Ctrl+s data is already in state but not rendering &quot;first run&quot; </a></p>
  <p><a href="https://i.stack.imgur.com/898uw.jpg" rel="nofollow noreferrer">here after hit Ctrl+s to refresh screen to show data </a></p>