The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Animate the Scale of a React Native Button using Animated.spring

Animate the Scale of a React Native Button using Animated.spring

3:12
In this lesson we will use Animated.spring and TouchableWithoutFeedback to animate the scale of a button in our React Native application. We will use the scale transform property and see how adjusting the friction of a spring will effect the spring animation.
Watch this lesson now
Avatar
egghead.io

In this lesson we will use Animated.spring and TouchableWithoutFeedback to animate the scale of a button in our React Native application. We will use the scale transform property and see how adjusting the friction of a spring will effect the spring animation.

Avatar
Paul

Just currious / cofused about this part of the code:
"this.handlePressIn = this.handlePressIn.bind(this);"
I understand that it is goo the create a bind on a variable and not directly on the component itself. But it this case it looks like that you overwrite the function "handlePressIn" with a bind on the function "handlePressIn" which is stored in a variable "handePressIn".
Is this common practice?!

Avatar
Jason Brown

This is a common practice with React yes.

What is happening is the React Component is an ES6 class. In the constructor you get access to the this scope of the class. We are then able to bind the function handlePressIn to the current this scope.

This will only bind the handlePressIn on this particular instance. So if you rendered more components they'd all have their own this instance.

React will automatically handle binding this for all of it's lifecycle methods, as well as the render method. Which is why in the render method you can access this.state and `this.props.

Mostly what this allows us to do is get access to this.state, this.props inside of handlePressIn of that React component and other functions of React like setState to trigger a re-render.

In reply to Paul
HEY, QUICK QUESTION!
Joel's Head
Why are we asking?