# @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

Installation

Using npm:

npm install @sominaththore/rn-body-pain-indicator

Using yarn:

yarn add @sominaththore/rn-body-pain-indicator

Note: This package depends on react-native-svg.
Please make sure it's installed in your project:

Using npm:

npm install react-native-svg

Using yarn:

yarn add react-native-svg

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

cd ios && pod install

Usage

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

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