Skip to main content

FlatList

A recommended way to use FlatList with Item component.
Uses the Separator component to control the ItemSeparatorComponent of FlatList.

Light Theme

Usage

import React, { useState } from 'react';
import { FlatList, Platform } from 'react-native';

// React Native UI DevKit
import { Item, Separator } from 'react-native-ui-devkit';

const App = () => {
const [data, setData] = useState([
{ _id: 1, title: 'Item 1' },
{ _id: 2, title: 'Item 2' },
{ _id: 3, title: 'Item 3' }
]);

const renderItem = ({ item, index, separators }) => {
data[index].separators = separators;

return (
<Item
data={{
title: item.title,
separator: {
data: [data[index - 1], item],
index
},
onPress: () => { }
}}
index={index}
count={data.length}
/>
)
}

return (
<FlatList
style={{ backgroundColor: '#efefef' }}
data={data}
keyExtractor={({ _id }, index) => String(_id)}
ItemSeparatorComponent={(props) => { return <Separator props={props} start={Platform.OS == 'ios' ? 15 : 20} />; }}
renderItem={renderItem}
/>
);
}

export default App;

Props

data

This property receives an interface for configuring the item.

Type: object

  • icon

    Defines the icon to be used on the item.

    Type: icon
  • title

    Defines the title to be used on the item.

    Type: string
  • description

    Defines the description to be used on the item. The behavior of this property follows the native standard for each platform, Android / iOS.

    Type: string
  • subdescription iOS

    Similar to description rendering on Android.

    Type: string
  • component

    Defines a custom component in place of the item.

    Type: ReactNode
  • disabled

    Disable the item.

    Type: boolean
  • loading

    Sets the item as loading and disables it. If the item is of type action, collapsible, switch, checkbox or radio, it will be replaced with an activity indicator.

    Type: boolean
  • chevron iOS

    By default it is true, if you want to hide it just set it to false.

    Type: boolean
  • delay iOS

    The delay after the click event is defaulted, if you want to remove the delay just set it to false.

    Type: boolean
  • collapsible

    Defines whether the item is a collapsible item.

    Type: boolean
  • padding

    The item padding comes by default according to each platform, if you want to remove the padding just change it to false.

    Type: boolean
  • badge

    Defines a small circle that displays a number or text and will be displayed on the right side of the item.

    Type: badge
  • color

    Sets the color of the item title and description.
    The color in the description is only compatible with Android.

    Type: color
  • checkbox

    Defines whether the item is a checkbox item.
    By default it is null, if you want to mark it just set it to false or true.

    Type: boolean
  • radio

    Defines whether the item is a radio item.
    By default it is null, if you want to mark it just set it to false or true.

    Type: boolean
  • separator

    Sets the separator properties of the above item.

    Type: separator
  • cleaner

    Used in conjunction with TextInput, defines whether a clear button will appear according to each platform on the right side of the item.

    Type: cleaner
  • success

    Features a standard success icon on the right side of the item.

    Type: success
  • alert

    Features a standard alert icon on the right side of the item.

    Type: alert
  • switch

    Defines whether the item is a switch item.

    Type: switch
  • action

    Defines whether the item is a action item.
    On iOS it is disabled by default. To use, simply set iOS to true.

    Type: action
  • style

    Set a custom style for the item on the list.

    Type: ViewStyle
  • swipeable iOS

    Configure up to 3 actions on the left side and up to 3 actions on the right side.

    Type: swipeable
  • onPress

    Performing an action when clicking the button.

    Type: async () => void
  • onLongPress

    Performing an action by holding down the button.

    Type: async () => void

header (optional)

Inserts a native header into the Item. For use on Android, set headerOnAndroid equal to true.

Type: string

headerOnAndroid (optional)

If you want to render the header on Android, set it to true.

Type: boolean

headerToTitle (optional)

If used, it will replace the item title with the header, if any. Only supported Android.

Type: boolean

Inserts a native footer into the Item. For use on Android, set footerOnAndroid equal to true.

Type: string

footerOnAndroid (optional)

If you want to render the footer on Android, set it to true.

Only supported Android.

Type: boolean

tabletIpadMenuType (optional)

Defines whether the item will have the characteristics of a Tablet or iPad navigation menu style item.

Supports Tablet and iPad only.

Type: boolean

index (optional)

Sets the index of an item. It can be used to join items together to form a list. Used in conjunction with count.

Type: count

count (optional)

Defines when items have a certain list. Used in conjunction with index.

Type: number

style (optional)

Set a custom style for the item.

Type: ViewStyle

flex (optional)

Defines the main view of the item with style flex 1.

Type: boolean

marginTop (optional)

The marginTop is set by default according to each platform and version, to remove it simply set it to false.

Type: boolean

separators (optional)

To remove the item's native top and bottom separator, set it to false.

Only supported iOS < 15.

Type: boolean

expanded (optional)

If you want to expand the item, set it to true. On iOS < 15 is already set as default, so it has no effect.

Type: boolean

Methods

openLeftActions (iOS)

Method responsible for opening the swipeable from left to right.

Type: async () => void

openRightActions (iOS)

Method responsible for opening the swipeable from right to left.

Type: async () => void

