title: Invariant Violation : scrollToIndex out of range : requested NaN but maximum is 1 (FlatLList/SwiperFlatList)
body: <p>When I want to distribute my data from my firebase database to my React Native mobile application in the form of a carousel with SwiperFlatList, an error is displayed
  each time my class is updated, showing me as follows: &quot;Invariant violation: scrolltoindex out of range: requested Nan but maximum is 1.&quot;
  By hiding the error the carousel works well but it can be very annoying and cause problems during its build.</p>
  <p>Here are my codes:</p>
  <p>My Render function :</p>
  <pre class="lang-js prettyprint-override"><code>renderPost=post=&gt;{
     
          return(
          &lt;View style={styles.card}&gt;
              &lt;HorizontalCard title={post.title_new} desc={post.text} img={post.image} /&gt;
          &lt;/View&gt;
          )
        
        } 
  </code></pre>
  <p>HorizontalCard Component :</p>
  <pre class="lang-js prettyprint-override"><code>export default class HorizontalCard extends Component {
    constructor(props) {
      super(props);
    }
  
    static propTypes = {
      screen: PropTypes.string,
      title: PropTypes.string,
      desc: PropTypes.string,
      img: PropTypes.string,
    };
  
    state = {
      modalVisible: false,
    };
  
    setModalVisible(visible) {
      this.setState({modalVisible: visible});
    }
    render() {
       return (
         &lt;View style={{flex: 1}}&gt;
         &lt;TouchableOpacity
        onPress={() =&gt; {
          this.setModalVisible(true);
        }}
        style={styles.container}&gt;
        &lt;Modal
        animationType=&quot;slide&quot;
        transparent={false}
        visible={this.state.modalVisible}
        onRequestClose={() =&gt; {
          alert('Modal has been closed.');
        }}&gt;
        &lt;View style={{marginTop: 22}}&gt;
          &lt;View&gt;
            &lt;Text&gt;{this.props.desc}&lt;/Text&gt;
  
            &lt;Button
            title=&quot;Fermer la fenêtre&quot;
              onPress={() =&gt; {
                this.setModalVisible(!this.state.modalVisible);
              }} /&gt;
  
          &lt;/View&gt;
        &lt;/View&gt;
      &lt;/Modal&gt;
        &lt;View style={styles.card_discord}&gt;
          &lt;Image style={styles.card_discord_img} source={{ uri: this.props.img }} /&gt;
          &lt;LinearGradient
            start={[1.0, 0.5]}
            end={[0.0, 0.5]}
            colors={['rgba(51, 51, 51, 0.2)', '#333333', '#333333']}
            style={styles.FadeAway}&gt;
            &lt;View style={styles.FadeAway}&gt;
              &lt;Text h4 style={styles.FadeAway_h2}&gt;
                {this.props.title}
              &lt;/Text&gt;
              &lt;Text style={styles.FadeAway_p}&gt;{this.props.desc}&lt;/Text&gt;
            &lt;/View&gt;
          &lt;/LinearGradient&gt;
        &lt;/View&gt;
      &lt;/TouchableOpacity&gt;
         &lt;/View&gt;
          
    );
    }
   
  }
  
  </code></pre>
  <p>My HomeScreen component (page where the error appears) :</p>
  <pre class="lang-js prettyprint-override"><code>export default class HomeScreen extends Component {
      constructor(props) {
          super(props);
          this.ref =  Fire.shared.firestore.collection('posts')
          this.useref=
          this.state={
              dataSource : [],
          }
      }
  
        feedPosts = (postSnapShot) =&gt;{
          const post = [];
          postSnapShot.forEach((doc) =&gt; {
          const {uid,text,timestamp,title_new,image} = doc.data();
          const data=Fire.shared.firestore
          .collection('users')
          .doc(uid)
          .get()
          .then(doc=&gt;{
            post.push({ 
              text,
              timestamp,
              title_new,
              image,
              uid,
            })
            this.setState({
              dataSource : post,
            });
          }) 
          });
        }
  
        renderPost=post=&gt;{
     
          return(
          &lt;View style={styles.card}&gt;
              &lt;HorizontalCard title={post.title_new} desc={post.text} img={post.image} /&gt;
          &lt;/View&gt;
          )
        
        } 
      render() {
          return (
              &lt;ThemeProvider&gt;
                  &lt;ScrollView&gt;
                               &lt;SwiperFlatList
                                  autoplay
                                  autoplayDelay={5}
                                  index={0}
                                  autoplayLoop
                                  autoplayInvertDirection
                                  data={this.state.dataSource}
                                  renderItem={({item})=&gt;this.renderPost(item)}         
                              /&gt;
                            ...
                  &lt;ScrollView&gt;
              &lt;/ThemeProvider&gt;
          )
      }
  }
  </code></pre>