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