All Projects → TuNguyenThanh → react-native-category

TuNguyenThanh / react-native-category

Licence: other
react-native-category

Programming Languages

javascript
184084 projects - #8 most used programming language
objective c
16641 projects - #2 most used programming language
python
139335 projects - #7 most used programming language
java
68154 projects - #9 most used programming language

Projects that are alternatives of or similar to react-native-category

expo-ui-kit
expo-ui-kit - a components based React-Native UI Kit
Stars: ✭ 88 (+282.61%)
Mutual labels:  react-native-component
react-native-window-guard
SafeAreaView alternative for React Native which provides relevant window insets for both iOS and Android.
Stars: ✭ 30 (+30.43%)
Mutual labels:  react-native-component
iconic-input
Beautiful Input components for React Native... <IconicTextbox/> and much more!
Stars: ✭ 22 (-4.35%)
Mutual labels:  react-native-component
react-native-select-pro
React Native dropdown (select) component developed by Mobile Reality
Stars: ✭ 79 (+243.48%)
Mutual labels:  react-native-component
react-native-uiw
A UI component library based on React Native (Android & iOS).
Stars: ✭ 28 (+21.74%)
Mutual labels:  react-native-component
react-native-swipe-action-list
A list view that supports swipe actions for React Native (Android & iOS).
Stars: ✭ 18 (-21.74%)
Mutual labels:  react-native-component
react-native-vector-image
iOS/Android native vector assets generated from SVG
Stars: ✭ 224 (+873.91%)
Mutual labels:  react-native-component
react-native-android-bottom-navigation
Native UI Component of Android's BottomNavigation for react-native
Stars: ✭ 18 (-21.74%)
Mutual labels:  react-native-component
react-native-radio-buttons-group
Simple, best and easy to use radio buttons for react native apps.
Stars: ✭ 145 (+530.43%)
Mutual labels:  react-native-component
react-native-touchable-safe
A single easy-to-use `<Touchable>` component, which harnesses the power of all React Native's `Touchable*` components.
Stars: ✭ 15 (-34.78%)
Mutual labels:  react-native-component
react-native-chat-ui
Actively maintained, community-driven chat UI implementation with an optional Firebase BaaS.
Stars: ✭ 168 (+630.43%)
Mutual labels:  react-native-component
react-native-carousel-component
React Native Carousel Component for IOS & Android
Stars: ✭ 61 (+165.22%)
Mutual labels:  react-native-component
react-native-masonry-brick-list
Staggered Or Masonary List View For React Native Written in pure js
Stars: ✭ 24 (+4.35%)
Mutual labels:  react-native-component
react-native-image-blur-shadow
A React Native Image component with Blur Drop Shadows,100% JavaScript, 0 dependency component. Supports Android, iOS and Web. A light weight <Image/> component for your react native project.
Stars: ✭ 80 (+247.83%)
Mutual labels:  react-native-component
react-native-user-inactivity
Simple component that alerts when the user is inactive (i.e. when the App surface hasn't been touched for X ms)
Stars: ✭ 148 (+543.48%)
Mutual labels:  react-native-component
react-native-multi-selectbox
Platform independent (Android / iOS) Selectbox | Picker | Multi-select | Multi-picker. The idea is to bring out the common user interface & user experience on both platforms.
Stars: ✭ 169 (+634.78%)
Mutual labels:  react-native-component
react-native-card-list
A React Native component which displays a list of image cards that zoom to fullscreen
Stars: ✭ 19 (-17.39%)
Mutual labels:  react-native-component
react-native-boilerplate
React Native Boilerplate - React Native Starter Kits : react-navigation and its dependencies, redux, redux persist and redux thunk, redux toolkit, react native vector icons, react-native async storage
Stars: ✭ 68 (+195.65%)
Mutual labels:  react-native-component
react-native-value-picker
Cross-Platform iOS(ish) style picker for react native.
Stars: ✭ 18 (-21.74%)
Mutual labels:  react-native-component
react-native-bubble-tabbar
🧼 Bubble Tab Bar Component for React Native which supports React Navigation V5 and TypeScript
Stars: ✭ 43 (+86.96%)
Mutual labels:  react-native-component

react-native-category npm version

NPM

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

  • Compatible with both Android and iOS.

  • Detailed Example

Category 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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].