feat: add slide animations on Android #648

jiong-shen-cb · 2020-09-22T21:41:52Z

No description provided.

jiong-shen-cb · 2020-09-23T17:33:16Z

android/src/main/java/com/swmansion/rnscreens/ScreenStack.java

+      }
+    }
+
+    // remove all screens previously on stack


This portion is moved from the top because the animations need to be set first before any screens are added/removed

hirbod · 2020-09-23T18:18:30Z

Awesome.

Jalson1982 · 2020-09-24T07:04:44Z

Hope this will be in master soon. Great job @jiong-shen-cb

hirbod · 2020-09-29T10:28:54Z

What do you think about this approach @WoLewicki
It is the XML way but looks nice and clean.

WoLewicki · 2020-09-29T11:45:53Z

If only it works, I think using XMLs will be a good option 🎉.
I think we should prefix them somehow, like rns_close_slide_in to avoid any name clashes. Will test this PR in free time and please do so too, especially with nested navigators and popToTop options etc. so we can spot the problems quickly if there are any

jiong-shen-cb · 2020-10-02T17:08:20Z

I will update the xml names, btw since I only added support for android (not an ios developer), if necessary I could use some help extend it for ios

itsjgf · 2020-10-12T09:39:59Z

I have opened a PR on top of this one that adds support for stackAnimation: 'slide' on iOS & tweaks the modal animation on Android -> #662

WoLewicki · 2020-10-19T14:26:52Z

I think it would also be nice to have the option for rtl transition, from what I tested, only thing needed for the new transition is to swap close with open transition specs. Maybe it would be better to change the naming of these specs to something like rns_slide_in_from_right, rns_slide_out_from_right, rns_slide_in_from_left, rns_slide_out_from_left. It would require adding another animation option, probably SLIDE_RTL would be the best name. Can you do it @jiong-shen-cb?

jiong-shen-cb · 2020-10-19T14:34:50Z

sure I can add it this week,

jiong-shen-cb · 2020-10-22T04:16:37Z

@WoLewicki I added slide_rtl, please check
@itsjgf please merge my changes into your branch and add slide_rtl in iOS if you could. Thanks!

WoLewicki · 2020-10-22T09:43:19Z

@jiong-shen-cb could you also add the information about the new animation in:

I think you will need to rebase to the newest master in order to do it, because I recently made changes to the ordering of the props.

jiong-shen-cb · 2020-10-22T15:56:56Z

@WoLewicki Added and rebased to master, please check if they are good enough.

WoLewicki · 2020-10-26T12:39:16Z

Looks perfect! The last (hopefully) change that is required is to add new animation options to iOS in order for it to be able to work correctly with those changes. Please change the method in https://github.com/software-mansion/react-native-screens/blob/master/ios/RNSScreen.m#L502 to:

RCT_ENUM_CONVERTER(RNSScreenStackAnimation, (@{
                                                  @"default": @(RNSScreenStackAnimationDefault),
                                                  @"none": @(RNSScreenStackAnimationNone),
                                                  @"fade": @(RNSScreenStackAnimationFade),
                                                  @"flip": @(RNSScreenStackAnimationFlip),
                                                  @"slide": @(RNSScreenStackAnimationDefault),
                                                  @"slide_rtl": @(RNSScreenStackAnimationDefault),
                                                  }), RNSScreenStackAnimationDefault, integerValue)

It will just add resolving the new options to the default animation.

jiong-shen-cb · 2020-10-26T18:28:36Z

Thanks, updated

WoLewicki · 2020-10-27T10:27:03Z

After consultations with @kmagiera, we decided that it would be very good to have some clips/gifs in this thread that show the transitions, especially going forward and back with using:

