Animate the Scale of a React Native Button using Animated.spring
Share this video with your friends
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.