SVG human body parts highlighter for react-native (Expo compatible).
npm
$ npm install react-native-body-highlighteryarn
$ yarn add react-native-body-highlighterimport { 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",
},
});| Prop | Required | Purpose |
|---|---|---|
| data | Yes | BodyPartObject[] - Array of BodyPartObject to highlight |
| onBodyPartPress | No | Func - (bodyPart: BodyPartObject, side?: left | right) => {} Callback called when a user tap a body part |
| colors | No | string[] - Defaults to ['#0984e3', '#74b9ff'] |
| side | No | front | back - Defaults to front |
| gender | No | string - Can be "male" or "female", Defaults to male - female as a beta work in progress |
| scale | No | number - Defaults to 1 |
| border | No | string - Defaults to #dfdfdf (none to hide the border) |
| 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 |
| BodyParts | v2 | v3 | Side |
|---|---|---|---|
| trapezius | ✅ | ✅ | Both |
| triceps | ✅ | ✅ | Both |
| forearm | ✅ | ✅ | Both |
| obliques | ✅ | ✅ | Both |
| adductors | ✅ | ✅ | Both |
| calves | ✅ | ✅ | Both |
| head | ✅ | ✅ | Both |
| neck | ✅ | ✅ | Both |
| chest | ✅ | ✅ | Front |
| biceps | ✅ | ✅ | Front |
| abs | ✅ | ✅ | Front |
| upper-back | ✅ | ✅ | Back |
| lower-back | ✅ | ✅ | Back |
| hamstring | ✅ | ✅ | Back |
| gluteal | ✅ | ✅ | Back |
| deltoids | ❌ | ✅ | Both |
| hands | ❌ | ✅ | Both |
| feet | ❌ | ✅ | Both |
| ankles | ❌ | ✅ | Both |
| tibialis | ❌ | ✅ | Both |
| adductor | ✅ | ❌ | Both |
| front-deltoids | ✅ | ❌ | Front |
| abductors | ✅ | ❌ | Front |
| back-deltoids | ✅ | ❌ | Back |