React Native Pill Component

A customizable pill component for React Native projects, created with Expo. This package allows you to easily create pill-shaped buttons or tags, with support for custom icons, colors, and rounded styling.

Features

• Customizable labels, colors, and icons.
• Click and long-press event handling.
• Easy integration with Expo and React Native projects.
• Supports rounded borders.

Installation

Prerequisites

• You need Node.js and npm or yarn installed.
• Make sure you have expo installed globally:

npm install -g expo-cli

Install the Package

To install the package, run:

npm install react-native-pill

Or if you're using yarn:

yarn add react-native-pill

Usage

Here is an example of how to use the Pill component in your React Native project:

import React, { useState } from "react";
import { StyleSheet, View, Text } from "react-native";
import Pill from "react-native-pill"; // Import the Pill component
import Ionicons from "@expo/vector-icons/Ionicons";

const App = () => {
const [data, setData] = useState([
{
label: "Task 1",
backgroundColor: "#C2BB00",
icon: <Ionicons name="checkmark-circle" size={20} color="white" />,
},
{
label: "Search",
backgroundColor: "#3498db",
icon: <Ionicons name="search" size={20} color="white" />,
},
{
label: "Gallery",
backgroundColor: "#ED8B16",
icon: <Ionicons name="image" size={20} color="white" />,
},
]);

const pressHandler = (label: string, index: number) => {
alert(\`Pressed: \${label}\`);
};

const deleteHandler = (label: string, index: number) => {
setData((prevData) => prevData.filter((\_, i) => i !== index));
};

return (
<View style={styles.container}>
<Text style={styles.title}>React Native Pill Component Example</Text>
<Pill
        data={data}
        pressHandler={pressHandler}
        deleteHandler={deleteHandler}
        rounded
      />
</View>
);
};

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
padding: 20,
},
title: {
fontSize: 20,
fontWeight: "bold",
marginBottom: 20,
},
});

export default App;

Props

| Prop | Type | Required | Default | Description | | ----------------- | -------------------------- | -------- | --------- | --------------------------------------------------------------- | | data | Array<PillItem> | Yes | - | Array of pill items containing label, color, and optional icon. | | pressHandler | (label, index) => void | No | - | Function called when a pill is pressed. | | deleteHandler | (label, index) => void | No | - | Function called when a pill is long-pressed to delete. | | rounded | boolean | No | false | Controls whether pills have rounded borders. |

`PillItem` Object

Each item in the `data` array should have the following structure:

| Key | Type | Description | | ------------------- | ------------------- | ------------------------------------------ | | label | string | The text label displayed inside the pill. | | backgroundColor | string | (Optional) Background color for the pill. | | icon | React.ReactNode | (Optional) An icon component for the pill. |

Example App

You can find an example app demonstrating the usage of the pill component in the example folder. To run it, use:

cd example
npm install
expo start

Contributing

Feel free to submit issues and pull requests. Contributions are always welcome!

npm test

License

MIT License.

Feedback

If you have any questions, suggestions, or feedback, feel free to open an issue or contribute to this project. We'd love to hear from you!