Sliding Animation with different background coming up, correct overlay - animation

Question

I'm trying to make a slider animation, like the one you get when you power off iOS on iPhones. This is what I have so far and it is self-contained.
import {PanResponder, View, Text, Dimension} from 'react-native';
const {width} = Dimension.get('window');
const TOTAL_WIDTH = width - 50;
class slider extends React.Component {
t = <Text>Slide to Export & Delete</Text>;
state = {
button_translate_x: 0
};
move_right(event, dx) {
if (dx > 0 && event.nativeEvent.pageX <= TOTAL_WIDTH) {
if (dx === width - 50) {
this.setState({button_translate_x: 0});
} else {
this.setState({button_translate_x: dx});
}
}
}
release_handler(e, gs) {
const diff = Math.abs(e.nativeEvent.pageX - TOTAL_WIDTH);
if (diff <= 5) {
this.setState({button_translate_x: gs.dx});
} else {
this.setState({button_translate_x: 0});
}
}
pan_responder = PanResponder.create({
onStartShouldSetPanResponder: (evt, gestureState) => true,
onPanResponderMove: (evt, gestureState) => {
this.move_right(evt, gestureState.dx);
},
onPanResponderRelease: (evt, gestureState) => {
this.release_handler(evt, gestureState);
}
});
smoothing_margin() {
if (this.state.button_translate_x <= 25)
return Math.abs(this.state.button_translate_x - 20);
else return 0;
}
render() {
return (
<View style={{alignItems: 'center'}}>
<View
style={{
alignItems: 'center',
borderRadius: 25,
width: TOTAL_WIDTH,
backgroundColor: 'orange'
}}>
<View
style={{
width: this.state.button_translate_x,
alignItems: 'center',
justifyContent: 'center',
position: 'absolute',
backgroundColor: 'blue',
borderRadius: 25,
top: 0,
left: 0,
right: 0,
bottom: 0,
zIndex: -1,
marginVertical: this.smoothing_margin()
}}
/>
<View
style={{
position: 'absolute',
alignItems: 'center',
justifyContent: 'center',
top: 0,
left: 0,
right: 0,
bottom: 0,
zIndex: -2
}}>
{this.t}
</View>
<View
style={{
alignSelf: 'flex-start',
width: 50,
transform: [{translateX: this.state.button_translate_x}],
height: 50,
borderRadius: 25,
backgroundColor: 'red'
}}
{...this.pan_responder.panHandlers}
/>
</View>
</View>
);
}
}
But this is wrong though because the initial slide has the blue coming out of the rounded bounds of the orange view. I have tried to be clever with this with marginVertical but not sure if that is the correct way to go about it.
Sliding all the way to the right is incorrect because the blue should be covering at least to the middle of the circle but as currently written only goes up to the left side.
Help appreciated.

Answer 1

Figured it out!
import {PanResponder} from 'react-native';
const TOTAL_WIDTH = width - 50;
class slider extends React.Component {
t = <Text>Slide to Export & Delete</Text>;
state = {button_translate_x: 0};
pan_responder = PanResponder.create({
onStartShouldSetPanResponder: (evt, gestureState) => true,
onPanResponderMove: (evt, {dx}) => {
if (dx > 0 && TOTAL_WIDTH - 50 >= dx) {
this.setState({button_translate_x: dx});
}
},
onPanResponderRelease: ({nativeEvent: {pageX}}, {dx}) => {
if (TOTAL_WIDTH - 50 - dx <= 5) {
console.log('Success zone');
} else {
this.setState({button_translate_x: 0});
}
}
});
render() {
return (
<View style={{alignItems: 'center'}}>
<View
style={{
alignItems: 'center',
borderRadius: 25,
width: TOTAL_WIDTH,
backgroundColor: 'orange'
}}>
<View
style={{
position: 'absolute',
alignItems: 'center',
justifyContent: 'center',
top: 0,
left: 0,
right: 0,
bottom: 0,
zIndex: -2
}}>
{this.t}
</View>
<View
style={{
alignSelf: 'flex-start',
width: 50,
transform: [{translateX: this.state.button_translate_x}],
height: 50,
borderRadius: 25,
backgroundColor: 'red'
}}
{...this.pan_responder.panHandlers}
/>
<View
style={{
borderRadius: 25,
position: 'absolute',
top: 0,
bottom: 0,
right: 0,
left: 0,
backgroundColor: 'blue',
height: 50,
width: this.state.button_translate_x + 50,
zIndex: -1
}}
/>
</View>
</View>
);
}
}