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;