Pose? My New Favorite Lib For RN
My experience
I will admit something, I have always been afraid of animations. As a Computer Science major I got comfortable with lists, hash tables, trees and algorithms but once I found my love for mobile development I realized how many more untaught skills were required to create a complete piece of mobile software.
Animate none of the things!
As I look through my past projects, the biggest mistake I made was avoiding transitions and animations. Don’t get me wrong I used built in transitions and animations everywhere I could but never committed to diving into figuring out complex, custom animations. And for what I was doing in the beginning, it didn’t really matter, but as my creativity grew so did the need for movement and custom transitions. So after my switch from Android to React Native I made myself a promise not to make the same mistake again.
Animate all of the things!
React Native did not seem to make things easier with animations, I cheered in joy after implementing a simple component with visibility transition. (a simple fade) And after which I decided to spend my time on developing other skills in RN. And then I found Pose.
Of all the environments, I knew someone must have seen the unnecessary complexity in something as simple as fading components in and out. Now I am sure there are other libraries which help with this but the simplicity of Pose shocked me and quickly transformed my Apps from sudden components appearing to fluid movement and fading of views. Ahhhh at last! So let’s see some examples.
Pose, Poses, Posed
Pose Set Up
Run npm install and import.
npm install react-native-poseimport posed from 'react-native-pose';
And you are good to go! So next is usage and examples.
Now the documentation is pretty good as is but I wanted to outline my use cases and highlight the strengths.
https://popmotion.io/pose/learn/native-get-started/
First Step is to create a posed component with some configurations like this:
const AnimatedComponent = posed.View({
visible: { opacity: 1 },
hidden: { opacity: 0 }
});AnimatedCompnent can now be used as a normal View component but with a new ability to animate between the two visible and hidden states.
<AnimatedComponent
style={styles.animatedComp}
pose={this.state.isVisible ?
'visible' :
'hidden' }
/>My favorite thing to do is to wrap a component in a posed view to quickly add a fade in/out with my onload state variable.
<AnimatedComponent
style={styles.container}
pose={this.state.isVisible ?
'visible' :
'hidden' } >
//...
// my very amazing app content
// ...</AnimatedComponent>
Now of course you can dive deeper and still customize animations with different config options. The docs explain that very well. The fact that Pose tried to standardize animations is very pleasing to me since creating ugly transitions is very easy and can make the UI/UX worse than without animations. Here is something to consider:
These animations have been designed to create snappy and playful interfaces. Physical motion uses
springto maintain velocity between animations, whereas properties likeopacityuse atween.
So that is a great start! Hope you enjoyed this super short intro to Pose.
I am very excited about how much easier this API will make my experience with animations. Hope you got something out of this as well. Animations are not as scary as we thought. (In the spirit of Halloween)
Thank you for reading! Hope you learned something new. Let me know in the comments if you would like to see more examples or part 2 for a deeper dive.
