onPress в пользовательском компоненте не закрывает автоматически <Swipeout>реагировать-родной-размах

Question

Я пытаюсь использовать response-native-swipeout, чтобы кнопка «Удалить» отображалась только при перелистывании. Действие удаления будет использовать мутацию graphql (Reaction-Apollo)

Сначала я использую компонент внутри компонента в пользовательском компоненте и передаю функцию onPress, в которой происходит мутация graphql для удаления данных на сервере.

const renderItem = ({ item, index, props }: { item: any; index: number; props: Props }) => {
  const swipeoutBtns = [
    {
      text: 'Edit',
    },
    {
      text: 'Delete',
      backgroundColor: 'red',
      component: <DeleteService id={props.id} data={props.data} index={index}/>,
      onPress: () => {
        console.log('Pressed');
      },
    },
  ];
  return (
    <Swipeout rowId={index} right={swipeoutBtns} autoClose={true}>
      <ServiceItem data={item} isHeader={false} />
    </Swipeout>
  );
};

Вот мой код, использованный до замены на. Он хорошо работает в отношении мутации данных, но автоматическое закрытие не происходит.

export const DeleteService: React.SFC<Props> = (props: Props) => {
 const { id, data, index } = props;
 return (
    <Mutation mutation={MutationGQL}>
      {(deleteFunc: any) => (
        <Button
          onPress={() => {
            data.splice(index, 1);
            const inputData = data.map(
              (item) => {
                return { 
                   name: item.name, 
                   price: item.price, 
                   technician: item.technician.id };
              }
            );
            deleteFunc({ variables: { id, services: inputData } });
          }}
          title={'Delete'}
        >
          {'Delete'}
       </Button>
      )}
    </Mutation>
  );
};

А вот код после того, как я пытаюсь заменить на. Когда я нажимаю на текст «Удалить» (в пользовательском интерфейсе кнопки, предоставленном Swipeout), все еще выполняется только работа по мутации, но не происходит автозаполнение. Когда я нажимаю на внешнюю часть кнопки, происходит только автоматическое закрытие, но работа по изменению не выполняется.

        <TouchableHighlight
          onPress={() => {
            data.splice(index, 1);
            const inputData = data.map(
              (item) => {
                return { 
                   name: item.name, 
                   price: item.price, 
                   technician: item.technician.id };
              }
            );
            deleteFunc({ variables: { id, services: inputData } });
          }}
        >
          <Text>{'Delete'}</Text>
       </TouchableHighlight>

Существует ли какое-либо решение, которое позволяет выполнять оба действия при нажатии кнопки Удалить?