Swipeable + renderRightActions = splitting the swipe?

React Native
1

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

2

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’;

Hackzilla

1 Like