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.
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?!
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.