@arelstone/react-native-email-chip/dist/components/Chip.js

React Native component to display a list of emails as editable chips

import React from 'react';
import { TouchableOpacity, View, Text, StyleSheet } from 'react-native';
export const Chip = ({ chipContainerStyle, index, onPress, chipImage, chipTextStyle, value }) => {
    return <TouchableOpacity style={[styles.chipContainer, chipContainerStyle]} onPress={() => onPress(index)} testID={`ChipContainer_${index}`}>
        <Text testID="content" style={[styles.chipText, chipTextStyle]}>
            {value}
        </Text>

        {chipImage && <View style={styles.chipImageContainer} testID="ChipImage">
            {chipImage}
        </View>}
    </TouchableOpacity>;
};
const styles = StyleSheet.create({
    chipContainer: {
        backgroundColor: 'lightgray',
        paddingHorizontal: 10,
        paddingVertical: 5,
        borderRadius: 15,
        marginHorizontal: 5,
        marginVertical: 5,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
    },
    chipText: {},
    chipImageContainer: {
        marginLeft: 5,
    },
});