Add female body

HichamELBSI · Dec 7, 2023 · 281738c · 281738c
1 parent 652a1c5
commit 281738c
Show file tree

Hide file tree

Showing 19 changed files with 1,101 additions and 78 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "svg.preview.background": "white"
+}
diff --git a/README.md b/README.md
@@ -3,33 +3,69 @@
 [![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-native-body-highlighter)
 [![CircleCI](https://circleci.com/gh/HichamELBSI/react-native-body-highlighter.svg?style=svg)](https://circleci.com/gh/HichamELBSI/react-native-body-highlighter)
 
-> SVG human body parts highlighter for react-native.
+> SVG human body parts highlighter for react-native (Expo compatible).
 
 <div style="text-align:center;width:100%;">
-  <img src="./docs/screenshots/example-front.PNG" width="150" alt="body-highlighter" />
-  <img src="./docs/screenshots/example-back.PNG" width="150" alt="body-highlighter" />
+  <img src="./docs/screenshots/example-female-front.PNG" width="150" alt="body-highlighter" />
+  <img src="./docs/screenshots/example-female-back.PNG" width="150" alt="body-highlighter" />
+  <img src="./docs/screenshots/example-male-front.PNG" width="150" alt="body-highlighter" />
+  <img src="./docs/screenshots/example-male-back.PNG" width="150" alt="body-highlighter" />
 </div>
 
 ## Installation
 
+npm
+
 ```bash
-$ npm install react-native-body-highlighter --save
+$ npm install react-native-body-highlighter
 ```
 
-or use yarn
+yarn
 
 ```bash
 $ yarn add react-native-body-highlighter
 ```
 
 ## Usage
 
-Note: If you don't use `Expo`, ensure to add [react-native-svg](https://github.com/react-native-community/react-native-svg) to your project before using this package.
+### Basic example
+
+```jsx
+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",
+  },
+});
+```
 
-The snippet below shows how the component can be used
+<details>
+<summary style="font-size:18px; font-weight: bold;">Complete example</summary>
+<p>
 
 ```jsx
-import { StyleSheet, Switch, View } from "react-native";
+import { StyleSheet, Switch, Text, View } from "react-native";
 import { useState } from "react";
 import Body from "react-native-body-highlighter";
 
@@ -39,9 +75,12 @@ export default function App() {
     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
@@ -55,11 +94,20 @@ export default function App() {
         onBodyPartPress={(e) =>
           setBodyPartSelected({ slug: e.slug, intensity: 2 })
         }
+        gender={isMale ? "male" : "female"}
         side={isBackSideEnabled ? "back" : "front"}
         scale={1.7}
       />
-      <Switch onValueChange={toggleSwitch} value={isBackSideEnabled} />
-      <StatusBar style="auto" />
+      <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>
   );
 }
@@ -71,30 +119,43 @@ const styles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center",
   },
+  switchContainer: {
+    flexDirection: "row",
+    gap: 30,
+  },
+  switch: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  },
 });
 ```
 
+</p>
+</details>
+
 ## 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" Display only the front, Defaults to `front`         |
-| scale           | No       | `Float` - Defaults to `1`                                                               |
+| 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`                                                                                                     |
+| 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
 

diff --git a/assets/bodyBack.ts b/assets/bodyBack.ts
@@ -1,7 +1,7 @@
 import { BodyPart } from "..";
 
 export const bodyBack: BodyPart[] = [
-  // Trapezius
+  // Neck
   {
     slug: "neck",
     color: "#3f3f3f",
@@ -11,6 +11,7 @@ export const bodyBack: BodyPart[] = [
     ],
   },
 
+  // Trapezius
   {
     slug: "trapezius",
     color: "#3f3f3f",