title: Flatlist's children saying "Function components cannot be given refs."
body: <p>I'm getting an error <code>"Warning: Function components cannot be given refs. Attempts to access this ref will fail"</code> when I attempt to add refs to the children of a Flatlist. However, it only seems to happen when I add the refs to the <code>UserinfoGridComponent</code> and not the <code>View</code> component. </p>
  
  <p>Basically, what I believe is happening, from a bunch of googling, is that the flatlist's children are considered functional components, just as the error says, and as such cant accept refs. (but I'm confused because the child has setState...)</p>
  
  <p>What I really need is just a ref inside the child (<code>UserinfoGridComponent</code>) so that I can scroll the flatlist as needed, from within the <code>UserinfoGridComponent</code> component. Is there a way to get this to work? </p>
  
  <p>Parent: </p>
  
  <pre><code>
  class HomeScreen extends React.Component {
    displayType = ({ item, index }) =&gt; {
  
      const isBookmarked = (this.state.bookmarks.map(bookmark =&gt; bookmark.id).indexOf(item.id) !== -1)
  
      return (
        &lt;View 
          ref={test =&gt; console.log("test ref 2", test)} 
          key={item.id} 
          style={[styles.shadowContainer, style={marginHorizontal: 15, marginBottom:25}]}&gt;
          &lt;UserinfoGridComponent
            ref={test =&gt; console.log("test ref 1", test)}
            checked={ isBookmarked }
            images={item.promoImages}
            firstImg={item.promoImages ? (item.promoImages[0] || null) : null}
            secondImg={item.promoImages ? (item.promoImages[1] || null) : null}
            avatar={item.avatar || ''}
            name={item.name || ''}
            mainSkill={User.extractSkill(item.skill)}
            secondarySkill={( item.otherSkills &amp;&amp; item.otherSkills.length &gt; 0 ) ? User.extractSkill(item.otherSkills[0]) : ''}
            city={item.location.locality}
            state={item.location.region}
            // key={index}
            index={index}
            user={item}
            onUserInfoPress={() =&gt; {
              this.props.navigation.navigate('Profile', { 
                user: item,
                clearAllFilters: this.clearAllFilters });
            }}
            onBookmarkPress={this.onBookmarkPress}
          /&gt;
        &lt;/View&gt;
      )
    }
  
  
  render() {
  
      const { creatorSearch } = this.props.data
  
      return (
        &lt;View style={{flex:1, backgroundColor: 'white'}}&gt;
          &lt;Animated.View style={{ opacity: this.state.initialOpacityAnimation, flex: 1}}&gt;
            &lt;FlatList
              ref={(list) =&gt; { this.listRef = list }}
              contentInset={{top: 0, left: 0, bottom: 150, right: 0}}
              scrollIndicatorInsets={{top: 60, left: 0, bottom: 70, right: 0}}
              data={creatorSearch &amp;&amp; this.state.initialContentLoaded ? creatorSearch.items : []}
              onEndReachedThreshold={0.3}
              onEndReached={() =&gt; this.scrollEnd()}
              ListHeaderComponent={this.listHeaderText}
              ListEmptyComponent={this.emptyListView}
              extraData={this.state.bookmarks.length}
              renderItem={this.displayType}
              scrollEventThrottle={1}
            /&gt;
          &lt;/Animated.View&gt;
        &lt;/View&gt;
      )
    }
  }
  
  
  </code></pre>
  
  <p>Child: </p>
  
  <pre><code>class UserInfoGridComponent extends React.Component {
  
  constructor(props) {
      super(props)
  
  
      this.state = { 
        loadedUser: { media: { items: [] }},
        promoImages: this.props.user.promoImages
      }
    }
  
  render() {
  
      const combinedImages = this.state.loadedUser.media.items.length &gt; 0 ? this.state.loadedUser.media.items : this.state.promoImages
  
      return (
        &lt;View&gt;
         &lt;FlatList
          ref={ref =&gt; console.log("THIS IS A TEST", test)}
          horizontal={true}
          data={combinedImages}
          renderItem={this.imageDisplay}
          style={{padding:imageMargin*2}}
          showsHorizontalScrollIndicator={false}
         /&gt;
        &lt;/View&gt;
  }
  </code></pre>