3 main questions that needed to be answered.
- Where is the item right now? (Use Animated.ValueVY)
- Where is it the element moving to? (Use Animated.Spring)
- Which element are we moving? (Use Animated.View)
Animations run compeltely outside the state system.)
import {
PanResponder
} from 'react-native';
const panResponder = PanResponder.create({
onStartShouldSetPanResponder: () => {},
onPanResponderMove: () => {},
onPanResponderRelease: () => {},
});
For onStartShouldSetPanResponder: () => {},
, anytime the user presses this component and drags around the screen,
we want this pan responder to be responsible for handeling that gesture. onStartShouldSetPanResponder: () => true,
For onPanResponderMove: () => {},
, first argument is event
, it has some abount of information that, which object
was pressed by the user. second argument is gesture
, what the user is doing on the screen. (pixels).
now wireup the pan responder to Component.
<View {...this.state.panResponder.panHandlers}>
</View>
we are spreading all the callbackds in the panHandlers object to our existing component.
we use transform.
transform: [{ rotate: '45deg' }]
to tie 1 property to another property we use something called interpolation.
This image is taken from one of the courses of Stephen Grieder, I don't remember which one.