Complete example
```jsx
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 (
setSelectedBodyPart({ slug: e.slug, intensity: 2, side })
}
gender={gender}
side={side}
scale={1.7}
border="#dfdfdf"
/>
Side ({side})
Gender ({gender})
);
}
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
| 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` |
| scale | No | `number` - Defaults to `1` |
| border | No | `string` - Defaults to `#dfdfdf` (`none` to hide the border) |
| disabledParts | No | `Slug[]` - Contains array of Slugs to be disabled |
| hiddenParts | No | `Slug[]` - Contains array of Slugs to be hidden (not rendered) |
| defaultFill | No | `string` - Default fill color for body parts. Defaults to `#3f3f3f` |
| defaultStroke | No | `string` - Default stroke color for body parts. Defaults to `none` |
| defaultStrokeWidth | No | `number` - Default stroke width for body parts. Defaults to `0` |
## BodyPart object model
### Accessibility
Each `
