react-native-category

• A React Native component for generating and displaying interactive category list.

• Compatible with both Android and iOS.

• Detailed Example

Installation

npm i --save react-native-category

And then set up react-native-vector-icons for your project.

Please file an issue if you have any trouble!

Usage

import Category from 'react-native-category';

....

constructor(props) {
  super(props);

  //setup data category
  this.data = [
    {id: 1, title: 'Apple'},
    {id: 2, title: 'Samsung'},
    {id: 3, title: 'Sony'},
    {id: 4, title: 'Nokia'},
    {id: 5, title: 'HTC'},
    {id: 6, title: 'LG'}
  ];
}

//func call when click item category
_itemChoose(item) {
  alert(item.title);
}

.....
//in render

<Category
  data={this.data}    
  itemSelected={(item) => this._itemChoose(item)}
  itemText={'title'}  //set attribule of object show in item category
/>

Props

Category type Text Item

| Prop | Type | Description | Required | Default | |---|---|---|---|---| |data|array|Data category |Yes|[]| |itemText|string|Attribule show in item category |Yes|''| |itemSelected|function|A function to handle item category presses. |Yes|None| |textType|string|Set type for text (upper, lower, capitalize) |No|None| |indexSelected|number|Set item category selected default |No|0|

Category type Image Item

| Prop | Type | Description | Required | Default | |---|---|---|---|---| |imageData|array|Image data category |No|[]| |iconSet|string|The name of the icon set item category image belongs to. Refer to react-native-vector-icons. |No|FontAwesome| |iconSize|number|Set size icon item category |No|30|

Category props style

| Prop | Type | Description | Required | Default | |---|---|---|---|---| |style|style|Custom style for category |No|None| |itemStyles|style|Custom style for item category |No|None| |colorTextDefault|string|Set Color text default |No|#f5f3f4| |colorTextSelected|string|Set Color text selected |No|#000000| |colorItemDefault|string|Set Color item default |No|rgba(255,255,255,0.2)| |colorItemSelected|string|Set Color item selected |No|#FF4E50| |colorIconDefault|string|Set Color icon default |No|#900| |colorIconSelected|string|Set Color icon selected |No|#FFF| |bounces|bool|Bounces iOS |No|false|

License

ISC