React-native-router-flux: Style property 'left' is not supported by native animated module

[guyb7]

Version

• react-native-router-flux v3.38.0
• react-native v0.43.2

Expected behaviour

The behaviour as shown in the Mini-Tutorial - a navigation between two simple scenes.

Actual behaviour

On Android, the following exception is thrown when calling Actions.pageTwo():

Style property 'left' is not supported by native animated module
validateStyles
    NativeAnimatedHelper.js:141:12
__getNativeConfig
    AnimatedImplementation.js:1553:40
__getNativeTag
    AnimatedImplementation.js:85:54
__makeNative
    AnimatedImplementation.js:158:70
__makeNative
    AnimatedImplementation.js:1539:8
__makeNative
    AnimatedImplementation.js:157:8
__makeNative
    AnimatedImplementation.js:1539:8
__makeNative
    AnimatedImplementation.js:1644:10
__makeNative
    AnimatedImplementation.js:157:8
__makeNative
    AnimatedImplementation.js:1535:4
__makeNative
    AnimatedImplementation.js:157:8
__makeNative
    AnimatedImplementation.js:157:8
__makeNative
    AnimatedImplementation.js:722:4
__startNativeAnimation
    AnimatedImplementation.js:134:4
start
    AnimatedImplementation.js:568:34
animate
    AnimatedImplementation.js:870:6
start
    AnimatedImplementation.js:1983:28
applyDefaultAnimation
    NavigationAnimatedView.js:53:2
componentDidUpdate
    NavigationAnimatedView.js:130:8
measureLifeCyclePerf
    ReactCompositeComponent.js:64:11
<unknown>
    ReactCompositeComponent.js:1043:12
notifyAll
    CallbackQueue.js:75:26
close
    ReactNativeReconcileTransaction.js:36:4
closeAll
    Transaction.js:222:29
perform
    Transaction.js:163:24
perform
    Transaction.js:149:24
perform
    ReactUpdates.js:81:8
flushBatchedUpdates
    ReactUpdates.js:168:24
closeAll
    Transaction.js:222:29
perform
    Transaction.js:163:24
batchedUpdates
    ReactDefaultBatchingStrategy.js:65:33
batchedUpdates
    ReactUpdates.js:96:41
batchedUpdates
    ReactGenericBatching.js:38:29
batchedUpdatesWithControlledComponents
    ReactGenericBatching.js:51:26
_receiveRootNodeIDEvent
    ReactNativeEventEmitter.js:111:40
receiveTouches
    ReactNativeEventEmitter.js:200:8
__callFunction
    MessageQueue.js:244:47
<unknown>
    MessageQueue.js:108:26
guard
    MessageQueue.js:46:4
callFunctionReturnFlushedQueue
    MessageQueue.js:107:10

Navigation works as expected when adding type={ActionConst.REPLACE} to the scenes.

Steps to reproduce

index.js

<Router>
  <Scene key="root">
    <Scene key="pageOne" component={PageOne} title="PageOne" initial={true} />
    <Scene key="pageTwo" component={PageTwo} title="PageTwo" />
  </Scene>
</Router>

PageOne.js

<View>
  <Text onPress={Actions.pageTwo}>This is PageOne!</Text>
</View>

react-native run-android

[vinhhrv]

i have the same issue

[Chatharaju]

+1

[jorgesantana]

+1

[lf-achyutpkl]

i also encounter same issue.

[kumarpatel]

Workaround:
Add this to your package.json

    "react-native-experimental-navigation": "0.26.10",

Problem is with [email protected]
Currently this repo is set to use the latest version of react-native-experimental-navigation which is 0.26.11

[lf-achyutpkl]

Thank you, it worked :)

[jorgesantana]

Thanks @kumarpatel :)

[anton6]

+1 , thanks for workaround

[aryo]

Just adding to what @kumarpatel said... RN experimental navigation version wasn't pinned in RNRF's package.json, so when the new version of experimental navigation was pushed to npmjs (very recently, I assume), all new builds were suddenly having this issue.

[Techdojo]

+1 on the issue for me as well.
Thanks @kumarpatel your solution worked for me as well :)

[pewh]

I get same issue when upgrade RN to 0.45.1, and "react-native-experimental-navigation": "0.26.10", doesn't work anymore. Please help

[shizhenbin]

I get same issue when upgrade RN to 0.45.1, and "react-native-experimental-navigation": "0.26.11", doesn't work anymore. Please help

[pewh]

I already solve my issue. My issue was caused by conflict package. I delete that package & the error is gone. I'm forget what is the package name. Can @shizhenbin post package.json?