closeActions (iOS)

Method responsible for closing the swipeable both left and right.

Type: async () => void

hideItem (iOS)

Method responsible for creating the transaction to hide the item after executing the swipeable.

Type: (async () => void, side: 'left' | 'right') => void

Type Definitions

icon

Defines the icon to be used on the item.

Type: object

{
name: string, // Defines the icon name.
type: "antdesign" | "entypo" | "evilicons" | "feather" | "font-awesome" | "font-awesome5" | "font-awesome5pro" | "fontisto" | "foundation" | "ionicons" | "material-community" | "material" | "octicons" | "simplelineicons" | "zocial" | "sfsymbol", // Sets the icon type.
size: number, // Sets the icon size.
color: string, // Sets the icon color.
backgroundColor: string, // Sets the background color of the icon.
component: ReactNode // Defines a custom component in place of the icon.
}

badge

Defines a small circle that displays a number or text and will be displayed on the right side of the item.

Type: object

{
value: string, // Determines the value to be printed inside the badge.
// Setting text and badge colors
color: {
text: string, // Sets the text color
badge: string // Sets the badge color
}
}

color

Sets the color of the item title and description.
The color in the description is only compatible with Android.

Type: object

{
title: string, // Sets the color of the item title.
description: string // Sets the color of the item description. Only supported Android.
}

separator

Sets the separator properties of the above item.

Type: object

{
start: number, // Defines where the separator will start.
index: number, // Used in conjunction with FlatList, it receives the index of the item in question.
data: [{}, {}] // Used in conjunction with FlatList, it receives an array of 2 items. The first item must be the previous item in the FlatList, and the second item must be the Item in question.
}

cleaner

Used in conjunction with TextInput, defines whether a clear button will appear according to each platform on the right side of the item.

Type: object

{
visible: boolean, // Defines whether the button is visible.
onPress: async () => void // Performing an action when clicking the button. @returns void
}

success

Features a standard success icon on the right side of the item.

Type: object

{
visible: boolean, // Defines whether the icon is visible.
color: string // Sets the icon color.
}

alert

Features a standard alert icon on the right side of the item.

Type: object

{
visible: string, // Defines whether the icon is visible.
color: string // Sets the icon color.
}

switch

Defines whether the item is a switch item.

Type: object

{
value: boolean, // Sets the switch value.
disabled: boolean, // Set the switch to disabled.
onValueChange: async (value: boolean) => void // Performs an action on value change. @returns void
}

action

Defines whether the item is a action item.
On iOS it is disabled by default. To use, simply set iOS to true.

Type: object

{
// Defines the icon to be used on the action.
icon: {
name: string, // Defines the icon name.
type: "antdesign" | "entypo" | "evilicons" | "feather" | "font-awesome" | "font-awesome5" | "font-awesome5pro" | "fontisto" | "foundation" | "ionicons" | "material-community" | "material" | "octicons" | "simplelineicons" | "zocial" | "sfsymbol", // Sets the icon type.
size: number, // Sets the icon size.
color: string, // Sets the icon color.
component: ReactNode // Defines a custom component in place of the icon.
},
iOS: boolean, // If you want to render the action on iOS, set it to true. Only supported iOS.
onPress: async () => void // Performing an action when clicking the button. @returns void
}

swipeable

onfigure up to 3 actions on the left side and up to 3 actions on the right side.

Type: object

{
// Set up to 3 actions on the left side for swiping.
left: [{
// Defines the icon to be used on the swipeable.
icon: {
name: string, // Defines the icon name.
type: "antdesign" | "entypo" | "evilicons" | "feather" | "font-awesome" | "font-awesome5" | "font-awesome5pro" | "fontisto" | "foundation" | "ionicons" | "material-community" | "material" | "octicons" | "simplelineicons" | "zocial" | "sfsymbol", // Sets the icon type.
size: number, // Sets the icon size.
color: string, // Sets the icon color.
component: ReactNode // Defines a custom component in place of the icon.
},
backgroundColor: string, // Sets the background color of the swipeable.
closeOnPress: boolean, // Sets the slider to close when clicked.
onPress: async () => void // Performing an action when clicking the swipeable. @returns void
}],
// Set up to 3 actions on the right side for swiping.
right: [{
// Defines the icon to be used on the swipeable.
icon: {
name: string, // Defines the icon name.
type: "antdesign" | "entypo" | "evilicons" | "feather" | "font-awesome" | "font-awesome5" | "font-awesome5pro" | "fontisto" | "foundation" | "ionicons" | "material-community" | "material" | "octicons" | "simplelineicons" | "zocial" | "sfsymbol", // Sets the icon type.
size: number, // Sets the icon size.
color: string, // Sets the icon color.
component: ReactNode // Defines a custom component in place of the icon.
},
backgroundColor: string, // Sets the background color of the swipeable.
closeOnPress: boolean, // Sets the slider to close when clicked.
onPress: async () => void // Performing an action when clicking the swipeable. @returns void
}],
byMethod: boolean, // Determines whether sliding can only occur through the openLeftActions or
heightEffect: number, // Sets the height of the effect,
onBegan: async () => void // Performing an action when clicking the swipeable item. @returns void
}