Swipeable + renderRightActions = splitting the swipe?

Hi all,

I am on Lists, section 7 (Deleting an Item) and I have run into an issue that I cannot fix. At around the 1:30 mark, when Mosh renders the component into the renderRightActions attribute, I followed the code along precisely and now when I swipe, the red slider box is half the height and so is the trash can inside of it. I have been troubleshooting on my own for hours now and I can’t seem to figure out where I went wrong. MAybe somebody can help me out?

import React from ‘react’;

import { View, StyleSheet } from 'react-native';

import {MaterialCommunityIcons} from '@expo/vector-icons';

import colors from '../config/colors';

import { TouchableWithoutFeedback } from 'react-native-gesture-handler';

function ListItemDeleteAction({onPress}) {

    return (

        <TouchableWithoutFeedback onPress={onPress}>

            <View style={styles.container}>










const styles = StyleSheet.create({

    container: {

        backgroundColor: colors.danger,

        width: 70,

        justifyContent: 'center',

        alignItems: 'center',



export default ListItemDeleteAction;

Here is my MessagesScreen.js:

import React, {useState} from 'react';
import { FlatList, StyleSheet, View } from 'react-native';

import Screen from '../components/Screen';
import ListItem from '../components/ListItem';
import ListItemSeparator from '../components/ListItemSeparator';
import ListItemDeleteAction from '../components/ListItemDeleteAction';

const initialMessages = [
    id: 1,
    title: 'T1',
    description: 'D1',
    image: require('../assets/mosh.jpg')
    id: 2,
    title: 'T2',
    description: 'D2',
    image: require('../assets/mosh.jpg')

function MessagesScreen(props) {
const [messages, setMessages] = useState(initialMessages);
const [refreshing, setRefreshing] = useState(false);

const handleDelete = message => {
    // Delete the message from messages
    setMessages(messages.filter(m => m.id !== message.id));
return (
            keyExtractor={(message) => message.id.toString()}
            renderItem={({item}) => (
                    onPress={() => console.log("Message selected:", item)}
                    renderRightActions={() => 
                    <ListItemDeleteAction onPress={() => console.log(item)} />}
            onRefresh={() => {
                        id: 2,
                        title: 'T2',
                        description: 'D2',
                        image: require('../assets/mosh.jpg')

const styles = StyleSheet.create({

export default MessagesScreen;

Please let me know if anyone can figure out how to fix this

I’ve just experienced this exact issue.
This is your issue.

TouchableWithoutFeedback needs to be imported from react-native instead.

import { View, StyleSheet, TouchableWithoutFeedback } from ‘react-native’;


1 Like