React-native-tab-view: react native tab view fails when 1 route on android 9

Created on 15 Mar 2019  路  39Comments  路  Source: satya164/react-native-tab-view


Current behaviour

We are not able to create a tab view with one route on Android 9 and react native 0.59
It works fine if we have 2 routes.

Expected behaviour

React native tab view should work for 1 and above routes.

Error while updating property 'transform' of a view managed by: RCTView

null

Cannot set 'scaleX' to Float.NaN
updateViewProp
ViewManagersPropertyCache.java:95
setProperty
ViewManagerPropertyUpdater.java:132
updateProps
ViewManagerPropertyUpdater.java:51
updateProperties
ViewManager.java:37
updateProperties
NativeViewHierarchyManager.java:136
synchronouslyUpdateViewOnUIThread
UIImplementation.java:338
evaluate
PropsNode.java:104
evaluate
PropsNode.java:19
value
Node.java:41
update
PropsNode.java:132
runUpdates
Node.java:122
onAnimationFrame
NodesManager.java:157
access$000
NodesManager.java:52
doFrameGuarded
NodesManager.java:105
doFrame
GuardedFrameCallback.java:29
doFrame
ReactChoreographer.java:166
doFrame
ChoreographerCompat.java:84
run
Choreographer.java:947
doCallbacks
Choreographer.java:761
doFrame
Choreographer.java:693
run
Choreographer.java:935
handleCallback
Handler.java:873
dispatchMessage
Handler.java:99
loop
Looper.java:193
main
ActivityThread.java:6669
invoke
Method.java
run
RuntimeInit.java:493
main
ZygoteInit.java:858

Code sample

https://snack.expo.io/@mithunmo/one-route-

Screenshots (if applicable)

What have you tried

The same code works in Android 8 but not in 9 .

Your Environment

| software | version
| ---------------------------- | -------
| android | 9
| react-native | 0.59
| react-native-tab-view | 2.0.3
| react-native-gesture-handler | 1.1.0
| react-native-reanimated | 1.0.0-alpha.12
| node | 10.0.0
| yarn | 1.12.3
Screenshot_1552641384

picture mithunmo
👍13

Most helpful comment

am Facing same issue here on android 9

picture FadiAboMsalam on 9 Jul 2019
👍4

All 39 comments

Can you post your code please?

satya164 picture satya164 on 15 Mar 2019

I picked the code up from the previous issue raised ( flickering )
https://snack.expo.io/@mithunmo/one-route- but the issue is seen only on android 9 .
My code is bit more complicated with api calls.

mithunmo picture mithunmo on 15 Mar 2019

Hello,
Any one get a chance to look at the issue?

mithunmo picture mithunmo on 21 Mar 2019
👍1

:C

PauZoffoli picture PauZoffoli on 5 Apr 2019

this is happening to me as well

sibelius picture sibelius on 15 Apr 2019

Pull request welcome if someone wants to fix it

satya164 picture satya164 on 15 Apr 2019
👍1

I think the bug is here

https://github.com/react-native-community/react-native-tab-view/blob/839beb49557bdd4922814254598a7c51a1ad3b32/src/Pager.js#L499

we are dividing by zero

sibelius picture sibelius on 15 Apr 2019

It's in a conditional. If this._layoutWidth is 0, this won't be called, at least it shouldn't be.

satya164 picture satya164 on 15 Apr 2019

should we have eq() https://github.com/kmagiera/react-native-reanimated#blocks?

sibelius picture sibelius on 15 Apr 2019

0 is falsy, doesn't need eq

satya164 picture satya164 on 16 Apr 2019

Happening to me too

vnnoder picture vnnoder on 22 Apr 2019
👍1

I just tried running the snack provided, but it works on my device.

satya164 picture satya164 on 23 Apr 2019

it is a specific issues for some devices

Samsumg Galaxy S8
Xiaomi POCO F1
Android 9

Fatal Exception: 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:338)
       at com.swmansion.reanimated.nodes.PropsNode.evaluate(PropsNode.java:104)
       at com.swmansion.reanimated.nodes.PropsNode.evaluate(PropsNode.java:19)
       at com.swmansion.reanimated.nodes.Node.value(Node.java:41)
       at com.swmansion.reanimated.nodes.PropsNode.update(PropsNode.java:132)
       at com.swmansion.reanimated.nodes.Node.runUpdates(Node.java:122)
       at com.swmansion.reanimated.NodesManager.onAnimationFrame(NodesManager.java:157)
       at com.swmansion.reanimated.NodesManager.access$000(NodesManager.java:52)
       at com.swmansion.reanimated.NodesManager$1.doFrameGuarded(NodesManager.java:105)
       at com.facebook.react.uimanager.GuardedFrameCallback.doFrame(GuardedFrameCallback.java:29)
       at com.facebook.react.modules.core.ReactChoreographer$ReactChoreographerDispatcher.doFrame(ReactChoreographer.java:166)
       at com.facebook.react.modules.core.ChoreographerCompat$FrameCallback$1.doFrame(ChoreographerCompat.java:84)
       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:7045)
       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:964)

