Skip to main content

Card

A card can be generated using the component property in the data of the List or Item.

Library

You can find these cards and all other ready-made components in our library.

Light Theme

Usage​

On the list​

This component can be used in the list that has a rendering limit of up to 10 items. If you need to implement it in a dynamic list, use the FlatList component.

import React from 'react';
import { Text, View } from 'react-native';

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

const App = () => {
  const _list: Array<ICardProps> = [
    {
      component: (
        <View>
          <Text>Card 1</Text>
        </View>
      ),
      onPress: async () => { }
    },
    {
      component: (
        <View>
          <Text>Card 2</Text>
        </View>
      ),
      onPress: async () => { }
    }
  ];

  return (
    <List data={_list} />
  );
}

export default App;

In the item​

This component can be used individually in the item.

import React from 'react';
import { Text, View } from 'react-native';

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

const App = () => {
  const _item: ICardProps = {
    component: (
      <View>
        <Text>Card</Text>
      </View>
    ),
    chevron: false,
    onPress: async () => { }
  };

  return (
    <Item data={_item} />
  );
}

export default App;

Props​

data​

This property receives an interface for configuring the card.

Type: ICardProps​

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.

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.

Only supported In the item.

Type: count​

count (optional)​

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

Only supported In the item.

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.

Only supported In the item.

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​

Interface​

ICardProps​

This interface receives parameter data and values for card configuration.

Type: object​

  • icon

    Defines the icon to be used on the item.

    Type: icon​

  • component

    Defines a custom component in place of the item.

    Type: ReactNode​

  • disabled

    Disable the item.

    Type: boolean​

  • chevron iOS

    The delay after the click event is defaulted, if you want to remove the delay 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​

  • 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​

  • separator

    Sets the separator properties of the above item.

    Type: separator​

  • style

    Set a custom style for the item on the list.

    Type: ViewStyle​

  • onPress

    Performing an action when clicking the button.

    Type: async () => void​

  • onLongPress

    Performing an action by holding down the button.

    Type: async () => 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.
}

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.
}