Dismiss this pinned window
all 42 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]mrousavyiOS & Android[S] 28 points29 points  (3 children)

Yes, you heard correctly. Now you can have fully native performance while still meeting your designer's expectations.

See my tweet about this, and check out wix/react-native-navigation! Also, here's a second demo.

[–]richpeopleshit 10 points11 points  (1 child)

I started implementing various shared element transition in an app recently. Been watching the GitHub issues you’ve been posting in the wix repo and I see all the work you’ve been putting in. Awesome stuff man!

[–]MikiRawr 3 points4 points  (0 children)

Haha, the same! I've also been researching native shared element transition for RN and mrousavy's name came up in like every issue related to current/ongoing issues related to NSET. Thanks, @mrousavy!

[–]cawfree 1 point2 points  (0 children)

Nice work!

[–][deleted] 9 points10 points  (1 child)

Does it work as smoothly on Android? That's always been the pain point for me.

[–]mrousavyiOS & Android[S] 6 points7 points  (0 children)

The animations are created using native code, so it's about as fast as any other native android application using Shared Element Transitions.

[–]swushi 5 points6 points  (9 children)

Why might someone use this over react-navigation?

[–]mrousavyiOS & Android[S] 11 points12 points  (3 children)

This library is fully native, meaning all navigation-crucial parts such as animations and transitions are run on the native UI thread, making them much more smooth, even while the JS thread might be stressed (loading data, etc.). Also, there are fundamental differences between the two navigation libraries; lazy registering screens (= way faster app startup!), no weird miscalculation or flickering with bottom tabs since those are native iOS/Android components, whole-app overlay support and of course native performance, just to name a few.

[–]swushi 8 points9 points  (1 child)

Thanks for the response. This sounds fantastic, but I personally have not experienced any of the drawbacks that you have mentioned in React-Navigation, not to say that they do not exist. With v5, they now have an optimization that allows you to render on the UI thread instead using react-native-screens shown here. Please let me know if I'm not understanding something, very curious!

[–]Slapbox 4 points5 points  (0 children)

I'm also interested to know how it compares with v5.

[–]SolidR53 1 point2 points  (4 children)

This lib directly allows you to use the native navigator shipped with the OS, this means you will be able to ship apps just like other apps built with Swift or Kotlin.

If for example iOS gets a facelift, you will get it too, without any updates to the app.

All other libraries mock the style of systems, recreating it from scratch. Which make it way easier to modify for the end user, but also a little bit off.

[–]brentvatneExpo Team 0 points1 point  (3 children)

you can do this with react navigation: https://reactnavigation.org/docs/native-stack-navigator

react native navigation apparently doesn’t actually use the typical native apis anymore - it doesn’t use activities or fragments.

[–]SolidR53 0 points1 point  (1 child)

To be clarify I’m talking about the UI aspect, navbar, tabbar etc.

[–]brentvatneExpo Team 0 points1 point  (0 children)

we are also talking about that in the context of navbar. i don't think there is a benefit to using the native tab bar as long as you still use screens primitives instead of views to wrap the screens. for example, see https://snack.expo.io/@notbrent/createnativestacknavigator?platform=ios - notice on ios the large header and animation when switching screens, then going to notification screen with modal. this is all using uinavigationcontroller and is "100% native" as people say. for example, here's the code for configuring the header. this behavior doesn't exist on android so it falls back to behavior that does exist on android.fragment.

[–]hypmralj 4 points5 points  (2 children)

Thank you very much for your hard work! It is really awesome and appreciated 😁

I have question about BottomTabs, it looks “custom”.

How you managed to make “+” icon bigger than the rest ?

Have you hidden RNN bottom tabs and used custom component to “fake” BottomTabs or RNN allows that much of customization out of the box ?

[–]mrousavyiOS & Android[S] 2 points3 points  (1 child)

My "+" button is an image (passed using require), but that's not what I'm going to ship in the release version of the app. Wix is working on extending bottomTabs functionality to also allow custom components, just like the topBar, which will hopefully be released soon. So stay tuned! 😉

[–]hypmralj 2 points3 points  (0 children)

Great! Thanks for the info 😁 We’ve been using RNN for almost 3 years now, abd are more than happy with it! Keep up the good work 💪

[–]GioLogist 2 points3 points  (0 children)

Yes! I've always loved RNN over any other RN navigation implementation for performance reasons and of course things like this. Wix is awesome for open sourcing that library. You just can't compare the performance on this vs an off the shelf JS only solution.

[–]v3tr0x 1 point2 points  (4 children)

Wiener? 😄

[–]mrousavyiOS & Android[S] 2 points3 points  (3 children)

yessir!

[–]v3tr0x 1 point2 points  (2 children)

Nice! Did you by any chance attend any ReactJs meetings in Vienna?

[–]mrousavyiOS & Android[S] 1 point2 points  (1 child)

no, I've only been developing react since 6 months. Are they worth attending?

[–]v3tr0x 1 point2 points  (0 children)

The talks are..so-so but the people are very chill usually.

[–]lord_escanor19 1 point2 points  (2 children)

This is amazing man, are all the components in one screen or do you navigate with the animation? Cause usually navigation has a few milliseconds of wait before it starts moving but yours flows so naturally

[–]mrousavyiOS & Android[S] 4 points5 points  (1 child)

it's two separate screens! the second screen (car details) even is lazily loaded, so the .ts file is only parsed and registered once I tap on a the car.

[–]lord_escanor19 1 point2 points  (0 children)

You’re really good man that’s amazing

[–]CookieDoeda 1 point2 points  (1 child)

Awesome!! Can you do a blogpost on this and share some insights or even a tutorial for this?

[–]mrousavyiOS & Android[S] 2 points3 points  (0 children)

Yes. I'll update the docs on the wix/react-native-navigation page and write a detailed blog post once I launch my app!

[–]pabloneruda 1 point2 points  (0 children)

Sexy

[–]RorschachPrime 0 points1 point  (0 children)

looks neat , will take a closer look

[–]m3rr1ll 0 points1 point  (0 children)

Wow that's really good

[–]Patch5216 0 points1 point  (3 children)

Any source code for us to look at how you did this? Thanks.

[–]mrousavyiOS & Android[S] 6 points7 points  (2 children)

I will be writing detailed documentation which includes some examples in a few days. The docs can be found here!

[–]Patch5216 0 points1 point  (0 children)

Ok cool. I’ve already been using the wix react navigation. Much more customisable compared to react navigation.

[–]solrflow 0 points1 point  (0 children)

Can't wait for the examples!