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. |