react-native-screen-transitions v2.0.2 is out, heres what's new

bruh no way i forgot to link

Both iOS and Android demo vids were in release mode, but keeping things fully transparent, in dev mode, I do notice on android, the ui drops around ~ 4 - 10 fps, I'd have to deep dive this further. Smooth on iOS tho

Anyways, the biggest motivation for me was to change the api, and finally have something I'm super in love with. This version abandons createConfig, just set your configuration inside the options. This is just an extended NATIVE stack. I wish I knew about this earlier lol

Some native options are renamed to make room for ours. That includes gestureEnabled -> nativeGestureEnabled, nativeGestureResponseDistance & nativeGestureDirection

Also, transitions are not enabled by default, this made more sense to me if you decided you wanted to keep the native animations and whatnot. set enableTransitions to true when a screen needs to be animated, this just sets the necessary options to what's required.

Bounds: Bounds are just measurements of components. it's up to you to decide how you want to animate them, but I've tried making this easier for u. The docs explain the modifiers better, here's a tiny snippet of 2 components being animated simultaneously

StyleId: Previously the interpolator only allowed you to animate contentStyle and overlayStyle. With styleId, you can define any transition aware component with a styleId and define them in the interpolator.

I think thats all for me. please read the docs as im sure I didnt cover everything in this thread. Theres also some known issues so please read that as well before considering using this package.

I shouldn't have released a day before vacation, but if theres any issues I'll try to sort them out asap. Next up -> Improve bounds performance, just improve it overall tbh. Also thank you for 400 stars, did not expect that at all!!!

Fantastic work! Love the demos

thank u brotha 😎

Adding once I get home 🫡

Great work man! We’re using this for our upcoming release at @CharterLabs, will share more once we’re live💪

@CharterLabs woah dude wishing u guys the best!! Let me know how I can improve the DX for you guys!

@CharterLabs Thank you! Only had some trouble with headers but nothing to major, will try the shared bounds tonight and will let you know!

@trpfsu @CharterLabs Did you solve the issue?

@trpfsu @CharterLabs Shared bounds not working on my end. Also native headers are possible but I cant combine them with the new screen transitions, so I don’t use them for now.

first appreciate all your effort. Qq, is there a way to replicate the IOS modal effect on Android, like the modal push the stack ?

via presets currently not, confident its possible tho. You could try looking at the js-stack presets, i believe they have what you’re looking for? Just convert it to rn-screen-transitions

This is awesome

BEAUTIFUL demo. Does it play nicely with Expo Router?

It works well with expo router, right?

you’re the man!🔥

Adorable mate, will give a try, have a tons of ideas🤌🏼

Love the work you've been putting in tons of respect! I'm currently facing an issue where the header of the transitioned screen is not being shown do yk a fix to this?

when screen transitions are enabled (enableTransitions prop in v2), it removes the header, this is the default behavior. But really this is just a helper, it sets presentation:’containedTransparentModal’, animation none, and headershown false.

Looks beautiful. Great job, Ed! Will try it out right away

thanks dude!!!! let me know how i can further improve on them

Hard bookmark, nice work!

Is this shared bounds you talked about?

yes 😎

is it possible rn to share an item from my home screen (tab navigation) with a parent stack navigation screen?

currently not, it relies on mount and the before remove listener for this to work, i could possible reintegrate listeners to add to the tab navigator but we’ll see

Does it work with a video item?

🔥

killer update. this is huge

🥶

Appreciate this so much! Question - is there a way to isolate Stack-level dismiss animations (in my case, vertical and vertical-inverted), from other animations on the screen (I have a bottom sheet that also relies on swipe up and down to open/close)?

this is a conflict of gestures between both packages, i could possibly expose the pan gesture so you can add into gorhom bottom sheets ( assuming gorhom allows external gesture integration? )

Yep, using Gorhom. It would be awesome if you could expose the pan gesture. That way I can track the view-dismissal swipe and separate it from the swipe which opens or closes my bottom sheet encapsulated within the view. Thank you!

Thank you so much for doing what you are doing…this is freaking amazing 😍

amazing, already pushing to prod

Seamless transitions enhance user experience. This update likely improves navigation flow. Worth exploring for smoother app interactions.

Wow, looks really cool! SwiftUI also has some super easy to use view modifiers for this: .matchedTransitionSource(id:in:) .matchedGeometryEffect(id:in:) Used at the right places those transitions improve UI/UX considerably. Keep up the good work!

Goat

Does it support expo-router v6?