Question: How to deal with flatlist datasource

[rodwin]

Hi,
You might have an idea on how to supply the data source for a flat list component. Redux state returns a list of map instead of array of object which is causing flatlist not to render

<FlatList keyExtractor={(item) => item.ID} style={{ backgroundColor: Colors.white, paddingHorizontal: 15 }} data={this.state.listings} extraData={this.state.listings} // renderItem={this.renderUserGroup} renderItem={({ item }) => ( <View> <Text>test</Text> </View> )} />

`const mapStateToProps = (state) => {
// console.log('state.listings.get(listings)', state.listings.get('listings'))
return {
fetching: state.listings.get('fetching'),
listings: state.listings.get('listings'),
}
}

const mapDispatchToProps = (dispatch) => {
return {
getListings: () => dispatch(ListingActions.listingRequest()),
}
}

export default connect(
mapStateToProps,
mapDispatchToProps
)(AllListingScreen)`

console log of data shows its a list

Appreciate if you can shed some light.
Thanks.

[AurelGit]

Hello @rodwin !

Try to convert your List into an array inside mapStateToProps, with :

listings: state.listings.get('listings').toJS(),

Be sure to initialize your list in the InitialState.js file with a List() (imported from immutable) to avoid some warnings.
For example :

import { Map, List } from 'immutable'

/**
 * The initial values for the redux state.
 */
export const INITIAL_STATE = Map({
  fetching: false,
  listings: List(),
})

Hope this will help you !

[rodwin]

@AurelGit This solves the issue. I didn't saw this appraoch googling this issue. Thanks for this.