Read the documentation here http://facebook.github.io/react-native/docs/animated.html#flattenoffset.
flattenOffset
, like setOffset
, is grouped with other Animated.ValueXY
methods because it is going to typically be used when dealing with PanResponder
, and called in the onPanResponderRelease
function.
flattenOffset
will take whatever values are in the offset and add them to the base animated value, and then reset the offset to 0
. For example, if we had an offset of 100
and our Animated.Value
is 50
, when we call flattenOffset
, our offset will become 0
and our Animated.Value
will become 150
.
componentWillMount: function() {
this._animatedValue = new Animated.ValueXY()
this._value = {x: 0, y: 0}
this._animatedValue.addListener((value) => this._value = value);
this._panResponder = PanResponder.create({
onMoveShouldSetResponderCapture: () => true, //Tell iOS that we are allowing the movement
onMoveShouldSetPanResponderCapture: () => true, // Same here, tell iOS that we allow dragging
onPanResponderGrant: (e, gestureState) => {
this._animatedValue.setOffset({x: this._value.x, y: this._value.y});
this._animatedValue.setValue({x: 0, y: 0});
},
onPanResponderMove: Animated.event([
null, {dx: this._animatedValue.x, dy: this._animatedValue.y}
]), // Creates a function to handle the movement and set offsets
onPanResponderRelease: () => {
this._animatedValue.flattenOffset(); // Flatten the offset so it resets the default positioning
}
});
},
// To use
<Animated.View style={[styles.box, {transform: this._animatedValue.getTranslateTransform()}]} {...this._panResponder.panHandlers} />
In this context, flattenOffset
is taking what ever is set in the offset and merging it in with the animated value. We use flattenOffset
to reset our offset back to x: 0, y: 0
. Because we reset our offset and our animated value in the onPanResponderGrant
, the call to flattenOffset
is unnecessary, here. However, in the case where we want to trigger an animation from the released location to another location, flattenOffset
is required.