React Native Animated Button 🔥

!platforms

A simple and customizable React Native animated button component.

Demo

❤️ Try on Expo Snack


Prerequisites

⚠️ Peer Dependencies

* react-native-reanimated-v2

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

``bash
npm install @nithinpp69/react-native-animated-button
`

or

`bash
yarn add @nithinpp69/react-native-animated-button
`


Example

#### without custom popup

`jsx
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 (

Without Custom Popup
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}
/>


Image courtesy : Unsplash and FlatIcon


source={{
uri: 'https://cdn-icons-png.flaticon.com/512/6685/6685820.png',
}}
style={styles.icon}
/>



);
};

export default App;
`

![](examples/without_custom_popup.gif)

#### with custom popup

`jsx
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 (

With Custom Popup
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}
/>


Image courtesy : Unsplash and FlatIcon

renderFlyingContainer={() => (
+1
)}
>
source={{
uri: 'https://cdn-icons-png.flaticon.com/512/6685/6685820.png',
}}
style={styles.icon}
/>



);
};

export default App;

`

![](examples/with_custom_popup.gif)
#### with likes count

`jsx
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 (

With Likes Count
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}
/>


Image courtesy : Unsplash and FlatIcon

renderFlyingContainer={() => (
+1
)}
onPress={() => {
setLikeCount(count => count + 1);
}}
>
source={{
uri: 'https://cdn-icons-png.flaticon.com/512/6685/6685820.png',
}}
style={styles.icon}
>
{likeCount}




);
};

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 |