alantoa / react-native-awesome-slider

šŸš€ An anwesome <Slider/> that supports various features haptic, lottie, animation, ballon, etc.
MIT License
263 stars 30 forks source link

NativeViewHierarchyManager: Unable to update properties for view tag error thrown in logcat android #39

Closed le-thi-le closed 1 year ago

le-thi-le commented 1 year ago

Current behaviour When using Slider and i slide it many times, the below error is continuously occurring in Logcat when run on an Android device. E/unknown:NativeViewHierarchyManager: Unable to update properties for view tag 3083 com.facebook.react.uimanager.IllegalViewOperationException: ViewManager for tag 3083 could not be found.

    at com.facebook.react.uimanager.NativeViewHierarchyManager.resolveViewManager(NativeViewHierarchyManager.java:109)
    at com.facebook.react.uimanager.NativeViewHierarchyManager.updateProperties(NativeViewHierarchyManager.java:133)
    at com.facebook.react.uimanager.UIImplementation.synchronouslyUpdateViewOnUIThread(UIImplementation.java:291)
    at com.swmansion.reanimated.NodesManager.updateProps(NodesManager.java:557)
    at com.swmansion.reanimated.NativeProxy.updateProps(NativeProxy.java:93)
    at com.swmansion.reanimated.NativeProxy$AnimationFrameCallback.onAnimationFrame(Native Method)
    at com.swmansion.reanimated.NodesManager.onAnimationFrame(NodesManager.java:252)
    at com.swmansion.reanimated.NodesManager.access$000(NodesManager.java:65)
    at com.swmansion.reanimated.NodesManager$1.doFrameGuarded(NodesManager.java:153)
    at com.facebook.react.uimanager.GuardedFrameCallback.doFrame(GuardedFrameCallback.java:29)
    at com.facebook.react.modules.core.ReactChoreographer$ReactChoreographerDispatcher.doFrame(ReactChoreographer.java:175)
    at com.facebook.react.modules.core.ChoreographerCompat$FrameCallback$1.doFrame(ChoreographerCompat.java:85)
    at android.view.Choreographer$CallbackRecord.run(Choreographer.java:1299)
    at android.view.Choreographer$CallbackRecord.run(Choreographer.java:1309)
    at android.view.Choreographer.doCallbacks(Choreographer.java:923)
    at android.view.Choreographer.doFrame(Choreographer.java:847)
    at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:1283)
    at android.os.Handler.handleCallback(Handler.java:942)
    at android.os.Handler.dispatchMessage(Handler.java:99)
    at android.os.Looper.loopOnce(Looper.java:226)
    at android.os.Looper.loop(Looper.java:313)
    at android.app.ActivityThread.main(ActivityThread.java:8741)
    at java.lang.reflect.Method.invoke(Native Method)
    at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:571)
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1067)

Screenshots (if applicable) error

my code

const renderSubItem = () => { if (isCollapse) { return null; } else { return (

{props.scoreLabel.map((item, index) => { return ( 0 && styles.subItemScoreTitle2, ]}> {item} ); })} {props.readonlySlider ? ( {isNaN(score) ? 'NaN' : score?.toFixed(1)}
      ) : (
        <View
          style={{
            marginHorizontal: pxToPercentage(30),
            width: pxToPercentage(310),
          }}>
          <Slider
            style={{ marginTop: pxToPercentage(8) }}
            theme={{
              minimumTrackTintColor:
                themes['App Theme']['slider_track_color-1'],
              maximumTrackTintColor:
                themes['App Theme']['slider_track_color-2'],
              bubbleBackgroundColor: '#fff',
              bubbleTextColor: themes['App Theme']['slider_track_color-1'],
            }}
            renderBubble={() => {
              //hidden tooltip
              return <View />;
            }}
            containerStyle={styles.slider}
            progress={{
              value: score,
            }}
            minimumValue={{
              value: 0,
            }}
            maximumValue={{
              value: 4,
            }}
            thumbWidth={24}
            onValueChange={(value: any) => {
              const newValue = typeof value === 'number' ? value : value[0];
              // const scoreChange = (newValue / 100) * scoreSuffixes;
              if (newValue !== score) {
                setScore(newValue);
                props.onSliderValueChange?.(getItemResult(newValue));
              }
            }}
            bubble={(number: any) => {
              return number.toFixed(1);
            }}
          />
        </View>
      )}
    </View>
  );
}

};

  • this using <> <TouchableOpacityRN activeOpacity={0.75} onPress={() => setCollapse(!isCollapse)} style={[styles.itemContainer, !isCollapse && styles.itemContainer2]}> <InfoTooltipComponent popoverComponent={{I18n.t(props.model?.tooltip)}}>

    {I18n.t(props.model?.fullName)}
    </InfoTooltipComponent>
    
    <View style={styles.scoreContainerStyle}>
      <Text style={[styles.scoreText]}>
        {toFixed(score)}
        {props.model?.scoreSuffixes}
      </Text>
    
      {onRenderArrowIcon(
        isCollapse,
        props.model?.key === props.scoring?.values?.pasi?.key,
      )}
    </View>

    {renderSubItem()} </>

alantoa commented 1 year ago

@le-thi-le hi, are you sure you are following the installation instructions for Android? https://docs.swmansion.com/react-native-gesture-handler/docs/installation#android

le-thi-le commented 1 year ago

Hi @alantoa , yes i have configured it correctly with the installation instructions for android but it doesn't work

alantoa commented 1 year ago

what's your reanimated & gesturehandler versions?

alantoa commented 1 year ago

I just checked example on Android, and it working well for me! best to share with me a stable example that can be reproduced consistently.

https://github.com/alantoa/react-native-awesome-slider/assets/37520667/72cd0915-92de-474c-b9b1-84a4e63f17af