Join Samer Buna for an in-depth discussion in this video Creating an animation loop, part of React Native Essential Training.
- [Instructor] To accomplish the bouncing…animation effect that we're planning,…we need to control the X position of this Bakesale word.…So right now, we are rendering this word…with a simple Text inside of View.…You can actually animate both of these components.…Usually we animate the containing View.…So to animate this View, we need to change…the regular component into Animated.View, just like that.…And of course, I need to import Animated from React Native.…
So, this is the very first step,…Animate from react-native.…And you would change your component…to an Animated version of that.…Next, you need the value that is to be animated…which is the X position of this word.…The value to be animated has to be passed…to the style of the Animated component,…but we need to define it first.…Since this is related to the component in here,…we can define it on the instance of this component.…So let's call it titleXPos.…
And since it's just a single value,…we can use new Animated.Value, just like that.…And we'll make it start from zero.…
- Hello React Native on iOS and Android
- Styling React Native components
- Platform APIs
- Building a simple game app and a data-driven app
- Using the Fetch API
- Creating an animation loop
- Testing on Android
- Changing an app logo and a splash screen
- Using TestFlight with internal testers
Skill Level Intermediate
1. Getting Started
2. React Native Fundamentals
Hello React Native on iOS5m 42s
3. Building a Simple Game App
4. Building a Data-driven App
5. Animation and Gesture Control
- 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.