@uiw/react-native/lib/SwipeAction/index.js

UIW for React Native

import React from 'react';
import { Text, View } from 'react-native';
import Swipeout from 'react-native-swipeout';

class SwipeAction extends React.Component {
  static defaultProps = {
    autoClose: false,
    disabled: false,

    onOpen() {},

    onClose() {}

  };

  renderCustomButton(button) {
    const buttonStyle = button.style;
    const bgColor = buttonStyle ? buttonStyle.backgroundColor : 'transparent';
    const Component = <View // eslint-disable-next-line react-native/no-inline-styles
    style={{
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: bgColor
    }}>
        {React.isValidElement(button.text) ? button.text : // eslint-disable-next-line react-native/no-inline-styles
      <Text style={[buttonStyle, {
        textAlign: 'center'
      }]}>{button.text}</Text>}
      </View>;
    return {
      text: button.text || 'Click',
      onPress: button.onPress,
      type: 'default',
      component: Component,
      backgroundColor: 'transparent',
      color: '#999',
      disabled: false
    };
  }

  render() {
    const {
      disabled,
      autoClose,
      style,
      left,
      right,
      onOpen,
      onClose,
      children,
      ...restProps
    } = this.props;
    const customLeft = left && left.map(btn => {
      return this.renderCustomButton(btn);
    });
    const customRight = right && right.map(btn => {
      return this.renderCustomButton(btn);
    });
    return customLeft || customRight ? <Swipeout autoClose={autoClose} left={customLeft} right={customRight} style={style} onOpen={onOpen} onClose={onClose} disabled={disabled} {...restProps}>
        {children}
      </Swipeout> : <View style={style} {...restProps}>
        {children}
      </View>;
  }

}

export default SwipeAction;