CODEWITHSUNDEEP
react-nativereact-native-flatlist
Brian Law
Brian Law

Reputation: 639

FlatList rendered row but not displaying items

I am trying to make a FlatList with items that can expand and collapse onPress

However, when I add a new item from another screen then go back to SearchListScreen, it will only display 2 items, but the FlatList does render the correct number of rows.

example:

Before adding new item

enter image description here

After adding new item

enter image description here

The same thing happens when I remove an item or expand a item.

Here's my code:

SearchList.js

import React, { Component } from 'react'
import { Text, View, FlatList, StyleSheet } from 'react-native'
import SearchCard from './SearchCard'

export default class SearchList extends Component {
  wrapperStyle (index) {
    return index > 0 ? styles.listItemWrapper : [styles.listItemWrapper, styles.wrapperFirst]
  }

  _renderItem = ({item, index}) => (
    <View style={this.wrapperStyle(index)}>
      <SearchCard
        search={item}
        id={item.id}
        filterAttributes={this.props.filterAttributes}
        onSearch={this.props.onSearch}
        onFavorite={this.props.onFavorite}
        favorites={this.props.favorites}
      />
    </View>
  )

  render () {
    const { searches, filterAttributes, onSearch, onFavorite, favorites } = this.props

    return (
      <FlatList
        data={searches}
        extraData={{ filterAttributes: filterAttributes, onSearch: onSearch, onFavorite: onFavorite, favorites: favorites, searches: searches }}
        keyExtractor={item => item.id}
        renderItem={this._renderItem}
        enableEmptySections
        style={{backgroundColor: 'red'}}
      />
    )
  }
}

const styles = StyleSheet.create({
  wrapperFirst: {
    marginTop: 20
  },
  listItemWrapper: {
    marginLeft: 20,
    marginRight: 20,
    marginBottom: 20
  }
})

Upvotes: 1

Views: 2373

Answers (2)

Hudi Ilfeld
Hudi Ilfeld

Reputation: 2045

It could be an issue related to the styles of StyleSheet applied to either the row or the FlatList itself. In my case I applied a wrong style property to the FlatList which in return did not display the list.

Upvotes: 0

Brian Law
Brian Law

Reputation: 639

After hours of struggling, I find that adding a height to the item solved the problem.

Upvotes: 4

Related Questions