Giter VIP home page Giter VIP logo

react-native-body-highlighter's Issues

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.

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

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

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

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

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.

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?

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.