React-native-navigation: Dismiss Modal animationType 'fade' not supported/doesn't work

[EricYuen]

Dismiss Modal animationType 'fade' not supported/doesn't work

I use showModal() with a fade animation to display a message and so it should correspondingly fade out when dismissModal()

Although I don't see 'fade' being in specifically documented as supported for showModal(), this works properly.

Steps to Reproduce / Code Snippets / Screenshots

I show a modal using the following in one screen.

this.props.navigator.showModal({
    screen: Screens.SCREEN_PAYWALL,
    animationType: 'fade'
});

Then in that screen I have a close button that calls the following

this.props.navigator.dismissModal({
    animationType: `fade`
});

However, no matter what I do, it always dismisses using a slide-down animation. It uses the same slide-down animation if I use the back key on Android.

Update: If I use push and pop instead, the fade in/out animations work.

---

Environment

• React Native Navigation version: 1.1.126
• React Native version: 0.45.1
• Platform(s) (iOS, Android, or both?): Android
• Device info (Simulator/Device? OS version? Debug/Release?): Simulator Galaxy Nexus 5.1.1 API 22

[guyca]

IIRC the slide down animation is hard coded for modals.

[andrerfneves]

@guyca this is from the docs:

this.props.navigator.dismissModal({
  animationType: 'slide-down' // 'none' / 'slide-down' , dismiss animation for the modal (optional, default 'slide-down')
});

Setting it to none doesn't work either. Animation still occurs. Wasn't aware fade was a possible type though. How hard would it be to implement it.

[guyca]

@andrerfneves Shouldn't be hard. It's a matter of setting the correct dismiss animation

[EricYuen]

Thanks for the info. Do you have any idea when a fix might be released?

On Jul 18, 2017 1:42 AM, "Guy Carmeli" [e-mail] wrote:

@andrerfneves https://github.com/andrerfneves Shouldn't be hard. It's a
matter of setting the correct dismiss animation

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/wix/react-native-navigation/issues/1511#issuecomment-315963643,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AEErskl-Mh1NGEBqA5F9IbCGoVZnjplpks5sPEXCgaJpZM4OZQjg
.

[guyca]

@EricYuen Can't commit on an eta, I suggest someone from the community pick this up. Here's where the animation is set.

[EricYuen]

I'm not sure I know what I'm looking at, but thanks. I understand you can't
commit to an estimate, I guess what I'm actually asking is just wanted to
know what your general release schedule is.

On Jul 18, 2017 1:58 AM, "Guy Carmeli" [e-mail] wrote:

@EricYuen https://github.com/ericyuen Can't commit on an eta, I suggest
someone from the community pick this up. Here's
https://github.com/wix/react-native-navigation/blob/master/android/app/src/main/java/com/reactnativenavigation/controllers/Modal.java#L132
where the animation is set.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/wix/react-native-navigation/issues/1511#issuecomment-315965929,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AEErsrdD_Tu8TRkNzuo3nvjB7rZGwvz9ks5sPEmTgaJpZM4OZQjg
.

[andrerfneves]

@guyca are there animation definitions for fade/none already implemented elsewhere that I could reuse/look at? Sort of really need a fade on Modal for my Android application. I'll probably submit a PR for this if you can point me to the right direction. Cheers!

[srameshr]

Is it available in the repo?

[Sky891028]

Is it available in the repo?

[EricYuen]

This appears to be fixed in v1.1.228.

[mstrcnvs]

Still cannot use the fade to showModal or dismissModal on iOS. Am i missing something?

package.json:

  "dependencies": {
    "@mapbox/polyline": "^0.2.0",
    "debounce-decorator": "^1.0.4",
    "fbemitter": "^2.1.1",
    "lottie-react-native": "^1.2.0",
    "query-string": "5.0.0",
    "react": "16.0.0-alpha.12",
    "react-native": "^0.46.0",
    "react-native-autogrow-textinput": "^4.1.0",
    "react-native-device-info": "^0.11.0",
    "react-native-fbsdk": "^0.6.1",
    "react-native-linear-gradient": "^2.3.0",
    "react-native-loading-spinner-overlay": "^0.5.0",
    "react-native-mapbox-gl": "github:mapbox/react-native-mapbox-gl",
    "react-native-navigation": "1.1.228",
    "react-native-simple-store": "^1.3.0",
    "react-native-svg": "5.3.2",
    "react-native-swiper": "^1.5.4",
    "turf": "^3.0.14",
    "url": "0.11.0",
    "victory-native": "^0.14.0"
  }

screen.js

this.props.navigator.dismissModal({
    animationType: 'fade',
});

[EricYuen]

I should have been more specific, it was only tested on Android Simulator
(as was it originally). Here is what I've been using.

    "react": "16.0.0-alpha.12",

"react-native": "0.48.3",
"react-native-navigation": "^1.1.228",

On Oct 3, 2017 3:39 PM, "Rafael Canovas" [e-mail] wrote:

Still cannot use the fade to showModal or dismissModal on iOS. Am i
missing something?

package.json:

"dependencies": {
"@mapbox/polyline": "^0.2.0",
"debounce-decorator": "^1.0.4",
"fbemitter": "^2.1.1",
"lottie-react-native": "^1.2.0",
"query-string": "5.0.0",
"react": "16.0.0-alpha.12",
"react-native": "^0.46.0",
"react-native-autogrow-textinput": "^4.1.0",
"react-native-device-info": "^0.11.0",
"react-native-fbsdk": "^0.6.1",
"react-native-linear-gradient": "^2.3.0",
"react-native-loading-spinner-overlay": "^0.5.0",
"react-native-mapbox-gl": "github:mapbox/react-native-mapbox-gl",
"react-native-navigation": "1.1.228",
"react-native-simple-store": "^1.3.0",
"react-native-svg": "5.3.2",
"react-native-swiper": "^1.5.4",
"turf": "^3.0.14",
"url": "0.11.0",
"victory-native": "^0.14.0"
}

screen.js

this.props.navigator.dismissModal({
animationType: 'fade',
});

—
You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub
https://github.com/wix/react-native-navigation/issues/1511#issuecomment-333954750,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AEErskNw5z491ULIl-Tiu1U4MKriNE-rks5soo1mgaJpZM4OZQjg
.

[mstrcnvs]

So I think we should open this issue until it's working on both platforms, shouldn't we? Otherwise this is misleading information.

[EricYuen]

@mstrcnvs Fair point. Reopening issue. I won't be able to validate this issue on iOS myself for a good while though, sorry.

[mmiani]

still an issue in v1.1.338

[Annihil]

Issue still there on iOS, fade fallback to slide vertical animation :/