search

wix-incubator / react-native-interactable

Experimental implementation of high performance interactable views in React Native
MIT License
5.18k stars 516 forks source link

[Android] Error while updating property 'transform' of a view managed by: RCTView. Cannot set 'scaleX' to Float.NaN #284

Open addingama opened 5 years ago

addingama commented 5 years ago

I'm having trouble after upgrading my RN project from RN 0.57.8 to RN 0.59.9.

I got this error.

image

This is the implementation on my app

<Interactable.View
              verticalOnly={true}
              ref='panel'
              snapPoints={[
                {y: 0, id: 'top', index: 0},
                {y: MIN_LOC_SIZE, id: 'bottom', index: 1},
                {y: (-1*INIT_HEIGHT)+extraHeight, id: 'location_search', index: 2}
              ]}
              alertAreas={[{id: 'nearBottom', influenceArea: {top: MIN_LOC_SIZE-20, bottom: MIN_LOC_SIZE+20}}]}
              scrollEventThrottle={16}
              frictionAreas={isIphone ? null : [{damping: 1.0, influenceArea: {top: MIN_LOC_SIZE-1}}]}
              dragWithSpring={isIphone ? null : {tension: 2000, damping: 0.5}}
              animatedNativeDriver={true}
              boundaries={
               {
                  top: this.state.searchActive ? -1*INIT_HEIGHT : MIN_LOC_SIZE-1,
                  bottom: 0,
                }
              }
              dragToss={.1}
              onSnap={this.onSnap}
              onAlert={this.onAlert}
            //  onScroll={(event) => console.log(event.nativeEvent.y)}
              animatedValueY={this._deltaY}
              showsVerticalScrollIndicator={false}
              style={{backgroundColor: standards.backgroundColor}}
            >
              <SearchLocationBar
                heightL={SEARCH_RESULTS_HEIGHT}
                heightS={SEARCH_BAR_HEIGHT}
                heightBase={SEARCH_BAR_BASE_HEIGHT}
                searchActive={this.state.searchActive}
                deactivateSearch={this._deactivateSearch}
                activateSearch={this._activateSearch}
                />
              <SearchVenueList
                // hval={null}
                hval={hval}
                sval={sval}
                canScroll={this.state.canScroll}
                onScroll={this.onScroll} />
            </Interactable.View>

This is the full stack trace

