React-native-navigation: How to animate topBar on every push in android. Currently is static on every screen push.

Created on 12 Mar 2019  路  6Comments  路  Source: wix/react-native-navigation

I am not able to set transaction for the sticky header for android. The animation only works when show and hide topBar.

animations: {
            setRoot: {
                waitForRender: true,
                alpha: {
                    from: 0,
                    to: 1,
                    duration: 300
                }
            },
            push: {
                topBar: {
                    x: {
                        from: 500,
                        to: 0,
                        duration: 350
                    }
                },
            }
        }

Environment

  • React Native Navigation version: 2.13.1
  • React Native version: 0.58.6
  • Platform: Android
馃彋 stale

Most helpful comment

Not stale!
It is very usefull fiature for consistent transitions between the screens with different topBars
Do you have any desicions of thes problem?

All 6 comments

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest Detox and report back. Thank you for your contributions.

The issue has been closed for inactivity.

Not stale.
I think It is not possible. I'm facing the same problem here. It seems that topbar acts as global thing, like a single instance being shared over all screens and cannot be animated between screen transitions in push commands.
The documentation should be clearer about that.

I'm experiencing the same issue. TopBar is not animating.

The solution was to replace react-native-navigation with react-navigation v4. This allows much greater customization options and provides animations smooth as butter. The documentation is great.

Not stale!
It is very usefull fiature for consistent transitions between the screens with different topBars
Do you have any desicions of thes problem?

Was this page helpful?
0 / 5 - 0 ratings