Skip to main content

Action

A button is generated on the right side of the item so that an event can be assigned to its click.

NOTE

On iOS it is disabled by default. To use, simply set iOS to true.

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';

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

const App = () => {
  const _list: Array<IActionProps> = [
    {
      title: 'Item 1',
      action: {
        icon: { name: 'more-horizontal', type: 'feather', color: '#333333', size: 20 },
        onPress: async () => { }
      }
    },
    {
      title: 'Item 2',
      action: {
        icon: { name: 'more-horizontal', type: 'feather', color: '#333333', size: 20 },
        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';

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

const App = () => {
  const _item: IActionProps = {
    title: 'Item',
    action: {
      icon: { name: 'more-horizontal', type: 'feather', color: '#333333', size: 20 },
      onPress: async () => { }
    }
  };

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

export default App;

Props​

data​

This property receives an interface for configuring the action.

Type: IActionProps​

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​

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.

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​

IActionProps​

This interface receives data and parameter values for action configuration.

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​

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

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

  • separator

    Sets the separator properties of the above item.

    Type: separator​

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

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

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

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
}