Section List

A basic FlatList component that should render nicely on any platform. Supports a good level of customization.

You can customization FlatList component with the Props

Usage#

import React, {FC} from 'react';
import {Body, FlatList} from 'qdmrncomponents';

const App: FC = () => {
  return (
    <Body>
      <FlatList />
    </Body>
  );
};

Reference#

Props#

here all the list of Props you can use for FlatList Component and it Inherits all FlatListProps Props, from React Native

data#

For simplicity, data is a plain array. If you want to use something else, like an immutable list, use the underlying VirtualizedList directly.

REQUIRED true#

renderItem#

Takes an item from data and renders it into the list.

Provides additional metadata like index if you need it, as well as a more generic separators.updateProps function which let you set whatever props you want to change the rendering of either the leading separator or trailing separator in case the more common highlight and unhighlight (which set the highlighted: boolean prop) are insufficient for your use case.

renderItem({item, index, separators});

import React, {FC} from 'react';
import {Body, FlatList, Text} from 'qdmrncomponents';

const App: FC = () => {
  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 style={styles.item}>
      <Text style={styles.title} label={title} />
    </View>
  );
  const renderItem = ({item}) => <Item title={item.title} />;
  return (
    <Body paddingAll={20} V_Aligin_center>
      <FlatList
        data={DATA}
        renderItem={renderItem}
        keyExtractor={(item) => item.id}
      />
    </Body>
  );
};

bgColor#

props can change the background color of the flatlist area type string

by defalut it is white color#

paddingAll#

props for padding for all the four sides of the Body by default it none number

by defalut it is none#

paddingLR#

props for padding for left and right of the Body by default it none number

by defalut it is none#

paddingTB#

props for padding for top and bottom the four sides of the Body by default it none number

by defalut it is none#

inlineStyle#

props give addition props to the Button element type Object