FEATURE: Apple music style modals (DeckTransition)

[Jyrno42]

Adds support for Apple music style modal animations via DeckTransition library. On IOS it also supports swipe-to-dismiss gestures. This is not fully done yet, but I opened the PR early to gather community and maintainer feedback.

Usage:

Navigation.showModal({
    component: {
        name: 'my.component.name',
        options: {
            modalPresentationStyle: Platform.OS === 'android' ? 'overCurrentContext' : undefined, // Needed for android

            animations: {
                showModal: {
                    enableDeck: true, // Default: false
                    deckPresentDuration: 0.3, // in seconds, Default: 0.3
                    deckDismissDuration: 0.3, // in seconds, Default: 0.3
                    enableDeckSwipeToDismiss: true // Default: true **Warning: IOS ONLY**
                },
                dismissModal: {
                    enable: true,
                    enableDeck: true, // Default: false
                    deckPresentDuration: 0.3, // in seconds, Default: 0.3
                    deckDismissDuration: 0.3, // in seconds, Default: 0.3
                }
            }
        }
    }
});

Note: On Android the effect looks nicer if you add a dark background color to your root view.

Usage via cocoapods:

Add the following lines to your Podfile

    pod 'ReactNativeNavigation', :path => '../node_modules/react-native-navigation'
    pod 'DeckTransition', :path => '../node_modules/react-native-navigation/lib/ios/DeckTransition'

    # see https://github.com/CocoaPods/CocoaPods/issues/7585#issuecomment-439590366
    post_install do |installer|
        installer.pods_project.targets.each do |target|
            compatibilityPhase = target.build_phases.find { |ph| ph.display_name == 'Copy generated compatibility header' }
            if compatibilityPhase
                build_phase = target.new_shell_script_build_phase('Copy Swift Header')
                build_phase.shell_script = <<-SH.strip_heredoc
                    COMPATIBILITY_HEADER_PATH="${BUILT_PRODUCTS_DIR}/Swift Compatibility Header/${PRODUCT_MODULE_NAME}-Swift.h"
                    ditto "${COMPATIBILITY_HEADER_PATH}" "${PODS_ROOT}/Headers/Public/${PRODUCT_MODULE_NAME}/${PRODUCT_MODULE_NAME}-Swift.h"
                SH
            end
        end
    end

Demo

Repository: https://github.com/Jyrno42/RNNDeckTransitionDemo

---

related to #4743

[Ryabchikus]

Hello. I try to start demo - it's hang on splashscreen about ~10 seconds and then crashed without any errors

[Jyrno42]

Ok, I now got the tests to pass as well. Also updated the Demo repository to the latest version and generated new example gifs. Detox rocks!

@Ryabchikus Can you try again with the updated Demo repository? If it still does not work, please file an issue to the Demo repository with more details.

[Ryabchikus]

@Jyrno42
updated demo works, thanks!

[Jyrno42]

Patch file for those who want to use this. Can be used with patch-package.

https://gist.github.com/Jyrno42/de6cbc417d3f829a49b20db3775409cc

[guyca]

Hey @Jyrno42
Sorry I didn't reply sooner. This looks great! But I feel it adds a lot of complexity to the library in order to support a very specific use case.
What I think will be very nice, is to improve RNN so it's extensible and and have this amazing deck transition in a dedicated library. If you'd like to make the necessary changes to RNN, let me know.
It might be a lot of work, but I think we'll all benefit from it.

Once again, sorry for the late reply and thanks a lot for the PR 💪

[Jyrno42]

If you have any tips on where to start when making this library extensible or if you know about any existing projects that I could take a look at I would love to hear it.

[Jyrno42]

Hey @guyca if you find the time I would love some guidance on this:

If you have any tips on where to start when making this library extensible or if you know about any existing projects that I could take a look at I would love to hear it.

[MakhouT]

@guyca Bump.
Worth to give hime some guidance. RNN needs more people and he's willing to help :)

[kdawgwilk]

This now supported by default in iOS 13 SDK with the automatic presentation style