# Swipeable + renderRightActions = splitting the swipe?

**URL:** <https://forum.codewithmosh.com/t/swipeable-renderrightactions-splitting-the-swipe/2232>\
**Category:** React Native\
**Created:** [January 25, 2021, 3:02am UTC](https://forum.codewithmosh.com/t/swipeable-renderrightactions-splitting-the-swipe/2232 "2021-01-25T03:02:46Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![bzw605](https://avatars.discourse-cdn.com/v4/letter/b/7cd45c/32.png) [@bzw605](https://forum.codewithmosh.com/u/bzw605)\
**Post date:** [January 25, 2021, 3:02am UTC](https://forum.codewithmosh.com/t/swipeable-renderrightactions-splitting-the-swipe/2232/1 "2021-01-25T03:02:46Z")

</div>

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?

**ListItemDeleteAction.js:**  
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}>

                <MaterialCommunityIcons 

                    name="trash-can"

                    size={35}

                    color={colors.white}

                />

            </View>

        </TouchableWithoutFeedback>

    );

}

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 (
    <Screen>
        <FlatList 
            data={messages}
            keyExtractor={(message) => message.id.toString()}
            renderItem={({item}) => (
                <ListItem 
                    title={item.title}
                    subTitle={item.description}
                    image={item.image}
                    onPress={() => console.log("Message selected:", item)}
                    renderRightActions={() => 
                    <ListItemDeleteAction onPress={() => console.log(item)} />}
                />
            )}
            ItemSeparatorComponent={ListItemSeparator}
            refreshing={refreshing}
            onRefresh={() => {
                setMessages([
                    {
                        id: 2,
                        title: 'T2',
                        description: 'D2',
                        image: require('../assets/mosh.jpg')
                    },
                ])
            }}
        />
    </Screen>
    
);
}

const styles = StyleSheet.create({
})

export default MessagesScreen;

```

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

---

<div class="post-metadata">

**Author:** ![hackzilla](https://avatars.discourse-cdn.com/v4/letter/h/7cd45c/32.png) [@hackzilla](https://forum.codewithmosh.com/u/hackzilla)\
**Post date:** [February 7, 2021, 9:50am UTC](https://forum.codewithmosh.com/t/swipeable-renderrightactions-splitting-the-swipe/2232/2 "2021-02-07T09:50:14Z")

</div>

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

> [@bzw605](#):
>
> ```auto
> import { TouchableWithoutFeedback } from 'react-native-gesture-handler';
> 
> ```

TouchableWithoutFeedback needs to be imported from react-native instead.

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

Hackzilla