how to achieve slide from bottom transition in android

[byteab]

is there any way to achieve slide from bottom transition. I have tried to change the screen to Modal or fullScreen modal. but it's the same transition animation at all cost.

[Abhishek12345679]

@EhsanSarshar you can use this library.

React Native Swipe Gestures

It works most of the times.

[byteab]

@Abhishek12345679 I mean with this library. creating a slide animation is doable with gesture-handler and reanimated. but I mean why the 'modal' screen don't have a slide from bottom animation in android it's almost like the default transition

[hirbod]

@EhsanSarshar there is an open PR introducing slide transitions for android. https://github.com/software-mansion/react-native-screens/pull/648

It's not merged yet but if they decide to add it, it should be an easy XML adjustment to support a slideUp transition (changing X to Y)

[WoLewicki]

You can follow #662 since it implements this animation. You can also check this PR already and see if there are any problems with it @EhsanSarshar.

[WoLewicki]

slide_from_bottom is one of the new transitions added with #848, you can add changes from it to your project in order to test it. Please comment here if something is wrong with it

[byteab]

@WoLewicki Thank you. that's great. but still It's not like the default native slide from bottom transition in Android.

[WoLewicki]

Can you tell which animation exactly do you want to achieve? I believe they depend on the Android version, #848 also added fade_from_bottom, which is Android Nougat default animation iirc.

[byteab]

when the foreground screen is moving up the background screen will also scale down a little bit. like when you slide the screen from right to left in ios the background screen will scale down a little bit

[WoLewicki]

Is such transition available in transitionPresets of stack navigator of react-navigation? If so, could you tell which preset is it so we can update the transition resources?

[byteab]

Yeah it's available. but have some kind of weird transition issue. https://github.com/react-navigation/react-navigation/issues/7775

[WoLewicki]

react-navigation checks the version of your phone and applies transition based on this. We do not do such thing and you have to choose the transition you want by yourself. Can you show a video of the transition you would like to achieve for slide_from_bottom and maybe a xml with it if you are able to and describe precisely how it is different from slide_from_bottom of native-stack? It would really help us improve it.

[Maker-Mark]

With react navigation 6.x you can use animation: 'slide_from_bottom' which works well. I'm using this will a fullScreenModal stack screen.

  options={{
          presentation: 'fullScreenModal',
          animation: 'slide_from_bottom',
          headerShown: false,
        }}