title: Is there a way to "fade in" items in flatlist?
body: <p>I'm setting up a component that render a flatlist and I'm trying to make the flatlist items "fade in" animation For a more impressive display </p>
  
  <p>This is a component for render search suggestions that show items </p>
  
  <pre><code>import React, { Component } from 'react'
  import { View, Text, TextInput, FlatList, Image, TouchableOpacity } from 'react-native'
  import { inject, observer } from 'mobx-react/native'
  import { Button } from '../../components'
  import Style from './style'
  import I18n from '../../i18n'
  import Icon from 'react-native-vector-icons/MaterialIcons'
  import Api from '../../utils/Api'
  import _ from 'lodash'
  
  let mounted = false
  @inject('UserStore', 'NavigationStore')
  @observer
  class SearchProducts extends Component {
    constructor(props) {
      super(props)
      this.state = {
        searchAutoComplete: [],
        showAutoComplete: false,
        currentSearch: '',
        searchTimeoutId: null,
      }
      this.autoCompleteTimeout = null
      this.storedResults = []
    }
  
    componentWillMount() {
      mounted = true
    }
    componentWillUnmount() {
      mounted = false
      clearTimeout(this.autoCompleteTimeout)
    }
    _renderCategory = ({ item }) =&gt; {
      return (
        &lt;View style={Style.featuredView}&gt;
          &lt;Image source={item.image} style={Style.featuredImage} /&gt;
          &lt;Text style={{ textAlign: 'center', color: '#9B999A' }}&gt;{item.title}&lt;/Text&gt;
        &lt;/View&gt;
      )
    }
  
    _renderSuggestion = ({ item, index }) =&gt; {
      const splittedName = item.split(' ')
      let splittedSearch = this.state.currentSearch.toUpperCase().split(' ')
      splittedSearch = splittedSearch.map(x =&gt; x.trim()).filter(x =&gt; x.length &gt; 1)
      let suggestion = []
      if (splittedSearch.length == 0) {
        suggestion = splittedName.map((word, index) =&gt; &lt;Text key={index}&gt;{word} &lt;/Text&gt;)
      } else {
        let highlightedWords = []
        splittedName.forEach((word, index) =&gt;
          splittedSearch.forEach(wordFromSearch =&gt; {
            const currentWord = word.toUpperCase()
            const isAlreadyHighlighted = highlightedWords.includes(currentWord)
            if ((currentWord.includes(wordFromSearch.toUpperCase()) &amp;&amp; this.state.currentSearch.length &gt; 0) || isAlreadyHighlighted) {
              let v = (
                &lt;Text key={index} style={{ color: '#2eb872' }}&gt;
                  {word}{' '}
                &lt;/Text&gt;
              )
              if (!isAlreadyHighlighted) {
                highlightedWords.push(currentWord)
              }
              suggestion[index] = v
            } else {
              let v = &lt;Text key={index}&gt;{word} &lt;/Text&gt;
              suggestion[index] = v
            }
          })
        )
      }
  
      return (
        &lt;TouchableOpacity
          style={Style.suggestionView}
          onPress={() =&gt; {
            this.props.UserStore.addRecentSearch(item)
            this.props.NavigationStore.navigate({ routeName: 'SearchResult', params: { search: item } })
            this.autoCompleteTimeout = setTimeout(() =&gt; {
              if (mounted) this.setState({ showAutoComplete: false })
            }, 400)
          }}
        &gt;
          &lt;Icon name='search' size={20} style={{}} /&gt;
          &lt;Text style={{ marginLeft: 20, textAlign: 'left', color: '#9B999A' }}&gt;{suggestion}&lt;/Text&gt;
        &lt;/TouchableOpacity&gt;
      )
    }
  
    getSuggestions = async currentSearch =&gt; {
      try {
        const response = await Api.serachOutoCompleate(currentSearch)
        let searchAutoComplete = response.suggestions.products.map(product =&gt; product.product_title)
        response.suggestions.categories.forEach(categories =&gt; searchAutoComplete.push(categories))
        response.suggestions.warehouses.forEach(warehouse =&gt; searchAutoComplete.push(warehouse.warehouse_name))
        response.suggestions.upcs.forEach(upcs =&gt; searchAutoComplete.push(upcs.product_title))
        response.suggestions.tags.forEach(tags =&gt; searchAutoComplete.push(tags.product_title))
        this.storedResults[currentSearch] = searchAutoComplete
        if (mounted &amp;&amp; currentSearch &amp;&amp; searchAutoComplete) this.setState({ currentSearch: currentSearch, searchAutoComplete: searchAutoComplete })
        else this.setState({ currentSearch: currentSearch })
      } catch (error) {
        console.log(error)
      }
    }
  
    _onSearchChange = _.debounce(currentSearch =&gt; {
      if (currentSearch === '') {
        this.setState({ filter: [], currentSearch })
      } else {
        if (this.storedResults[currentSearch]) {
          this.setState({ currentSearch })
          let searchAutoComplete = this.storedResults[currentSearch]
          if (mounted &amp;&amp; currentSearch &amp;&amp; searchAutoComplete) this.setState({ searchAutoComplete })
        } else {
          this.getSuggestions(currentSearch)
        }
      }
    }, 250)
  
    render() {
      I18n.locale = this.props.UserStore.user.lang
      const recent = this.props.UserStore.RecentSearches
      return (
        &lt;View style={Style.container}&gt;
          &lt;View style={Style.search_container}&gt;
            &lt;TextInput
              style={Style.search_input}
              underlineColorAndroid='transparent'
              placeholder={I18n.t('search_products')}
              returnKeyType='search'
              autoCorrect={false}
              onChangeText={this._onSearchChange}
              onFocus={() =&gt; this.setState({ showAutoComplete: true })}
              onSubmitEditing={event =&gt; {
                if (event.nativeEvent.text.length) this.props.UserStore.addRecentSearch(event.nativeEvent.text)
                this.props.NavigationStore.navigate({ routeName: 'SearchResult', params: { search: event.nativeEvent.text } })
              }}
              onKeyPress={() =&gt; this.suggestionTimeout &amp;&amp; clearTimeout(this.suggestionTimeout)}
              blurOnSubmit
            /&gt;
          &lt;/View&gt;
          {this.state.currentSearch.length &gt; 0 &amp;&amp; this.state.showAutoComplete &amp;&amp; this.state.searchAutoComplete.length &gt; 0 ? (
            &lt;View style={{ paddingVertical: 10 }}&gt;
              &lt;FlatList initialNumToRender={20} data={this.state.searchAutoComplete} keyExtractor={(item, index) =&gt; item.toString()} renderItem={this._renderSuggestion} keyboardShouldPersistTaps='always' /&gt;
            &lt;/View&gt;
          ) : (
            &lt;View&gt;
              {recent.length &gt; 0 ? (
                &lt;View&gt;
                  &lt;View style={Style.whiteBorder} /&gt;
                  &lt;View style={Style.searchHistory}&gt;
                    &lt;Text style={Style.searchHistory_header}&gt;{I18n.t('recent_searches')}&lt;/Text&gt;
                    {recent.map((title, index) =&gt; (
                      &lt;Button
                        key={index}
                        style={Style.recentSearch}
                        onPress={() =&gt; {
                          this.props.UserStore.addRecentSearch(title)
                          this.props.NavigationStore.navigate({ routeName: 'SearchResult', params: { search: title } })
                        }}
                      &gt;
                        &lt;Icon name='schedule' style={Style.recentSearchIcon} /&gt;
                        &lt;Text style={Style.recentSearchText}&gt;{title}&lt;/Text&gt;
                      &lt;/Button&gt;
                    ))}
                  &lt;/View&gt;
                &lt;/View&gt;
              ) : null}
            &lt;/View&gt;
          )}
        &lt;/View&gt;
      )
    }
  }
  
  export default SearchProducts
  
  </code></pre>
  
  <p>I expect the output will show fade in animation in the flatlist
  and i dont know how to implement it </p>