Skip to main content

LongPressButton

The LongPressButton is an interactive component in our library that triggers actions when pressed and held for a certain duration, typically longer than a standard button press.

Usage

Basic usage

import {LongPressButton} from 'rn-inkpad';

const MyComponent = () => {
return <LongPressButton />;
};

Props

NameTypeDefaultDescription
backgroundColorstring#464EE5Button background color.
behavior'left-to-right' | 'right-to-left' | 'center-to-ends'left-to-rightDirection of movement of the bar.
borderRadiusnumber20Border radius.
fontSizenumberFont size.
fullWidthbooleanActive full width.
heightDimensionValue40Button height.
iconstringButton icon.
iconPosition'left' | 'right'leftIcon position.
longPressTimenumber2000Time in ms of long press to execute the function.
progressColorstringrgba(255, 255, 255, 0.3)Indicator bar color.
styleStyleProp<ViewStyle>Personalized styles for your button.
textstringButtonButton text.
textColorstring#FFFFFFText color.
widthDimensionValue50%Button width.
onFinish() => voidFunction that is executed at the end of the long press.

Usage with props

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

import {RadioButtons} from 'rn-inkpad';

const MyComponent = () => {
const [isExecuted, setIsExecuted] = useState(false);

const handlePress = () => {
setIsExecuted(true);
setTimeout(() => {
setIsExecuted(false);
}, 1500);
};

return (
<View styles={styles.container}>
<LongPressButton
backgroundColor="#21295C"
borderRadius={10}
icon="add-circle-outline"
progressColor="#60a5fa"
text="Press and Hold"
onFinish={handlePress}
/>
<LongPressButton
backgroundColor="#DB504A"
behavior="center-to-ends"
icon="add-circle-outline"
iconPosition="right"
progressColor="rgba(0,0,0,0.5)"
style={{marginTop: 10}}
text="Press and Hold"
onFinish={handlePress}
/>
<LongPressButton
backgroundColor="#7EE081"
behavior="right-to-left"
borderRadius={0}
icon="add-circle-outline"
iconPosition="right"
progressColor="#C3F3C0"
style={{marginTop: 10}}
text="Press and Hold"
textColor="#000"
onFinish={handlePress}
/>

<Text style={{marginTop: 15}}>
{isExecuted ? 'Executed' : 'Long press to execute!'}
</Text>
</View>
);
};

const styles = StyleSheet.create({
container: {
alignItems: 'center',
flex: 1,
justifyContent: 'center',
},
});

Example with props