React-native-navigation: [v2] How to custom animation for push

Created on 18 Jan 2019 · 8Comments · Source: wix/react-native-navigation

Issue Description

[v2] How to custom animation for Navigation.push method replace for slide left to right effect only ?

Steps to Reproduce / Code Snippets / Screenshots

[FILL THIS OUT]

Environment

React Native Navigation version: react-native-navigation
React Native version: 0.57.8
Platform(s) (iOS, Android, or both?): ios
Device info (Simulator/Device? OS version? Debug/Release?): All

questiostack overflow

Source

tiennguyen9988

👍4 👀1

Most helpful comment

Same here, push animation customisation doesn't seem to work on iOS.

I've defined custom animations for push, pop, showModal and dismissModal in Navigation.setDefaultOptions() as indicated in the documentations :

Navigation.setDefaultOptions({
    animations: {
        push: {
            content: {
                alpha: {
                    from: 0,
                    to: 1,
                }
            }
        },
        pop: {
            content: {
                alpha: {...}
            }
        },
        showModal: {
            alpha: {...}
        },
        dismissModal: {
            alpha: {...}
        }
    }
})

This worked perfectly on Android, but on iOS it doesn't seem to have any effect, all animations remain system defaults.

Someone knows if I've done something wrong ?

PS : I've tried to move the animation options from Navigation.setDefaultOptions() to Navigation.push(), but it produces the same results

rubeus90 on 31 Jan 2019

👍5

All 8 comments

Same here, push animation customisation doesn't seem to work on iOS.

I've defined custom animations for push, pop, showModal and dismissModal in Navigation.setDefaultOptions() as indicated in the documentations :

Navigation.setDefaultOptions({
    animations: {
        push: {
            content: {
                alpha: {
                    from: 0,
                    to: 1,
                }
            }
        },
        pop: {
            content: {
                alpha: {...}
            }
        },
        showModal: {
            alpha: {...}
        },
        dismissModal: {
            alpha: {...}
        }
    }
})

This worked perfectly on Android, but on iOS it doesn't seem to have any effect, all animations remain system defaults.

Someone knows if I've done something wrong ?

PS : I've tried to move the animation options from Navigation.setDefaultOptions() to Navigation.push(), but it produces the same results

rubeus90 on 31 Jan 2019

👍5

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.

stale[bot] on 2 Mar 2019

This is still an issue on RN v0.58.5 and RNN 2.12.0

PatrickVanOverdijk2 on 5 Mar 2019

stale[bot] on 4 Apr 2019

this still seems to be an issue.

Pushplaybang on 9 Apr 2019

The current documentation is a bit confusing.

Supported only on Android is just mentioned for one of the examples which is for setRoot's animation however none of the commands animation is working for IOS.

Maybe it's better to put this note under the main title (Animation properties).

el-lsan on 9 Apr 2019

We use the issue tracker exclusively for bug reports and feature requests. This issue appears to be a general usage or support question. Instead, please ask a question on Stack Overflow with the react-native-navigation tag.

support[bot] on 2 May 2019

I'm finding that defining custom animations as above will break pushing screens on iOS 10.
In my case the screen goes black. Changing device orientation will get the pushed screen to render again.