React-native-interactable: [Android] Error while updating property 'transform' of a view managed by: RCTView. Cannot set 'scaleX' to Float.NaN

Created on 18 Jun 2019  路  7Comments  路  Source: wix/react-native-interactable

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
picture addingama
👍11

Most helpful comment

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

picture ketanvault on 6 Sep 2019
👍4

All 7 comments

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

ketanvault picture ketanvault on 6 Sep 2019
👍4

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

Nargle30 picture Nargle30 on 22 Nov 2019

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

aminshariatmadar picture aminshariatmadar on 28 Nov 2019

As I noticed it depends on Android version.

Nargle30 picture Nargle30 on 29 Nov 2019

Any updates on this so far?

MehmetKaplan picture MehmetKaplan on 6 Dec 2019

Same issue on emulator

mtiziano picture mtiziano on 25 Mar 2020

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

mtiziano picture mtiziano on 25 Mar 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

sewerrat picture sewerrat  路  7Comments
dmitryusikriseapps picture dmitryusikriseapps  路  3Comments
jp928 picture jp928  路  4Comments
tikkichan4 picture tikkichan4  路  5Comments
portons picture portons  路  7Comments