Caused by java.lang.IllegalArgumentException: Cannot set 'scaleX' to Float.NaN
       at android.view.View.sanitizeFloatPropertyValue(View.java:17000)
       at android.view.View.sanitizeFloatPropertyValue(View.java:16974)
       at android.view.View.setScaleX(View.java:16363)
       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:338)
       at com.swmansion.reanimated.nodes.PropsNode.evaluate(PropsNode.java:104)
       at com.swmansion.reanimated.nodes.PropsNode.evaluate(PropsNode.java:19)
       at com.swmansion.reanimated.nodes.Node.value(Node.java:41)
       at com.swmansion.reanimated.nodes.PropsNode.update(PropsNode.java:132)
       at com.swmansion.reanimated.nodes.Node.runUpdates(Node.java:122)
       at com.swmansion.reanimated.NodesManager.onAnimationFrame(NodesManager.java:157)
       at com.swmansion.reanimated.NodesManager.access$000(NodesManager.java:52)
       at com.swmansion.reanimated.NodesManager$1.doFrameGuarded(NodesManager.java:105)
       at com.facebook.react.uimanager.GuardedFrameCallback.doFrame(GuardedFrameCallback.java:29)
       at com.facebook.react.modules.core.ReactChoreographer$ReactChoreographerDispatcher.doFrame(ReactChoreographer.java:166)
       at com.facebook.react.modules.core.ChoreographerCompat$FrameCallback$1.doFrame(ChoreographerCompat.java:84)
       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:7045)
       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:964)

this log is from Firebase Crashlytics

sibelius picture sibelius on 23 Apr 2019
👍3

Hmm, I have Android 9, but don't have access to those devices. It'll be great if someone who has access can debug this.

cc @osdnk have you seen such issue before?

satya164 picture satya164 on 23 Apr 2019

Never. I'm going to take a look

osdnk picture osdnk on 23 Apr 2019
👍2

I checked this snack on my OnePlus 6 with 9.0 (OxygenOS 9.0.3) and it works

osdnk picture osdnk on 23 Apr 2019

it is only on these specific devices, we have other android 9 that works fine

sibelius picture sibelius on 23 Apr 2019
👍2

We may add some check cond(defined(x... for handling this case

osdnk picture osdnk on 23 Apr 2019
👍1

@osdnk where? can you send a PR? 馃檹

satya164 picture satya164 on 23 Apr 2019

Do we use scaleX somewhere?

osdnk picture osdnk on 23 Apr 2019

@osdnk hmm I don't think we do.

satya164 picture satya164 on 23 Apr 2019

It makes it more difficult than I predicted 馃

osdnk picture osdnk on 23 Apr 2019

I vaguely remember @Esemesek having this error somewhere. Do you remember where it was @Esemesek ?

satya164 picture satya164 on 23 Apr 2019

on my device (OnePlus 6 with 9.0 (OxygenOS 9.0.5)) does not work with 1 route

after a short debug i think the problem is in the TabBarIndicator.js

not working code

const translateX = Animated.multiply( Animated.multiply( Animated.interpolate(position, { inputRange: [0, routes.length - 1], outputRange: [0, routes.length - 1], extrapolate: 'clamp', }), width ), I18nManager.isRTL ? -1 : 1 );

working code

const translateX = Animated.multiply( Animated.multiply( Animated.interpolate(position, { inputRange: [0, routes.length], outputRange: [0, routes.length], extrapolate: 'clamp', }), width ), I18nManager.isRTL ? -1 : 1 );

Maybe this is the problem?

akemys picture akemys on 30 Apr 2019
👍1

@akemys does this works well for more than 1 tab for you?

sibelius picture sibelius on 2 May 2019

@sibelius yes, its works for me with 1,2,3,4 tab

BUT

I don't know if this is the right solution

akemys picture akemys on 3 May 2019
👍1

it is a specific issues for some devices

Samsumg Galaxy S8
Xiaomi POCO F1
Android 9

Fatal Exception: 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:338)
       at com.swmansion.reanimated.nodes.PropsNode.evaluate(PropsNode.java:104)
       at com.swmansion.reanimated.nodes.PropsNode.evaluate(PropsNode.java:19)
       at com.swmansion.reanimated.nodes.Node.value(Node.java:41)
       at com.swmansion.reanimated.nodes.PropsNode.update(PropsNode.java:132)
       at com.swmansion.reanimated.nodes.Node.runUpdates(Node.java:122)
       at com.swmansion.reanimated.NodesManager.onAnimationFrame(NodesManager.java:157)
       at com.swmansion.reanimated.NodesManager.access$000(NodesManager.java:52)
       at com.swmansion.reanimated.NodesManager$1.doFrameGuarded(NodesManager.java:105)
       at com.facebook.react.uimanager.GuardedFrameCallback.doFrame(GuardedFrameCallback.java:29)
       at com.facebook.react.modules.core.ReactChoreographer$ReactChoreographerDispatcher.doFrame(ReactChoreographer.java:166)
       at com.facebook.react.modules.core.ChoreographerCompat$FrameCallback$1.doFrame(ChoreographerCompat.java:84)
       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:7045)
       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:964)

