hichamelbsi / react-native-body-highlighter Goto Github PK

View Code? Open in Web Editor NEW

65.0 65.0 24.0 2.77 MB

react-native-body-highlighter 💪

License: MIT License

JavaScript 0.11% TypeScript 99.89%

react-native-body-highlighter's Introduction

react-native-body-highlighter's People

Contributors

Stargazers

Watchers

react-native-body-highlighter's Issues

There are no hand palm and foot

Need hand palm and Foot in svg image so we can click all parts of human body

Old react-native-svg version causes crashes

Hey there,

When using this package with [email protected] and [email protected], as soon as the view is rendered the app crashes. A fix for this would be to bump the versions of react-native-svg atleast. By bumping it to the latest version, the package will support versions of react-native equals to and over 0.63, as well as supporting the new fabric framework.

I have made a fork where the package is updated, and I've confirmed that the body renders correctly with that version

Component does not render.

Versions:

"react": "16.8.6"
"react-native": "0.60.3"
"react-native-svg": "^9.5.3"

stacktrace:

ExceptionsManager.js:94 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check your code at body.js:84.
    in Body (at HomeView.js:77)
    in RCTView (at View.js:35)
    in View (at ScrollView.js:1007)
    in RCTScrollView (at ScrollView.js:1147)
    in ScrollView (at HomeView.js:59)
    in RCTView (at View.js:35)
    in View (at HomeView.js:53)
    in HomeView (at HomeContainer.js:19)
    in HomeContainer (created by ConnectFunction)
    in ConnectFunction (at SceneView.js:9)
    in SceneView (at StackViewLayout.tsx:888)
    in RCTView (at View.js:35)
    in View (at StackViewLayout.tsx:887)
    in RCTView (at View.js:35)
    in View (at StackViewLayout.tsx:886)
    in RCTView (at View.js:35)
    in View (at createAnimatedComponent.js:151)
    in AnimatedComponent (at StackViewCard.tsx:93)
    in RCTView (at View.js:35)
    in View (at createAnimatedComponent.js:151)
    in AnimatedComponent (at screens.native.js:71)
    in Screen (at StackViewCard.tsx:80)
    in Card (at createPointerEventsContainer.tsx:95)
    in Container (at StackViewLayout.tsx:971)
    in RCTView (at View.js:35)
    in View (at screens.native.js:101)
    in ScreenContainer (at StackViewLayout.tsx:383)
    in RCTView (at View.js:35)
    in View (at createAnimatedComponent.js:151)
    in AnimatedComponent (at StackViewLayout.tsx:379)
    in PanGestureHandler (at StackViewLayout.tsx:372)
    in StackViewLayout (at withOrientation.js:30)
    in withOrientation (at StackView.tsx:103)
    in RCTView (at View.js:35)
    in View (at Transitioner.tsx:267)
    in Transitioner (at StackView.tsx:40)
    in StackView (at createNavigator.js:61)
    in Navigator (at createKeyboardAwareNavigator.js:12)
    in KeyboardAwareNavigator (at createAppContainer.js:429)
    in NavigationContainer (at navigation/index.js:8)
    in AppNavigator (at EntryPoint.js:12)
    in Provider (at EntryPoint.js:11)
    in Entrypoint (at renderApplication.js:40)
    in RCTView (at View.js:35)
    in View (at AppContainer.js:98)
    in RCTView (at View.js:35)
    in View (at AppContainer.js:115)
    in AppContainer (at renderApplication.js:39)

code:

import Body from 'react-native-body-highlighter';

<Body data={[
 {slug: 'chest', intensity: 1},
  {slug: 'front-deltoids', intensity: 2},
  {slug: 'triceps', intensity: 2},
]}/>

Invariant Violation

Invariant violation occurs when trying to render diagram. Worked on previous version (v2.1.0) with fix from issue #26

Error while toggle the body

Add license

I'd love to fork this repo and convert this for my Angular project, as an Angular component, but there's no license found so I think I should not do that. Can you please add a license?

The app app crashed with {"rootTag":1}

When i put the body object, I get the following error

And the application closes
This is the code:

Thanks

Deltoids is listed twice

react-native-body-highlighter/index.tsx

Line 16 in e4923f2

| "deltoids"

