CODEWITHSUNDEEP
listviewgridviewreact-native
Paras Watts
Paras Watts

Reputation: 2665

React Native listview with different type of components

I am developing a react native application. On its homepage I need to show some posts like video, audio, images, blogs, articles etc. I am confused as how to achieve that . How can I make a list or grid view with different type of components, mix of audio , video, images. From backend we will add a image or video or audio or a blog and a new post will be created in the list.Also I want to add that new post to the beginning and not at the end. Any help would be appreciated.

Upvotes: 2

Views: 2658

Answers (1)

Vahid Boreiri
Vahid Boreiri

Reputation: 3438

You can use the FlatList to do this. It's so easy to use and its performance is good and it is recommended by React-Native (look at this). This is a simple example of using FlatList you can handle your list items in a separated component or function and pass it in the renderItem prop of FlatList. You can see the full document of FlatList in here:

  _keyExtractor = (item, index) => item.id;

  _renderItem = ({item}) => (
    if (item.type === 'video') {
      <MyVideo item={item}/>
    } else if (item.type === 'image') {
      <MyImage item={item}/>
    } else if ...
      ...
  );

  render() {
    return (
      <FlatList
        data={dataList}
        keyExtractor={this._keyExtractor}
        renderItem={this._renderItem}
      />
    );
  }

Upvotes: 3

Related Questions