A slider component

slider.js

import {PanResponder, View} 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>
    );
  }
}