Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

react-native-body-highlighter

Package Overview
Dependencies
Maintainers
0
Versions
31
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-native-body-highlighter

[![npm](https://img.shields.io/npm/v/react-native-body-highlighter.svg)](https://www.npmjs.com/package/react-native-body-highlighter) [![Downloads](https://img.shields.io/npm/dt/react-native-body-highlighter.svg)](https://www.npmjs.com/package/react-nativ

latest
npmnpm
Version
3.1.3
Version published
Weekly downloads
601
-21.74%
Maintainers
0
Weekly downloads
 
Created
Source

react-native-body-highlighter

npm Downloads CircleCI

SVG human body parts highlighter for react-native (Expo compatible).

body-highlighter body-highlighter body-highlighter body-highlighter

Installation

npm

$ npm install react-native-body-highlighter

yarn

$ yarn add react-native-body-highlighter

Usage

Basic example

import { useState } from "react";
import Body from "react-native-body-highlighter";

export default function App() {
  return (
    <View style={styles.container}>
      <Body
        data={[
          { slug: "chest", intensity: 1, side: "left" },
          { slug: "biceps", intensity: 2 },
        ]}
        gender="female"
        side="front"
        scale={1.7}
        border="#dfdfdf"
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});
Complete example 

import { StyleSheet, Switch, Text, View } from "react-native";
import { useState } from "react";
import Body, { ExtendedBodyPart } from "react-native-body-highlighter";

export default function App() {
  const [selectedBodyPart, setSelectedBodyPart] =
    useState <
    ExtendedBodyPart >
    {
      slug: "biceps",
      intensity: 2,
      side: "right",
    };
  const [side, setSide] = (useState < "back") | ("front" > "front");
  const [gender, setGender] = (useState < "male") | ("female" > "male");

  const sideSwitch = () =>
    setSide((previousState) => (previousState === "front" ? "back" : "front"));

  const toggleGenderSwitch = () => {
    setGender((previousState) =>
      previousState === "male" ? "female" : "male"
    );
  };

  return (
    <View style={styles.container}>
      <Body
        data={[
          { slug: "chest", intensity: 1, side: "left" },
          { slug: "biceps", intensity: 1 },
          selectedBodyPart,
        ]}
        onBodyPartPress={(e, side) =>
          setSelectedBodyPart({ slug: e.slug, intensity: 2, side })
        }
        gender={gender}
        side={side}
        scale={1.7}
        border="#dfdfdf"
      />
      <View style={styles.switchContainer}>
        <View style={styles.switch}>
          <Text>Side ({side})</Text>
          <Switch onValueChange={sideSwitch} value={side === "front"} />
        </View>
        <View style={styles.switch}>
          <Text>Gender ({gender})</Text>
          <Switch
            onValueChange={toggleGenderSwitch}
            value={gender === "male"}
          />
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  switchContainer: {
    flexDirection: "row",
    gap: 30,
  },
  switch: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
});

Props

PropRequiredPurpose
dataYesBodyPartObject[] - Array of BodyPartObject to highlight
onBodyPartPressNoFunc - (bodyPart: BodyPartObject, side?: left | right) => {} Callback called when a user tap a body part
colorsNostring[] - Defaults to ['#0984e3', '#74b9ff']
sideNofront | back - Defaults to front
genderNostring - Can be "male" or "female", Defaults to male
scaleNonumber - Defaults to 1
borderNostring - Defaults to #dfdfdf (none to hide the border)

BodyPart object model

  • BodyPartObject: { slug: BodyPartName, intensity: IntensityNumber, side?: 'left' | 'right' }

  • BodyPartName: Body part name to highlight (See the list of available body parts below)

  • IntensityNumber: Color intensity (if the colors property is set: from 1 to colors.length + 1. If not, intensity can be 1 or 2)

  • Side (optional): Can be left, right. Useful for selecting a single part or a pair (Do not set the side if you need to select the pair)

List of body parts

BodyPartsSide
trapeziusBoth
tricepsBoth
forearmBoth
adductorsBoth
calvesBoth
hairBoth
neckBoth
deltoids  Both
handsBoth
feetBoth
headBoth (Front only for female)
anklesBoth (Front only for female)
tibialisFront
obliquesFront
chestFront
bicepsFront
abs  Front
quadriceps  Front
knees  Front
upper-backBack
lower-backBack
hamstringBack
glutealBack

Keywords

reactnative
react
muscle
muscles
body
highlighter

FAQs

Package last updated on 14 Nov 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

Another Round of TEA Protocol Spam Floods npm, But It’s Not a Worm

Security News

Another Round of TEA Protocol Spam Floods npm, But It’s Not a Worm

Recent coverage mislabels the latest TEA protocol spam as a worm. Here’s what’s actually happening.

By Philipp Burckhardt  -  Nov 14, 2025
Malicious Chrome Extension Exfiltrates Seed Phrases, Enabling Wallet Takeover

Research

/

Security News

Malicious Chrome Extension Exfiltrates Seed Phrases, Enabling Wallet Takeover

A malicious Chrome extension posing as an Ethereum wallet steals seed phrases by encoding them into Sui transactions, enabling full wallet takeover.

By Kirill Boychenko  -  Nov 12, 2025