Microinteractions & Animations in React Native: Help users understand the UI - Catalin Miron
React Conferences by GitNation
5 ideas
·350 reads
6
Learn more about computerscience with this collection
Essential product management skills
How to work effectively with cross-functional teams
How to identify and prioritize customer needs
The what and why of microinteractions
In this talk by @mironcatalin he is presenting a few libraries and techniques to create micro-interactions and animations in React Native.
Catalin mentions that the details of the app is what makes an app feel well-polished and that animations and micro-interactions should be intuitive, natural, ideally physics based and act like a user.
Let's get started.
9
206 reads
Type of micro-interactions
- System status: users want to know what's happening at a given time.
- Visualising the input: Making forms not be boring.
- Manipulation: giving the impression that you can directly manipulate the screen.
- Feedback: demonstrates the result of the user action.
- Acknowledgment: engagement with user.
- Achieving: informing the user of the results of their actions.
9
42 reads
ui-animations
Are a way to tell a story. A few examples of good practices in ui-animations:
- Keep the context: shareable elements help users to know where they are during transitions.
- Interactable: will empower users and give the sense they are modifying the application.
- Visibility: animating appearing and disappearing of elements will make the app feel well-built.
8
33 reads
How to get started in Reach Native
To get started, here are a few libraries you can use:
- Built-in Animated. It's easy to get started with @vjeux.
- react-native-animatable: easy to use with many built-in animations @oblador.
- react-native-reanimated: most performant but has a learning curve @kzzzf.
- pose: physics base animations @mattgperry.
- react-spring: physics base animations @0xca0a.
8
31 reads
Shared element transition libraries
A few libraries to help you achieve shared element transitions in react native:
- react-native-magic-move
- react-native-shared-element: everything in 60fps.
- react-native-fluid-transition
8
38 reads
CURATED BY
Read & Learn
20x Faster
without
deepstash
with
deepstash
with
deepstash
Access to 200,000+ ideas
—
Access to the mobile app
—
Unlimited idea saving & library
—
—
Unlimited history
—
—
Unlimited listening to ideas
—
—
Downloading & offline access
—
—
Personalized recommendations
—
—
Supercharge your mind with one idea per day
Enter your email and spend 1 minute every day to learn something new.
I agree to receive email updates