ava.lang.IllegalArgumentException: Cannot set 'scaleX' to Float.NaN
    at android.view.View.sanitizeFloatPropertyValue(View.java:16979)
    at android.view.View.sanitizeFloatPropertyValue(View.java:16953)
    at android.view.View.setScaleX(View.java:16342)
    at com.facebook.react.uimanager.BaseViewManager.setTransformProperty(BaseViewManager.java:220)
    at com.facebook.react.uimanager.BaseViewManager.setTransform(BaseViewManager.java:72)
    at com.facebook.react.views.view.ReactViewManager.setTransform(ReactViewManager.java:218)
    at com.facebook.react.views.view.ReactViewManager.setTransform(ReactViewManager.java:36)
    at java.lang.reflect.Method.invoke(Method.java)
    at com.facebook.react.uimanager.ViewManagersPropertyCache$PropSetter.updateViewProp(ViewManagersPropertyCache.java:83)
    at com.facebook.react.uimanager.ViewManagerPropertyUpdater$FallbackViewManagerSetter.setProperty(ViewManagerPropertyUpdater.java:132)
    at com.facebook.react.uimanager.ViewManagerPropertyUpdater.updateProps(ViewManagerPropertyUpdater.java:51)
    at com.facebook.react.uimanager.ViewManager.updateProperties(ViewManager.java:37)
    at com.facebook.react.uimanager.NativeViewHierarchyManager.updateProperties(NativeViewHierarchyManager.java:136)
    at com.facebook.react.uimanager.UIImplementation.synchronouslyUpdateViewOnUIThread(UIImplementation.java:345)
    at com.facebook.react.animated.PropsAnimatedNode.updateView(PropsAnimatedNode.java:99)
    at com.facebook.react.animated.NativeAnimatedNodesManager.updateNodes(NativeAnimatedNodesManager.java:545)
    at com.facebook.react.animated.NativeAnimatedNodesManager.handleEvent(NativeAnimatedNodesManager.java:414)
    at com.facebook.react.animated.NativeAnimatedNodesManager.onEventDispatch(NativeAnimatedNodesManager.java:392)
    at com.facebook.react.uimanager.events.EventDispatcher.dispatchEvent(EventDispatcher.java:117)
    at com.wix.interactable.InteractableViewManager$InteractionEventEmitter.onAnimatedEvent(InteractableViewManager.java:195)
    at com.wix.interactable.InteractableView.onAnimationFrame(InteractableView.java:112)
    at com.wix.interactable.physics.PhysicsAnimator.doFrame(PhysicsAnimator.java:34)
    at android.view.Choreographer$CallbackRecord.run(Choreographer.java:947)
    at android.view.Choreographer.doCallbacks(Choreographer.java:761)
    at android.view.Choreographer.doFrame(Choreographer.java:693)
    at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:935)
    at android.os.Handler.handleCallback(Handler.java:873)
    at android.os.Handler.dispatchMessage(Handler.java:99)
    at android.os.Looper.loop(Looper.java:214)
    at android.app.ActivityThread.main(ActivityThread.java:6981)
    at java.lang.reflect.Method.invoke(Method.java)
    at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493)
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1445)
java.lang.reflect.InvocationTargetException: null
    at java.lang.reflect.Method.invoke(Method.java)
    at com.facebook.react.uimanager.ViewManagersPropertyCache$PropSetter.updateViewProp(ViewManagersPropertyCache.java:83)
    at com.facebook.react.uimanager.ViewManagerPropertyUpdater$FallbackViewManagerSetter.setProperty(ViewManagerPropertyUpdater.java:132)
    at com.facebook.react.uimanager.ViewManagerPropertyUpdater.updateProps(ViewManagerPropertyUpdater.java:51)
    at com.facebook.react.uimanager.ViewManager.updateProperties(ViewManager.java:37)
    at com.facebook.react.uimanager.NativeViewHierarchyManager.updateProperties(NativeViewHierarchyManager.java:136)
    at com.facebook.react.uimanager.UIImplementation.synchronouslyUpdateViewOnUIThread(UIImplementation.java:345)
    at com.facebook.react.animated.PropsAnimatedNode.updateView(PropsAnimatedNode.java:99)
    at com.facebook.react.animated.NativeAnimatedNodesManager.updateNodes(NativeAnimatedNodesManager.java:545)
    at com.facebook.react.animated.NativeAnimatedNodesManager.handleEvent(NativeAnimatedNodesManager.java:414)
    at com.facebook.react.animated.NativeAnimatedNodesManager.onEventDispatch(NativeAnimatedNodesManager.java:392)
    at com.facebook.react.uimanager.events.EventDispatcher.dispatchEvent(EventDispatcher.java:117)
    at com.wix.interactable.InteractableViewManager$InteractionEventEmitter.onAnimatedEvent(InteractableViewManager.java:195)
    at com.wix.interactable.InteractableView.onAnimationFrame(InteractableView.java:112)
    at com.wix.interactable.physics.PhysicsAnimator.doFrame(PhysicsAnimator.java:34)
    at android.view.Choreographer$CallbackRecord.run(Choreographer.java:947)
    at android.view.Choreographer.doCallbacks(Choreographer.java:761)
    at android.view.Choreographer.doFrame(Choreographer.java:693)
    at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:935)
    at android.os.Handler.handleCallback(Handler.java:873)
    at android.os.Handler.dispatchMessage(Handler.java:99)
    at android.os.Looper.loop(Looper.java:214)
    at android.app.ActivityThread.main(ActivityThread.java:6981)
    at java.lang.reflect.Method.invoke(Method.java)
    at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493)
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1445)
com.facebook.react.bridge.JSApplicationIllegalArgumentException: Error while updating property 'transform' of a view managed by: RCTView
    at com.facebook.react.uimanager.ViewManagersPropertyCache$PropSetter.updateViewProp(ViewManagersPropertyCache.java:95)
    at com.facebook.react.uimanager.ViewManagerPropertyUpdater$FallbackViewManagerSetter.setProperty(ViewManagerPropertyUpdater.java:132)
    at com.facebook.react.uimanager.ViewManagerPropertyUpdater.updateProps(ViewManagerPropertyUpdater.java:51)
    at com.facebook.react.uimanager.ViewManager.updateProperties(ViewManager.java:37)
    at com.facebook.react.uimanager.NativeViewHierarchyManager.updateProperties(NativeViewHierarchyManager.java:136)
    at com.facebook.react.uimanager.UIImplementation.synchronouslyUpdateViewOnUIThread(UIImplementation.java:345)
    at com.facebook.react.animated.PropsAnimatedNode.updateView(PropsAnimatedNode.java:99)
    at com.facebook.react.animated.NativeAnimatedNodesManager.updateNodes(NativeAnimatedNodesManager.java:545)
    at com.facebook.react.animated.NativeAnimatedNodesManager.handleEvent(NativeAnimatedNodesManager.java:414)
    at com.facebook.react.animated.NativeAnimatedNodesManager.onEventDispatch(NativeAnimatedNodesManager.java:392)
    at com.facebook.react.uimanager.events.EventDispatcher.dispatchEvent(EventDispatcher.java:117)
    at com.wix.interactable.InteractableViewManager$InteractionEventEmitter.onAnimatedEvent(InteractableViewManager.java:195)
    at com.wix.interactable.InteractableView.onAnimationFrame(InteractableView.java:112)
    at com.wix.interactable.physics.PhysicsAnimator.doFrame(PhysicsAnimator.java:34)
    at android.view.Choreographer$CallbackRecord.run(Choreographer.java:947)
    at android.view.Choreographer.doCallbacks(Choreographer.java:761)
    at android.view.Choreographer.doFrame(Choreographer.java:693)
    at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:935)
    at android.os.Handler.handleCallback(Handler.java:873)
    at android.os.Handler.dispatchMessage(Handler.java:99)
    at android.os.Looper.loop(Looper.java:214)
    at android.app.ActivityThread.main(ActivityThread.java:6981)
    at java.lang.reflect.Method.invoke(Method.java)
    at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493)
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1445)