It was previously "front-deltoids" and "back-deltoids"

Updated data doesn't re-render SVG Polygon

First of all thank you for this amazing library.
Edited: I found out the issue was with react-native-svg version 13.1.0 and react-native version 0.70.0. So downgrading react-native-svg version to 13.0.0 with react-native version 0.70.0 worked.
I'm trying to update the svg when i click on body parts of the human skeleton. I've following code snippets.
It would be very helpful if you can guide me what's wrong with my implementation.

Versions:
react: "18.1.0",
react-native: "0.70.0",
react-native-svg: "^13.1.0",
react-native-body-highlighter: "^2.1.0"

Code Snippet:

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

interface DataType {
    intensity?: number;
    slug: string;
    color?: string;
    pointsArray?: string[];
}

const data: ReadonlyArray<DataType> = [
    { slug: "chest", intensity: 1 },
    { slug: "upper-back", intensity: 1 },
];

const HumanBody = () => {
    const [muscleData, setmuscleData] = useState(data)
    return (
        <View style={styles.flex}>
            <Body scale={2} data={muscleData} frontOnly={true}
                onMusclePress={(muscle: DataType) => {
                    let muscles = [...muscleData]
                    muscles.push(
                        { slug: muscle.slug, intensity: 1 }
                    )
                    setmuscleData(muscles)
                }}
            />
        </View>
    )
}
export default HumanBody;

const styles = {
    flex: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
    }
}

crashes app when including Body

I am using Expo to build the app. It works fine in the simulator for both iOS and Android, but building it and opening a page with the Body component crashes the app.
tested 3.0.0-beta.4 and beta.6
Not sure if this is related to 'react-native-svg' bug i have been reading up on.

switch to woman?

First of all, thank you very much for your efforts.

Is it possible to use a woman in addition to a man?

I could extend this myself, but I'm not very familiar with vector graphics.

Many thanks in advance.

select forearm and hands togheter

Hi, I'm relativelly new to javascript world.

Thank you for making this project.

I'm wanna know if has a way to when I select the hands the forearm is selected togheter and vice versa. I don't think that is possible to work this body parts isolated. I tryed to use useeffect to when I select one of those body part the other one is selected. but it have a delay when updating the usestate. Do you mind telling me if is possible to do so?

import React, { useEffect } from "react";
import { useState } from "react";
import { Switch, StyleSheet } from "react-native";
import { Text, View } from '../../components/Themed';
import Body from "react-native-body-highlighter";


export default function App() {
  const [bodyPartSelected, setBodyPartSelected] = useState([{color: "", slug: "", intensity: 0}]);
  const [isBackSideEnabled, setIsBackSideEnabled] = useState(false);
  const [selectedBodyPart, setSelectedBodyPart] = useState("");

  const toggleSwitch = () =>
    setIsBackSideEnabled((previousState) => !previousState);

  useEffect(() => {
    if (selectedBodyPart == "forearm"){
        setBodyPartSelected([{slug: "hands", intensity: 1, color: ""}, ...bodyPartSelected]
        )
      }
    else if (selectedBodyPart == "hands"){
        setBodyPartSelected([{slug: "forearm", intensity: 1, color: ""}, ...bodyPartSelected]
        )
    }
  }, [selectedBodyPart])

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Tab Tree</Text>
      <Body
        data={[
            {slug: "head", intensity: 3, color: ""},
            {slug: "hair", intensity: 3, color: ""},
            ...bodyPartSelected
        ]}
        onBodyPartPress={(e) => {
          setBodyPartSelected([{ slug: e.slug, intensity: 1, color: "" }])
          setSelectedBodyPart(e.slug)
        }
        }
        side={isBackSideEnabled ? "back" : "front"}
        scale={1.0}
        colors={['#0984e3', '#74b9ff', "#464646"]}
      />
      <Switch onValueChange={toggleSwitch} value={isBackSideEnabled} />
    </View>
    
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
  }
});

hichamelbsi / react-native-body-highlighter Goto Github PK

react-native-body-highlighter's Introduction

react-native-body-highlighter's People

Contributors

Stargazers

Watchers

Forkers

react-native-body-highlighter's Issues

Recommend Projects

Recommend Topics

Recommend Org