Recently diving into React Native and working on my debut app. I've created a button component that performs an action when tapped, and repeats the action when held down. Even though I implemented a simple logic for this functionality, I'm facing issues with it. When I hold the button down, it executes the action correctly but the console throws an error message:
"Please attach a method to this component"
The error message appears when I release the button, leading me to believe that the problem lies within the onPressOut event.
Here's the code snippet, apologies for the mix of Spanish language in the code :c
import { View, Text, StyleSheet } from "react-native";
import { Button } from "react-native-elements";
interface INTERFACE {
accionMenos: () => void;
accionMas: () => void;
texto: string;
titleBotonMenos: string;
titleBotonMas: string;
}
const BotonTextoBoton = ({
accionMenos,
accionMas,
texto,
titleBotonMenos,
titleBotonMas,
}: INTERFACE) => {
let timer: NodeJS.Timeout;
function addTimer(action: () => void) {
action();
timer = setTimeout(() => {
addTimer(action);
}, 100);
}
function eraseTimer() {
clearTimeout(timer);
}
return (
<View style={styles.viewContainer}>
<View style={{ width: "15%", backgroundColor: "red" }}>
<Button
onPressIn={() => addTimer(accionMenos)}
onPressOut={eraseTimer}
title={titleBotonMenos}
/>
</View>
<Text style={{ margin: 3, fontSize: 20 }}>{texto}</Text>
<View style={{ width: "15%" }}>
<Button
onPressIn={() => addTimer(accionMas)}
onPressOut={eraseTimer}
title={titleBotonMas}
/>
</View>
</View>
);
};
const styles = StyleSheet.create({
viewContainer: {
flexDirection: "row",
justifyContent: "center",
paddingTop: 30,
alignItems: "center",
},
});
export default BotonTextoBoton;