1.0.4 • Published 2 years ago
react-native-expandable-chips-list v1.0.4
React Native Expandable Chips List
A react native component that lets you build a dynamic expandable chips list.
Installation
Run npm install react-native-expandable-chips-list
in your project directory.
Usage
import React from 'react';
import {StyleSheet, Text, View} from 'react-native';
import ChipsList from 'react-native-expandable-chips-list';
const App = () => {
return (
<ChipsList
data={data}
activeColor="#FFAC1C"
inactiveColor="#FFFFFF"
activeTextColor="#FFFFFF"
inactiveTextColor="#FFAC1C"
onItemPress={(item, index) => console.log(item, index)}
renderContent={(item: string, index: number) => (
<View style={styles.contentContainer}>
<Text style={styles.title}>{item}</Text>
<Text style={styles.subtitle}>{subtitles[index]}</Text>
</View>
)}
/>
);
};
const styles = StyleSheet.create({
contentContainer: {
padding: 10,
},
title: {
color: '#FFFFFF',
fontSize: 18,
fontWeight: 'bold',
},
subtitle: {
color: '#FFFFFF',
fontSize: 16,
},
});
export default App;
Available props
Name | Type | Default | Description |
---|---|---|---|
data | Array of string | REQUIRED | Array of data that is displayed as chips list. |
renderContent | func | REQUIRED (item:string, index:number) => React.ReactElement | Render the content for every chip in the list. |
onItemPress | func | REQUIRED (item:string, index:number) => void | Called when the item is pressed. |
transparent | bool | false | Makes the content view background transparent. |
activeColor | string | #0096FF | Color of the selected chip. |
inactiveColor | string | #FFFFFF | Color of the unselected chips. |
activeTextColor | string | #FFFFFF | Color of the selected chip title. |
inactiveTextColor | string | #0096FF | Color of the unselected chips titles. |
hideBorder | bool | false | Hides the border of the chips. |