Learn about how to use the Animated API in React Native
- [Instructor] This video is a quick introduction…to Animated, the primary tool for creating…animations in React Native.…We're going to animate this image box…and then make the animation interactive.…It is not going to be a complete tutorial about the library,…but it should cover enough for us…to implement the animations in the following medials.…Let's start with a simple example.…I'm using the beginning file, O4 O2,…that comes with the course and I have already…set up the project with MPN install.…
So, now, I have the index js file…that's in the storybook directory.…And we have a simple component, here,…for our animated experimentation.…You can see that on line 109 and until line 111…we have an image in the button.…Right now, the opacity of the image is hard-coated.…Let's animate it!…So, line 104, instead of this hard-coated value,…we create a new animated value.…
Let's assign an initial value of zero,…which is totally transparent.…The second step to use animated,…is to modify the component that we are going to animate…
- Using material design principles
- Working with units and measurements
- Using elevation and drop shadows
- Leveraging grids and keylines
- Setting up React Native for Android
- Building floating action buttons
- Creating an immersive experience
- Adding motion and transitions
- Animating icons
- Using component libraries
Skill Level Intermediate
Android App Development: Data Persistence Librarieswith Annyce Davis4h 52m Intermediate
React Native Ecosystem and Workflowwith Emmanuel Henri1h 3m Intermediate
1. Material Design Overview
2. Tools and Environment Setup
3. Build the Materials with React Native
4. Material Motion with React Native
5. Component Libraries
Library selection strategy3m 10s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.