Description:
A React Native component that lets you build a dynamic expandable chips list.
How to use it:
1. Installation.
# NPM $ npm i react-native-expandable-chips-list
2. Import the ChipsList component.
import React from 'react';
import {StyleSheet, Text, View} from 'react-native';
import ChipsList from 'react-native-expandable-chips-list';3. Create an 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>
)}
/>
);
};4. Available component props.
data: Array<string>; transparent?: boolean; activeColor?: string; inactiveColor?: string; activeTextColor?: string; inactiveTextColor?: string; hideBorder?: boolean; renderContent: (item: string, index: number) => React.ReactElement; onItemPress: (item: string, index: number) => void;
Preview:
