<ol><li>System status: users want to know what's happening at a given time.</li><li>Visualising the input: Making forms not be boring.</li><li>Manipulation: giving the impression that you can directly manipulate the screen.</li><li>Feedback: demonstrates the result of the user action.</li><li>Acknowledgment: engagement with user.</li><li>Achieving: informing the user of the results of their actions.</li></ol>

Type of micro-interactions

Are a way to tell a story. A few examples of good practices in ui-animations:<ol><li>Keep the context: shareable elements help users to know where they are during transitions.</li><li>Interactable: will empower users and give the sense they are modifying the application.</li><li>Visibility: animating appearing and disappearing of elements will make the app feel well-built.</li></ol>

ui-animations

To get started, here are a few libraries you can use:<ul><li>Built-in Animated. It's easy to get started with @vjeux.</li><li>react-native-animatable: easy to use with many built-in animations @oblador.</li><li>react-native-reanimated: most performant but has a learning curve @kzzzf.</li><li>pose: physics base animations @mattgperry.</li><li>react-spring: physics base animations @0xca0a.</li></ul>

How to get started in Reach Native

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.

The what and why of microinteractions

A few libraries to help you achieve shared element transitions in react native:<ul><li>react-native-magic-move</li><li>react-native-shared-element: everything in 60fps.</li><li>react-native-fluid-transition</li></ul>

Shared element transition libraries

Find the latest React.js talks & workshops at https://portal.gitnation.org     🗓 Talk recording from React Day Berlin Conference 2019 Check out the latest React Day Berlin news – https://reactday.berlin See other React conferences by GitNation React Summit Amsterdam – https://reactsummit.com React Advanced London – https://reactadvanced.com # Microinteractions and Animations in React Native A microinteraction goal is to provide feedback based on the user’s action. This can help users visualize how the interface moves or behaves, even though it’s purely digital on a flat screen. - What is a microinteraction - The power of microinteraction - How microinteractions work - Basic microinteraction breakdown: Action, Reaction and Feedback - Microinteractions examples in React Native Dating app: https://github.com/catalinmiron/react-native-dating-app Swipe cards: https://github.com/catalinmiron/react-native-swipe-cards-interaction Photo walkthrough: https://github.com/catalinmiron/react-native-photo-walkthrough Navigation transition: https://github.com/catalinmiron/react-native-nav-transition Shopping list + details: https://github.com/catalinmiron/mobile-shopping-react-native Feedback form morph effect: https://github.com/catalinmiron/react-native-morph-svg-gradient Seat selection: https://github.com/catalinmiron/react-native-seat-selection Sync data and intro animation: https://github.com/catalinmiron/react-native-intro-animation. Catalin Miron React, React Native, GraphQL and OS enthusiast.   Subscribe to our channel to see more React (Native) talks: https://www.youtube.com/channel/UCsFrt8oKNYXGspSlX9u6uXw/

computerscience

Computer Science

product

Product & Design

Find the latest React.js talks & workshops at https://portal.gitnation.org
 
  🗓 

 Talk recording from React Day Berlin Conference 2019
  
Check out the latest React Day Berlin news – https://reactday.berlin

See other React conferences by GitNation
React Summit Amsterdam – https://reactsummit.com
React Advanced London – https://reactadvanced.com

# Microinteractions and Animations in React Native
A microinteraction goal is to provide feedback based on the user’s action. This can help users visualize how the interface moves or behaves, even though it’s purely digital on a flat screen.

- What is a microinteraction
- The power of microinteraction
- How microinteractions work
- Basic microinteraction breakdown: Action, Reaction and Feedback
- Microinteractions examples in React Native

Dating app: https://github.com/catalinmiron/react-native-dating-app
Swipe cards: https://github.com/catalinmiron/react-native-swipe-cards-interaction
Photo walkthrough: https://github.com/catalinmiron/react-native-photo-walkthrough
Navigation transition: https://github.com/catalinmiron/react-native-nav-transition
Shopping list + details: https://github.com/catalinmiron/mobile-shopping-react-native
Feedback form morph effect: https://github.com/catalinmiron/react-native-morph-svg-gradient
Seat selection: https://github.com/catalinmiron/react-native-seat-selection
Sync data and intro animation: https://github.com/catalinmiron/react-native-intro-animation.

Catalin Miron
React, React Native, GraphQL and OS enthusiast.

 
Subscribe to our channel to see more React (Native) talks: https://www.youtube.com/channel/UCsFrt8oKNYXGspSlX9u6uXw/

Get a GitNation Multipass, attend 8+ remote JavaScript conferences & watch tens of pro talks and workshops from our past events: https://portal.gitnation.org/multipass
  
Welcome to the channel of the React-related family of conferences from GitNation:

React Summit - https://reactsummit.com
React Summit Remote Edition - https://remote.reactsummit.com
GraphQL Galaxy - https://graphqlgalaxy.com
React Advanced London - http://reactadvanced.com
React Day Berlin - https://reactday.berlin

We organize React events for a bigger cause — we want the modern tech community to become a better place for developers and enthusiasts alike by encouraging professional growth opportunities, skills evolution, and nurturing the passion for the craft.