React-native-screens: Android animation slide from right

[Jalson1982]

Hello. This is not a bug or issue it like I want to ask is it possible on android to have slide from the right animation and not this default one. I really like performances with react native stack it is so crazy fast and smooth but if we somehow could have the option on android to change the way how screen will be present ( like on IOS by default ) would be really great! Good work @WoLewicki @kmagiera and others really!

[WoLewicki]

We are not planning to support other types of animations on Android for now. The possible option is to achieve the custom animations with react-native-reanimated and it is probably the direction in which we will go.

[378978764]

This is really an important thing. It seems so strange if stackAnimation differs between IOS and Android. In most applications, we require the same transition animation across different platforms.

[WoLewicki]

We rely on the native animations provided by the platform so they may differ in native-stack for now.

[378978764]

We rely on the native animations provided by the platform so they may differ in native-stack for now.

Is there any solution for custom animations?

[WoLewicki]

You can see how it is implemented in react-navigation with react-native-reanimated and react-native-gesture-handler since it implements the animations from the JS side.

[378978764]

You can see how it is implemented in react-navigation with react-native-reanimated and react-native-gesture-handler since it implements the animations from the JS side.

So currently we connot make android animation slide from right using react-native-screens. Is it right?

[WoLewicki]

Yes since there is no easy implementation of this animation that would work OK on all Android phones.

[hadnet]

Yes since there is no easy implementation of this animation that would work OK on all Android phones.

I noticed when I use Native Stack Navigator the animation on Android is just the old "fade out" animation and when I use Stack Navigator from React Navigation I got this "new" bottom-up kind of Android animation. Why this difference?

[WoLewicki]

Stack Navigator doesn't use native animations. Instead, it implements all the animations in JS so there are no restrictions on what can be done there from the native side. You can see them e.g. there: https://reactnavigation.org/docs/stack-navigator/#pre-made-configs

[dgcoffman]

Is it really impossible to implement a sliding animation? Android's "Navigate between fragments using animations" docs at https://developer.android.com/training/basics/fragments/animate have this animation as an example.

You create an use and AnimationSet here: https://github.com/software-mansion/react-native-screens/blob/master/android/src/main/java/com/swmansion/rnscreens/ScreenStackFragment.java#L56

If might be possible to inject any AnimationSet -- including something like e.g.

<!-- res/anim/slide_in.xml -->
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="@android:integer/config_shortAnimTime"
    android:interpolator="@android:anim/decelerate_interpolator">
    <translate
        android:fromXDelta="100%"
        android:toXDelta="0%" />
</set>

or with https://developer.android.com/reference/androidx/fragment/app/FragmentTransaction#setCustomAnimations(int,%20int)

[WoLewicki]

If you could make a PR with such implementation (it would be best if it was implemented in code, not XML file), then I would love to review it.

[fat]

PR https://github.com/software-mansion/react-native-screens/pull/648

[Jalson1982]

@fat wow this is so good. Hope this will be in master soon!

[WoLewicki]

Closing since #648 has been merged. Feel free to comment here if you have any questions.

[tpisto]

Hi! Please could you give me a hint how to change the animation speed? I have tried to change config_mediumAnimTime without success. Maybe I'm doing something wrong?

[WoLewicki]

I think it should be the way to change it. Maybe you modified the wrong file?

[Slals]

Hey, I also don't know how we can change slide_to_right animation speed. I tried to add a res/animator/slide_in.xml with the following content

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="133"
    android:interpolator="@android:anim/decelerate_interpolator">
    <translate
        android:fromXDelta="100%"
        android:toXDelta="0%" />
</set>

But have no idea how it is expected to work.

Do you have some hints @WoLewicki ? Thanks!

[WoLewicki]

Android gives you 3 values to be used: config_shortAnimTime, config_mediumAnimTime and config_longAnimTime. I changed the values in the xml files and the change was applied resulting in longer/shorter animation time. I also tried to change the duration to an integer and it works well too, e.g.

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="100"
    android:fromXDelta="0%"
    android:toXDelta="100%"/>

If you want to add your own animations, you must include them in ScreenStack.java in order for them to be used for transitions. Can I help you more with this?

[Slals]

Thanks @WoLewicki Does the filename (slide_in.xml in my example) matters? It seems my xml file doesn't affect react-native-screens slide_to_right animations. Tried to use the constants or a integer.

I have to add something in .java to confi the slide_to_right anim?

[WoLewicki]

Those xmls are used here and in the lines below and you need to correctly apply your animations there: https://github.com/software-mansion/react-native-screens/blob/master/android/src/main/java/com/swmansion/rnscreens/ScreenStack.java#L193

[Slals]

Super nice! Thank you very much @WoLewicki!