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:

Download Details:

Author: danielcocos

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/danielcocos/react-native-expandable-chips-list

License: MIT