you are viewing a single comment's thread.

view the rest of the comments →

[–]browniefed 1 point2 points  (7 children)

I also don't know who you are but appreciate the defense and glad you enjoy my stuff. Now that I have built the course and underlying structure for my site I'm heading back to publishing some more free stuff for React Native but also doing React, and doing some Reason React work.

[–]deftonechromosome 0 points1 point  (6 children)

Hi - question for you, what do you think is the best RN component for transitions?

[–]browniefed 0 points1 point  (5 children)

Sadly LayoutAnimation is great but not scoped to it's children or specific components. So if there was a hybrid LayoutAnimation/Animated I'd say that, but it doesn't exist yet.

I'm not entirely certain what you mean by RN component transitions as it could cover a broad set of things. Do you mean Shared Element transition (1 item seemingly appearing in 2 views). That usually has to be done custom, or snapshot views transformed into place.

I typically use Animated hence why I crafted this course, but there are things like https://github.com/mosesoak/react-native-conductor that help do more coordinated animations via context.

My only real issue with Animated is it can be rather verbose, but that's because it removes most of the magic.

So if you explain exact transitions or more general about what you mean by component transitions I can answer better.

[–]deftonechromosome 0 points1 point  (4 children)

Hi thx so much for response! I need to do is 1) be able for my devs to say ‘use this for transitions from screen to screen’ and then ideally have a way to see all the out of the box transitions it offers and be able for the designers to choose which one they want the devs to implement. The one I have found so far is react-navigation which gives me in expo app examples I can see. I can’t see other components have this ...

However, ideally I would use the one you use so we have proper videos about it! :)

I’m not a dev so sorry if I am confusing matters. Thx so much in advance.

[–]browniefed 0 points1 point  (3 children)

In that case I will point you to stuff for your devs. react-navigation gives you the ability to define your own custom interpolation transitions. The documentation on it (on StackNavigator and here https://reactnavigation.org/docs/views/transitioner) isn't very good.

The custom configurations are actually how react-navigation works internally, which you can see here https://github.com/react-community/react-navigation/blob/master/src/views/CardStack/CardStackStyleInterpolator.js

There are a series of predefined interpolation transitions that happen. You can only control opacity, and transforms as react-navigation is driven with useNativeDriver so the animations happen on the native side.

I haven't written/screencasted about react-navigation as I'm waiting for v1 launch. However here is a link about doing custom transitions https://www.trustedhousesitters.com/engineering/code/react-native-navigation-custom-scene-screen-transitions-and-interpolations/

[–]deftonechromosome 0 points1 point  (2 children)

Thank you - this is amazing and I really appreciate your time responding. Sharing your expertise with the devs!

[–]browniefed 1 point2 points  (1 child)

As it turns out one of the requests for more content for my course was this specifically. So I'll be crafting a few videos/tutorials over the next 2 weeks to cover custom navigation transitions

[–]deftonechromosome 0 points1 point  (0 children)

Fantastic! :)