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.

GitHub

View Github