React Native Animated Button 🔥
A simple and customizable React Native animated button component.
Demo
❤️ Try on Expo Snack
Prerequisites
This component has a peer dependency on react-native-reanimated-v2. react-native-reanimated-v2 has to be installed and linked into your project. Follow react-native-reanimated-v2 to install the dependency.
Installation
Supported version: react-native >= 0.59.0
npm install @nithinpp69/react-native-animated-buttonor
yarn add @nithinpp69/react-native-animated-buttonExample
without custom popup
import React from 'react';
import { Image, StyleSheet, Text, View } from 'react-native';
import AnimatedButton from '@nithinpp69/react-native-animated-button';
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#171517',
alignItems: 'center',
},
title: {
color: 'white',
fontWeight: 'bold',
fontSize: 18,
marginBottom: 15,
textAlign: 'left',
width: '90%',
},
image: { width: '90%', height: 250, borderRadius: 15 },
row: {
width: '90%',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
paddingTop: 15,
},
courtesy: { color: 'white', fontSize: 15 },
icon: { width: 35, height: 35 },
});
const App = () => {
return (
<View style={styles.container}>
<Text style={styles.title}>Without Custom Popup</Text>
<Image
source={{
uri: 'https://images.unsplash.com/photo-1634938971687-1082b4cb018c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80',
}}
style={styles.image}
/>
<View style={styles.row}>
<Text style={styles.courtesy}>
Image courtesy : Unsplash and FlatIcon
</Text>
<AnimatedButton>
<Image
source={{
uri: 'https://cdn-icons-png.flaticon.com/512/6685/6685820.png',
}}
style={styles.icon}
/>
</AnimatedButton>
</View>
</View>
);
};
export default App;
with custom popup
import React from 'react';
import { Image, StyleSheet, Text, View } from 'react-native';
import AnimatedButton from '@nithinpp69/react-native-animated-button';
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#171517',
alignItems: 'center',
},
title: {
color: 'white',
fontWeight: 'bold',
fontSize: 18,
marginBottom: 15,
textAlign: 'left',
width: '90%',
},
image: { width: '90%', height: 250, borderRadius: 15 },
row: {
width: '90%',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
paddingTop: 15,
},
courtesy: { color: 'white', fontSize: 15 },
flyingContainer: { color: 'white', fontSize: 18, fontWeight: 'bold' },
icon: { width: 35, height: 35 },
});
const App = () => {
return (
<View style={styles.container}>
<Text style={styles.title}>With Custom Popup</Text>
<Image
source={{
uri: 'https://images.unsplash.com/photo-1634938971687-1082b4cb018c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80',
}}
style={styles.image}
/>
<View style={styles.row}>
<Text style={styles.courtesy}>
Image courtesy : Unsplash and FlatIcon
</Text>
<AnimatedButton
renderFlyingContainer={() => (
<Text style={styles.flyingContainer}>+1</Text>
)}
>
<Image
source={{
uri: 'https://cdn-icons-png.flaticon.com/512/6685/6685820.png',
}}
style={styles.icon}
/>
</AnimatedButton>
</View>
</View>
);
};
export default App;
with likes count
import React, { useState } from 'react';
import { Image, ImageBackground, StyleSheet, Text, View } from 'react-native';
import AnimatedButton from '@nithinpp69/react-native-animated-button';
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#171517',
alignItems: 'center',
},
title: {
color: 'white',
fontWeight: 'bold',
fontSize: 18,
marginBottom: 15,
textAlign: 'left',
width: '90%',
},
image: { width: '90%', height: 250, borderRadius: 15 },
row: {
width: '90%',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
paddingTop: 15,
},
courtesy: { color: 'white', fontSize: 15 },
flyingContainer: { color: 'white', fontSize: 18, fontWeight: 'bold' },
icon: {
width: 35,
height: 35,
alignItems: 'center',
justifyContent: 'center',
},
likesCount: {
color: 'black',
fontSize: 18,
fontWeight: 'bold',
},
});
const App = () => {
const [likeCount, setLikeCount] = useState(0);
return (
<View style={styles.container}>
<Text style={styles.title}>With Likes Count</Text>
<Image
source={{
uri: 'https://images.unsplash.com/photo-1634938971687-1082b4cb018c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80',
}}
style={styles.image}
/>
<View style={styles.row}>
<Text style={styles.courtesy}>
Image courtesy : Unsplash and FlatIcon
</Text>
<AnimatedButton
renderFlyingContainer={() => (
<Text style={styles.flyingContainer}>+1</Text>
)}
onPress={() => {
setLikeCount(count => count + 1);
}}
>
<ImageBackground
source={{
uri: 'https://cdn-icons-png.flaticon.com/512/6685/6685820.png',
}}
style={styles.icon}
>
<Text style={styles.likesCount}>{likeCount}</Text>
</ImageBackground>
</AnimatedButton>
</View>
</View>
);
};
export default App;
Props
| Prop | Description | Type | Default Value | Required |
|---|---|---|---|---|
| onPress | button onPress callback | Function | () => {} | false |
| duration | animation duration | Number | 500 | false |
| style | button container style | ViewStyle | {} | false |
| disabled | enable or disable button. If disabled, onPress callback won't be executed | Boolean | false | false |
| disabledStyle | extra styling when the button is disabled. For eg, decreased opacity, different color etc. | ViewStyle | {} | false |
| direction | flying direction | 'up' or 'down' | 'up' | false |
| children | children component | React.ReactNode | null | false |
| renderFlyingContainer | function to render the flying container. If not given, will be replaced by children element | Function | () => null | false |
| enableScaleAnimation | enable or disable button scale animation | Boolean | true | false |
| position | flying container position based on the button element | 'left' or 'center' or 'right' | 'center' | false |
| animationEnabled | enable or disable button animation | Boolean | true | false |