Demo

❤️Try on Expo Snack

Prerequisites

Installation

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

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

Example

without custom popup

importReactfrom'react';import{Image,StyleSheet,Text,View}from'react-native';importAnimatedButtonfrom'@nithinpp69/react-native-animated-button';conststyles=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},});constApp=()=>{return(<Viewstyle={styles.container}><Textstyle={styles.title}>Without Custom Popup</Text><Imagesource={{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}/><Viewstyle={styles.row}><Textstyle={styles.courtesy}>          Image courtesy : Unsplash and FlatIcon</Text><AnimatedButton><Imagesource={{uri:'https://cdn-icons-png.flaticon.com/512/6685/6685820.png',}}style={styles.icon}/></AnimatedButton></View></View>);};exportdefaultApp;

with custom popup

importReactfrom'react';import{Image,StyleSheet,Text,View}from'react-native';importAnimatedButtonfrom'@nithinpp69/react-native-animated-button';conststyles=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},});constApp=()=>{return(<Viewstyle={styles.container}><Textstyle={styles.title}>With Custom Popup</Text><Imagesource={{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}/><Viewstyle={styles.row}><Textstyle={styles.courtesy}>          Image courtesy : Unsplash and FlatIcon</Text><AnimatedButtonrenderFlyingContainer={()=>(<Textstyle={styles.flyingContainer}>+1</Text>)}><Imagesource={{uri:'https://cdn-icons-png.flaticon.com/512/6685/6685820.png',}}style={styles.icon}/></AnimatedButton></View></View>);};exportdefaultApp;

with likes count

importReact,{useState}from'react';import{Image,ImageBackground,StyleSheet,Text,View}from'react-native';importAnimatedButtonfrom'@nithinpp69/react-native-animated-button';conststyles=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',},});constApp=()=>{const[likeCount,setLikeCount]=useState(0);return(<Viewstyle={styles.container}><Textstyle={styles.title}>With Likes Count</Text><Imagesource={{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}/><Viewstyle={styles.row}><Textstyle={styles.courtesy}>          Image courtesy : Unsplash and FlatIcon</Text><AnimatedButtonrenderFlyingContainer={()=>(<Textstyle={styles.flyingContainer}>+1</Text>)}onPress={()=>{setLikeCount(count=>count+1);}}><ImageBackgroundsource={{uri:'https://cdn-icons-png.flaticon.com/512/6685/6685820.png',}}style={styles.icon}><Textstyle={styles.likesCount}>{likeCount}</Text></ImageBackground></AnimatedButton></View></View>);};exportdefaultApp;

Props