@nithinpp69/react-native-animated-button

React Native Animated Button 🔥

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

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

or

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

Example

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

Changelog

Build: 🏠 2.1.0 - @nithinpp69/react-native-animated-button

• feat: added disabled prop. Use this to enable or disable the button
• feat: added disabledStyle prop. Use this to style the button when disabled