1.1.11 • Published 9 months ago
react-native-animated-pressable v1.1.11
Intro 🚀
Motivation 🎯
Installation 💻
npm install react-native-animated-pressable
or
yarn add react-native-animated-pressable
Demo 🎥
Press animation is significantly smoother in reality compared to the gifs presented below.
Example 1
Example 2
Usage
import { PressableAnimated } from "./src/components/PressableAnimated";
import { StyleSheet, Text, View } from "react-native";
export default function App() {
return (
<View style={styles.container}>
<PressableAnimated
bounce
customStyles={styles.customStyles}
scaleValue={1.2}
onPress={() => {
console.log("onPress");
}}
onPressIn={() => {
console.log("onPressIn");
}}
onPressOut={() => {
console.log("onPressOut");
}}
>
<Text style={styles.text}>App</Text>
</PressableAnimated>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
customStyles: {
alignItems: "center",
justifyContent: "center",
backgroundColor: "#071D38",
width: 200,
height: 200,
borderRadius: 20,
},
text: {
color: "#fff",
fontSize: 20,
},
});
API
Prop | Type | Default | Description |
---|---|---|---|
scaleValue | number | 1.03 | The value to which the component scales when pressed. |
duration | number | 500 | The duration of the scale animation, in milliseconds. |
isDisabled | boolean | false | If true , disables the pressable functionality. |
isPressed | boolean | false | Manually controls the pressed state of the component. |
customStyles | StyleProp<ViewStyle> | undefined | Styles the Animated View. |
onPress | () => void | undefined | Callback function invoked when the press is released. |
onPressIn | () => void | undefined | Callback function invoked when the press is initiated. |
onPressOut | () => void | undefined | Callback function invoked when the press is released. |
children | React.ReactNode | undefined | The components to be rendered inside the PressableAnimated component. |
1.1.11
9 months ago
1.1.10
9 months ago
1.1.9
9 months ago
1.1.8
9 months ago
1.1.7
9 months ago
1.1.6
9 months ago
1.1.5
10 months ago
1.1.4
10 months ago
1.1.3
10 months ago
1.1.2
10 months ago
1.1.1
10 months ago
1.1.0
10 months ago
1.0.9
10 months ago
1.0.8
10 months ago
1.0.7
10 months ago
1.0.6
10 months ago
1.0.5
10 months ago
1.0.4
10 months ago
1.0.3
10 months ago
1.0.2
10 months ago
1.0.1
10 months ago
1.0.0
10 months ago