Any clue on how to fix this?

React native info

React Native Environment Info:
    System:
      OS: macOS 10.14.5
      CPU: (4) x64 Intel(R) Core(TM) i5-6360U CPU @ 2.00GHz
      Memory: 411.11 MB / 8.00 GB
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 10.6.0 - /usr/local/bin/node
      Yarn: 1.15.2 - ~/.yarn/bin/yarn
      npm: 6.9.0 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
      Android SDK:
        API Levels: 16, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28
        Build Tools: 21.1.2, 22.0.1, 23.0.1, 23.0.2, 23.0.3, 24.0.3, 25.0.0, 25.0.1, 25.0.2, 25.0.3, 26.0.0, 26.0.1, 26.0.2, 26.0.3, 27.0.0, 27.0.1, 27.0.2, 27.0.3, 28.0.0, 28.0.0, 28.0.2, 28.0.3
        System Images: android-19 | Google APIs Intel x86 Atom, android-27 | Google Play Intel x86 Atom
    IDEs:
      Android Studio: 3.4 AI-183.6156.11.34.5522156
      Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.8.3 => 16.8.3 
      react-native: 0.59.9 => 0.59.9 
    npmGlobalPackages:
      create-react-native-app: 1.0.0
      react-native-cli: 2.0.1
      react-native-git-upgrade: 0.2.7
      solidarity-react-native: 1.0.0
ketanvault commented 5 years ago

Me too have the same issue. Please provide solution for this.

dariakoko commented 4 years ago

Same issue on emulator, on the real device it works well

aminshariatmadar commented 4 years ago

same issue on the sumsung a7. and in the a3 it works correctly.

dariakoko commented 4 years ago

As I noticed it depends on Android version.

MehmetKaplan commented 4 years ago

Any updates on this so far?

mtiziano commented 4 years ago

Same issue on emulator

mtiziano commented 4 years ago

resolved my problem, i was interpolating transform rotation with Animated.Value()

style={{ transform: [ {rotate: angle.interpolate( ...

animated.value was correctly initialized with a number Animated.Value(0)

but then for mistake it was updating with a string in componentDidMount angle.setValue('off')