header back button
normal goBack() with e.g. a button
hw back button (the one at the bottom of the phone's screen)

It looks like now the 3. option is giving different results in animation due to using Android Fragment's back stack.

Another thing is the name of the transitions. slide_rtl can be thought of as something that changes the direction of the content, while in this case it is not directly connected to it and can be used with ltr and rtl. So maybe it would be good to change the names to e.g. slide_from_right and slide_from_left, or something even more adequate. What do you think?

jiong-shen-cb · 2020-10-28T18:18:38Z

Yes I see the issue and will look into that this week.

jiong-shen-cb · 2020-11-15T00:22:25Z

@WoLewicki Sorry I got delayed from other stuff last week. I think name changes are good (since rtl was actually slide from left). After comparing the build from master and this branch, I see same behavior on the hw back button from the Example app. Could you provide some clips to show the difference?

WoLewicki · 2020-11-18T10:49:28Z

I tested it again and I cannot reproduce it now, and I am not sure why. Could you update the PR according to the instructions? I also added a TestsExample project: https://github.com/software-mansion/react-native-screens/tree/master/TestsExample, (after rebasing to newest master you should be able to use it) could you add a Test648 file in there which shows the application of the PR? Some basic and maybe nested stack that shows that it works how it should and compiles on both platforms. It will be easier for everyone to test it then.

jiong-shen-cb · 2020-11-19T18:20:39Z

Great, will look at those tomorrow.

update slide prop name

jiong-shen-cb · 2020-11-20T02:47:09Z

Updated, please check.

WoLewicki · 2020-11-23T13:59:16Z

Thanks for your contribution! It looks like it is ready to be merged 🎉

jiong-shen-cb · 2020-11-23T19:40:28Z

Thank you! Is there a potential release date for the changes?

WoLewicki · 2020-11-24T08:45:44Z

It depends on some factors, but next week most probably.

hadnet · 2020-12-02T06:05:12Z

I've been waiting for this for a long time. Just to be sure cause I'm not up to date with this guys but this will add the possibility to use slide animations (like iOS) on Android, right? When this release will be available?

WoLewicki · 2020-12-02T11:01:46Z

Yes, this PR adds slide animations on transitions on Android. This should be released alongside with #662, and @itsjgf is still working on it, but you can always apply these changes and test them by using patch-package.

hadnet · 2021-02-02T23:30:53Z

Ok, guys, I tried everything and this slide animation is not working on Android. I installed version 2.16.0/1 2.17.X and no slide animation. These are the packages I'm using along with Expo SDK40. I tested using Android 11 and tested on an older Android 6.x but does not work either. The other options like flip, fade working good. Can anyone help me understand what is wrong here?

    "@react-navigation/bottom-tabs": "^5.11.7",
    "@react-navigation/native": "^5.9.2",
    "@react-navigation/stack": "^5.14.2",
    "react-native-gesture-handler": "^1.9.0",
    "react-native-reanimated": "~1.13.0",
    "react-native-screens": "2.16.1",

WoLewicki · 2021-02-03T10:18:18Z

If you use Expo managed workflow, the native code is included in the client and cannot be changed. react-native-screens package version in SDK 40 is 2.15.0, so this commit is not available there yet, which means you cannot use it unfortunately.

fat mentioned this pull request Sep 23, 2020

Android animation slide from right #489

Closed

jiong-shen-cb commented Sep 23, 2020

View reviewed changes

hirbod mentioned this pull request Sep 29, 2020

how to achieve slide from bottom transition in android #651

Closed

itsjgf mentioned this pull request Oct 12, 2020

Add support for "stackAnimation: 'slide'" on iOS & Add a "slide-up" animation for modal screens on Android #662

Closed

jiong-shen-cb added 4 commits October 22, 2020 08:41

Adding slide animation to the list of available transition animations

5dd3a3b

Remove unused variable

eecfaa6

Renaming animation with rns prefix

72eb50e

Adding slide_rtl option and renaming animation files to support it

e08619e

jiong-shen-cb force-pushed the add_slide_anim branch from 61b290c to e08619e Compare October 22, 2020 15:42

Adding documentation for slide and slide_rtl in README and comments

4d72750

Adding default animation for ios when the type is slide and slide_rtl

b12aded

Merge branch 'master' into add_slide_anim

a59b8ee

jiong-shen-cb and others added 7 commits November 19, 2020 16:40

Renaming the slide to slide_from_right and slide_rtl to slide_from_left

96e01bc

Merge branch 'master' into add_slide_anim

58d7baa

Adding Test648.js for stackAnimation example

ec37377

Update README.md

0c6f0d2

Update README.md

badb212

Update RNSScreen.m

a5d451b

update slide prop name

Update README.md

c4bbe7f

WoLewicki changed the title ~~Adding slide animation to the list of available transition animations~~ feat: add slide animations on Android Nov 23, 2020

WoLewicki merged commit 6d110d6 into software-mansion:master Nov 23, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add slide animations on Android #648

feat: add slide animations on Android #648

jiong-shen-cb commented Sep 22, 2020

jiong-shen-cb Sep 23, 2020

hirbod commented Sep 23, 2020

Jalson1982 commented Sep 24, 2020

hirbod commented Sep 29, 2020

WoLewicki commented Sep 29, 2020

jiong-shen-cb commented Oct 2, 2020

itsjgf commented Oct 12, 2020 •

edited

Loading

WoLewicki commented Oct 19, 2020

jiong-shen-cb commented Oct 19, 2020

jiong-shen-cb commented Oct 22, 2020

WoLewicki commented Oct 22, 2020

jiong-shen-cb commented Oct 22, 2020

WoLewicki commented Oct 26, 2020

jiong-shen-cb commented Oct 26, 2020

WoLewicki commented Oct 27, 2020

jiong-shen-cb commented Oct 28, 2020

jiong-shen-cb commented Nov 15, 2020

WoLewicki commented Nov 18, 2020

jiong-shen-cb commented Nov 19, 2020

jiong-shen-cb commented Nov 20, 2020

WoLewicki commented Nov 23, 2020

jiong-shen-cb commented Nov 23, 2020

WoLewicki commented Nov 24, 2020

hadnet commented Dec 2, 2020 •

edited

Loading

WoLewicki commented Dec 2, 2020

hadnet commented Feb 2, 2021

WoLewicki commented Feb 3, 2021

feat: add slide animations on Android #648

feat: add slide animations on Android #648

Conversation

jiong-shen-cb commented Sep 22, 2020

jiong-shen-cb Sep 23, 2020

Choose a reason for hiding this comment

hirbod commented Sep 23, 2020

Jalson1982 commented Sep 24, 2020

hirbod commented Sep 29, 2020

WoLewicki commented Sep 29, 2020

jiong-shen-cb commented Oct 2, 2020

itsjgf commented Oct 12, 2020 • edited Loading

WoLewicki commented Oct 19, 2020

jiong-shen-cb commented Oct 19, 2020

jiong-shen-cb commented Oct 22, 2020

WoLewicki commented Oct 22, 2020

jiong-shen-cb commented Oct 22, 2020

WoLewicki commented Oct 26, 2020

jiong-shen-cb commented Oct 26, 2020

WoLewicki commented Oct 27, 2020

jiong-shen-cb commented Oct 28, 2020

jiong-shen-cb commented Nov 15, 2020

WoLewicki commented Nov 18, 2020

jiong-shen-cb commented Nov 19, 2020

jiong-shen-cb commented Nov 20, 2020

WoLewicki commented Nov 23, 2020

jiong-shen-cb commented Nov 23, 2020

WoLewicki commented Nov 24, 2020

hadnet commented Dec 2, 2020 • edited Loading

WoLewicki commented Dec 2, 2020

hadnet commented Feb 2, 2021

WoLewicki commented Feb 3, 2021

itsjgf commented Oct 12, 2020 •

edited

Loading

hadnet commented Dec 2, 2020 •

edited

Loading