FlatList

A performant interface for rendering basic, flat lists, supporting the most handy features:

How to use

import React from 'react';
import {FlatList, Text, View} from '@gyri/native-ui-components';

const DATA = [
  {
    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
    title: 'First Item',
  },
  {
    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
    title: 'Second Item',
  },
  {
    id: '58694a0f-3da1-471f-bd96-145571e29d72',
    title: 'Third Item',
  },
];

const Item = ({title}) => (
  <View>
    <Text>{title}</Text>
  </View>
);

const MyComponent = ({style, className}) => (
  <FlatList
    style={style} 
    className={className}
    data={DATA}
    renderItem={({item}) => <Item title={item.title} />}
    keyExtractor={item => item.id}
  />
);

export default MyComponent;

Props

#	Name	Data type	Default value	Values	Description
1	style	object			Custom style object
2	className	string	''		It defined nativewind style classes.

For more details https://reactnative.dev/docs/flatlist