Giter VIP home page Giter VIP logo

react-native-body-highlighter's Issues

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',
  }
});

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},
]}/>

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'
    }
}

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?

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

Screenshot 2022-09-05 at 10 13 28

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.

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.

Invariant Violation

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.