react-native-body-highlighter icon indicating copy to clipboard operation
react-native-body-highlighter copied to clipboard

Published 20 hours ago • verified publisher icon HichamELBSI
→

Metadata

Highlight human body parts with SVG only 💪

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 },
          { slug: "abs", intensity: 2 },
        ]}
        gender="female"
        side="front"
        scale={1.7}
      />
    </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 from "react-native-body-highlighter";

export default function App() {
  const [bodyPartSelected, setBodyPartSelected] = useState({
    slug: "biceps",
    intensity: 2,
  });
  const [isBackSideEnabled, setIsBackSideEnabled] = useState(false);
  const [isMale, setIsMale] = useState(true);
  const toggleSwitch = () =>
    setIsBackSideEnabled((previousState) => !previousState);

  const toggleGenderSwitch = () => setIsMale((previousState) => !previousState);

  return (
    <View style={styles.container}>
      <Body
        data={[
          { slug: "chest", intensity: 1 },
          { slug: "abs", intensity: 2 },
          { slug: "upper-back", intensity: 1 },
          { slug: "lower-back", intensity: 2 },
          bodyPartSelected,
        ]}
        onBodyPartPress={(e) =>
          setBodyPartSelected({ slug: e.slug, intensity: 2 })
        }
        gender={isMale ? "male" : "female"}
        side={isBackSideEnabled ? "back" : "front"}
        scale={1.7}
      />
      <View style={styles.switchContainer}>
        <View style={styles.switch}>
          <Text>Side ({isBackSideEnabled ? "Back" : "Front"})</Text>
          <Switch onValueChange={toggleSwitch} value={isBackSideEnabled} />
        </View>
        <View style={styles.switch}>
          <Text>Gender ({isMale ? "Male" : "Female"})</Text>
          <Switch onValueChange={toggleGenderSwitch} value={isMale} />
        </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",
  },
});

v3.X.X Props

Prop Required Purpose
data Yes BodyPartObject[] - Array of BodyPartObject to highlight
onBodyPartPress No Func - (bodyPart: BodyPartObject) => {} Callback called when a user tap a body part
colors No String[] - Defaults to ['#0984e3', '#74b9ff']
side No string - Can be "back" or "front", Defaults to front
gender No string - Can be "male" or "female", Defaults to male - :warning: Please consider female as a beta work in progress
scale No Float - Defaults to 1

v2.X.X Props

Prop Required Purpose
data Yes (Array) Array of BodyPartObject to highlight
onMusclePress No (Func) (bodyPart: BodyPartObject) => {} Callback called when a user tap a body part, disabled if zoomOnPress is set to true
colors No (Array) Defaults to ['#0984e3', '#74b9ff']
frontOnly No (Boolean) Display only the front, Defaults to false
backOnly No (Boolean) Display only the back, Defaults to false
zoomOnPress No (Boolean) Defaults to false
scale No (Float) Defaults to 1

BodyPart object model

  • BodyPartObject : { slug: BodyPartName, intensity: IntensityNumber }

  • 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)

List of body parts

BodyParts v2 v3 Side
trapezius :white_check_mark: :white_check_mark: Both
triceps :white_check_mark: :white_check_mark: Both
forearm :white_check_mark: :white_check_mark: Both
obliques :white_check_mark: :white_check_mark: Both
adductors :white_check_mark: :white_check_mark: Both
calves :white_check_mark: :white_check_mark: Both
head :white_check_mark: :white_check_mark: Both
neck :white_check_mark: :white_check_mark: Both
chest :white_check_mark: :white_check_mark: Front
biceps :white_check_mark: :white_check_mark: Front
abs   :white_check_mark: :white_check_mark: Front
upper-back :white_check_mark: :white_check_mark: Back
lower-back :white_check_mark: :white_check_mark: Back
hamstring :white_check_mark: :white_check_mark: Back
gluteal :white_check_mark: :white_check_mark: Back
deltoids   :x: :white_check_mark: Both
hands :x: :white_check_mark: Both
feet :x: :white_check_mark: Both
ankles :x: :white_check_mark: Both
tibialis :x: :white_check_mark: Both
adductor :white_check_mark: :x: Both
front-deltoids  :white_check_mark: :x: Front
abductors :white_check_mark: :x: Front
back-deltoids   :white_check_mark: :x: Back

← Metadata

78
Stars
32
Forks
Watchers

Owner

verified publisher icon HichamELBSI

Metadata

Highlight human body parts with SVG only 💪

Back