Caused by java.lang.IllegalArgumentException: Cannot set 'scaleX' to Float.NaN
       at android.view.View.sanitizeFloatPropertyValue(View.java:17000)
       at android.view.View.sanitizeFloatPropertyValue(View.java:16974)
       at android.view.View.setScaleX(View.java:16363)
       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:338)
       at com.swmansion.reanimated.nodes.PropsNode.evaluate(PropsNode.java:104)
       at com.swmansion.reanimated.nodes.PropsNode.evaluate(PropsNode.java:19)
       at com.swmansion.reanimated.nodes.Node.value(Node.java:41)
       at com.swmansion.reanimated.nodes.PropsNode.update(PropsNode.java:132)
       at com.swmansion.reanimated.nodes.Node.runUpdates(Node.java:122)
       at com.swmansion.reanimated.NodesManager.onAnimationFrame(NodesManager.java:157)
       at com.swmansion.reanimated.NodesManager.access$000(NodesManager.java:52)
       at com.swmansion.reanimated.NodesManager$1.doFrameGuarded(NodesManager.java:105)
       at com.facebook.react.uimanager.GuardedFrameCallback.doFrame(GuardedFrameCallback.java:29)
       at com.facebook.react.modules.core.ReactChoreographer$ReactChoreographerDispatcher.doFrame(ReactChoreographer.java:166)
       at com.facebook.react.modules.core.ChoreographerCompat$FrameCallback$1.doFrame(ChoreographerCompat.java:84)
       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:7045)
       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:964)

this log is from Firebase Crashlytics

He is right I am facing the same issue in pocoF1 running on android 9. When I compiled with android Oreo and build the app, it was working fine but when I changed compile SDK to 28 (pie) , it stopped working

FirdousNath picture FirdousNath on 14 May 2019

Due to this issue, I am facing lots of crash reports, Please fix it to the earliest

FirdousNath picture FirdousNath on 14 May 2019

@FirdousNath it's an open source project, feel free to send pull request fixing the bug

satya164 picture satya164 on 14 May 2019

@akemys @sibelius can you try the latest release? TabBarIndicator doesn't use an interpolation anymore. I've also removed interpolation from other places when there's only one tab.

satya164 picture satya164 on 14 May 2019

I'm gonna do a new production release with the new version, and I'll check for any bugs

I do not have the android with problems anymore

sibelius picture sibelius on 16 May 2019

Closing since this should be fixed. If you're still facing the issue, let me know.

satya164 picture satya164 on 19 May 2019

Hey guys,

this crash seems to be something RN should guard against. Quite a few other packages out there also crash under the same circumstances. My team have been unable to get hands on a crashing device. If anyone here could, would you be able to answer a few of the following questions:

Exactly what is the cause of the crash? Is it having the following input array?:

[0, 0, X]

or is it the mapping the input array above to the output array of 

[0, 0, X]

Does any of the following setups crash?:

input: [0, 0]
output: [0, 0]

_This setup above is what I assume happened here._

input: [0, 1]
output: [0, 0]

input: [1, 0]
output: [0, 0]



md5-d4903a7c046fe0fb7833539171c96d12



input: [0, 0, 1]
output: [0, 0, 1]



md5-d4903a7c046fe0fb7833539171c96d12



input: [1, 1, 0]
output: [1, 1, 0]

Any other patterns you've found?

kristfal picture kristfal on 11 Jun 2019

I reproduce the crash when I have:

input: [0, 0, 1]
output: [0,0,0]

It does not crash when I change this to:

input: [0, 0.01, 1]
output: [0,0,0]
thibautguedou3 picture thibautguedou3 on 12 Jun 2019

am Facing same issue here on android 9

FadiAboMsalam picture FadiAboMsalam on 9 Jul 2019
👍4

Using this fixed my issue:

input: [0, 0.01]
output: [0,-0.01]

i use to initalize like this:
input: [0, 0]
output: [0,-0]

but i'm using an older version of the module

DISKONEKTeD picture DISKONEKTeD on 13 Jul 2019

Same here...
Crashing with [-999, 0,0, 999]

kesha-antonov picture kesha-antonov on 15 Jul 2019

Any updates on this??

tarun29061990 picture tarun29061990 on 22 Jul 2019

@tarun29061990 the library doesn't have any interpolations which has same numbers repeated twice in inputRange as of latest versions. you need to check your own code to find the issue.

satya164 picture satya164 on 22 Jul 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

moerabaya picture moerabaya  路  4Comments
ahmedrowaihi picture ahmedrowaihi  路  3Comments
jouderianjr picture jouderianjr  路  3Comments
ios-dev-newbie picture ios-dev-newbie  路  3Comments
compojoom picture compojoom  路  4Comments