npm package: @sominaththore/rn-body-pain-indicator
Description: rn-body-pain-indicator is a fully customizable React Native component designed to allow users to mark areas of pain on a human body diagram (both front and back views). It provides an intuitive UI for selecting body parts and capturing user input effectiv
Author: Sominath Thore
Latest version: 1.0.1

\# @sominaththore/rn-body-pain-indicator

An interactive React Native component for selecting and tracking body pain areas with an intuitive UI, supporting both front and back body views.


## 🚀 Features

- ✅ **Predefined body parts** – Users can select pain areas without needing to define them manually.  
- ✅ **Interactive SVG overlay** – Highlights selected body parts dynamically.  
- ✅ **Toggle between front & back views** – Ensures accurate pain location identification.  
- ✅ **Customizable styling** – Allows developers to modify button styles and colors via props.  
- ✅ **Easy integration** – Plug-and-play functionality for React Native apps.

## 🔖 Screenshots

<div style="display: flex; justify-content: space-around;">
    <img src="https://github.com/BuntyThore/-sominaththore-rn-body-pain-indicator/blob/main/assets/Screenshot_1755943026.png" width="45%">
    <img src="https://github.com/BuntyThore/-sominaththore-rn-body-pain-indicator/blob/main/assets/Screenshot_1755943038.png" width="45%">
</div>


## Installation

Using npm:
```bash
npm install @sominaththore/rn-body-pain-indicator
```

Using yarn:
```bash
yarn add @sominaththore/rn-body-pain-indicator
```

> **Note:** This package depends on [`react-native-svg`](https://github.com/software-mansion/react-native-svg).  
> Please make sure it's installed in your project:

**Using npm:**

```bash
npm install react-native-svg
```

Using yarn:
```bash
yarn add react-native-svg
```

> 💡 **Tip:** For **React Native CLI** (not Expo), make sure to install CocoaPods for iOS after installing dependencies:

```bash
cd ios && pod install
```

## Usage

Import and use the `BodyPainIndicator` component in your React Native app:

```javascript
import React from 'react';
import { SafeAreaView, View } from 'react-native';
import BodyPainIndicator from '@sominaththore/rn-body-pain-indicator';

export default function App() {

  const handleSelection = (selection) => {
    console.log('Selected Pain Areas:', selection);
  };

  return (
    <SafeAreaView>
      <View>
        <BodyPainIndicator
          instructions="Please mark the areas where you feel pain."
          onSelect={handleSelection}
          buttonStyles={{ backgroundColor: '#4CAF50', padding: 12, borderRadius: 8 }}
        />
      </View>
    </SafeAreaView>
  );
}

```

## ⚙️ Props

| Prop Name     | Type     | Default     | Description                                            |
|---------------|----------|-------------|--------------------------------------------------------|
| `instructions`| string   | `""`        | Text displayed above the body diagram.                |
| `onSelect`    | function | `undefined` | Callback function to receive selected body parts.     |
| `buttonStyles`| object   | `{}`        | Custom styles for the buttons (Next/Submit).          |

---

## 💡 Use Cases

This package is perfect for applications in:

- 🏥 **Healthcare** – Patient symptom tracking  
- 💪 **Fitness & wellness** – Logging muscle soreness or injuries  
- 📋 **Symptom monitoring** – Visual pain area reporting in clinical studies


Authors
===============

1. Sominath Thore, 
[LinkedIn](https://in.linkedin.com/in/sominaththore?trk=public_profile_browsemap&original_referer=https%3A%2F%2Fwww.google.com%2F)