How do I access a component's inner method using hooks in react-native

Question

I am using the this , and am trying to use the "close" method. How might I call that close method once I hit a cancel alert as shown below? I believe this is my general misunderstanding of how react hooks/classes work with public methods. Any help would be appreciated!

        <Swipeable
        renderRightActions={renderRightActions}
        onSwipeableRightOpen={() => {
            Alert.alert(
                "Delete " + title + "?",
                "",
                [
                    {
                        text: "Cancel",
                        onPress: () => {this.close()},
                        style: "cancel",
                    },
                    { text: "Delete", onPress: () => removeItem(id) },
                ],
                { cancelable: true }
            );
        }}
        leftThreshold={0}
        rightThreshold={150}>Random stuff in here</Swipeable>

EDIT I rewrote it as a class:

import React from "react";
import { StyleSheet, Alert, Text, View, TouchableWithoutFeedback, Animated } from "react-native";
import { Ionicons } from "@expo/vector-icons";
import Swipeable from "react-native-gesture-handler/Swipeable";
import * as Haptics from "expo-haptics";

class ListItem extends React.Component {
    constructor(props) {
        super(props);
        const { id, title, onClick, drag, isActive, removeItem } = this.props;
        this.id = id;
        this.title = title;
        this.onClick = onClick;
        this.drag = drag;
        this.isActive = isActive;
        this.removeItem = removeItem;
    }

    componentDidUpdate = () => {
        if (this.isActive) {
            // haptic feedback
            Haptics.impactAsync();
        }
    };

    renderRightActions = (progress, dragX) => {
        const trans = dragX.interpolate({
            inputRange: [0, 50, 100, 101],
            outputRange: [-20, 0, 0, 1],
        });

        return (
            <View style={{ width: 45, marginTop: 20, marginLeft: 1000 }}>
                <Animated.Text
                    style={{
                        transform: [{ translateX: trans }],
                    }}></Animated.Text>
            </View>
        );
    };

    onCancel() {
        console.log("WHAT");
        console.log(this);
    }

    render() {
        return (
            <Swipeable
                renderRightActions={this.renderRightActions}
                onSwipeableRightOpen={function () {
                    Alert.alert(
                        "Delete " + this.title + "?",
                        "",
                        [
                            {
                                text: "Cancel",
                                onPress: this.onCancel(),
                                style: "cancel",
                            },
                            { text: "Delete", onPress: () => removeItem(id) },
                        ],
                        { cancelable: true }
                    );
                }}
                leftThreshold={0}
                rightThreshold={150}>
                <TouchableWithoutFeedback
                    onPress={function () {
                        this.onClick();
                    }}
                    onLongPress={this.drag}
                    delayLongPress={200}>
                    <View style={listItemStyles.item}>
                        <View
                            style={{
                                marginTop: 7,
                                marginLeft: 18,
                            }}>
                            <Text style={listItemStyles.itemTitle}>{this.title}</Text>
                        </View>
                        <View style={listItemStyles.itemIcon}>
                            <Ionicons
                                name={"ios-arrow-forward"}
                                size={30}
                                style={{ marginBottom: -3 }}
                                color={"#E3E3E3"}
                            />
                        </View>
                    </View>
                </TouchableWithoutFeedback>
            </Swipeable>
        );
    }
}

export default ListItem;

// Styles
const listItemStyles = StyleSheet.create({
    // list item
    item: {
        padding: 3,
        marginVertical: 2,
        marginLeft: "2%",
        marginRight: "2%",
        width: "96%",

        // internals
        flexDirection: "row",
        justifyContent: "space-between",
    },
    itemTitle: {
        flexDirection: "row",
        justifyContent: "flex-start",
        color: "#333333",
        fontSize: 18,
    },
    itemSubtitle: {
        fontSize: 12,
        marginLeft: 5,
    },
    itemIcon: {
        marginTop: 2,
        marginRight: 10,
        flex: 1,
        flexDirection: "row",
        justifyContent: "flex-end",
    },
});

However when I print out (this), "close" does not show up as a method.

Answer 1

You cannot use this because it references your outer component due to your fat-arrow functions.

The docs say Using reference to Swipeable it's possible to trigger some actions on it. close: method that closes component. Using reference to Swipeable it's possible to trigger some actions on it. close: method that closes component.

The problem here is that the great thing about the fat arrow function (it does not has its own refernce, so the outer is used).

Here in your case, that means your outer component function that render the Swipeable component.

So for that use case, you need to use a class component for the onSwipeableRightOpen prop.