https://github.com/mehuljetani/react-native-animated-flip-card

A React Native component that provides a customisable, animated flip card with both horizontal and vertical flipping directions.
https://github.com/mehuljetani/react-native-animated-flip-card

animation react-native react-native-animation react-native-flip-card

Last synced: about 2 months ago
JSON representation

A React Native component that provides a customisable, animated flip card with both horizontal and vertical flipping directions.

• Host: GitHub
• URL: https://github.com/mehuljetani/react-native-animated-flip-card
• Owner: mehuljetani
• Created: 2024-09-13T09:28:09.000Z (3 months ago)
• Default Branch: main
• Last Pushed: 2024-09-26T09:22:15.000Z (3 months ago)
• Last Synced: 2024-10-01T16:54:33.338Z (3 months ago)
• Topics: animation, react-native, react-native-animation, react-native-flip-card
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/react-native-animated-flip-card
• Size: 3 MB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


  

  

  
react-native-animated-flip-card

  
A React Native component that provides a customizable, animated flip card with both horizontal and vertical flipping directions. Perfect for creating interactive and engaging user interfaces.

   
Features:

   
Flip animation (horizontal or vertical)

   
Customizable content for both front and back sides

   
Supports images and text styling

   
Configurable animation duration and easing


  
Installation

  
To install the package, use npm or yarn:


  
Using npm:

  
npm install react-native-animated-flip-card


  
Using yarn:

  
yarn add react-native-animated-flip-card


  
Usage

  
To use the DynamicCard component in your React Native project, follow these steps:


  
Import the Component

  
import DynamicCard from 'react-native-animated-flip-card';


  
Example

  
Here's a basic example of how to use the DynamicCard component:


  


import React from 'react';

import { View, StyleSheet, StatusBar } from 'react-native';

import DynamicCard from 'react-native-animated-flip-card';


const App = () => {

  return (

    <View style={styles.container}>

      <StatusBar hidden />

      <DynamicCard

        backTitle="River Side"

        title="Beautiful Sunset"

        flipDirection={'vertical'}

        cardStyle={styles.customCard}

        imageStyle={styles.customImage}

        titleStyle={styles.customTitle}

        descriptionStyle={styles.customDescription}

        backDescription="A stunning view of the River Side mountains."

        description="A stunning view of the sunset over the mountains."

        imageUrl="https://images.pexels.com/photos/13979460/pexels-photo-13979460.jpeg?auto=compress&cs=tinysrgb&w=600"

        backImageUrl="https://images.pexels.com/photos/3217928/pexels-photo-3217928.jpeg?auto=compress&cs=tinysrgb&w=600"

      />

    </View>

  );

};

const styles = StyleSheet.create({

  container: {

    flex: 1,

    alignItems: 'center',

    backgroundColor: '#000',

    justifyContent: 'center',

  },

  customCard: {

    width: 320,

    height: 500,

    borderRadius: 18,

    backgroundColor: 'white',

  },

  customImage: {

    width: 300,

    height: 480,

    borderRadius: 15,

  },

  customTitle: {

    color: '#fff',

  },

  customDescription: {

    color: '#fff',

  },

});

export default App;

  


  
Demo

  
Check out the demo of the component in action:

  
Horizontal

  


  
Vertical

  


  
Props

   

          

            

              Prop

              Type

              Default

              Description

            

          

          

            

              title

              string

              ""

              The text for front side.

            

            

              description

              string

              ""

              The description front side.

            

            

              backTitle

              string

              ""

              The text for back side.

            

            

              backDescription

              string

              ""

              The description back side.

            

            

              imageUrl

              string

              ""

              The URL of the image front side.

            

            

              backImageUrl

              string

              ""

              The URL of the image back side.

            

            

              cardStyle

              StyleProp<ViewStyle>

              {}

              Custom style for the card container.

            

            

              titleStyle

              StyleProp<TextStyle>

              {}

              Custom style for the title text.

            

            

              imageStyle

              StyleProp<ImageStyle>

              {}

              Custom style for the image.

            

            

              descriptionStyle

              StyleProp<TextStyle>

              {}

              Custom style for the description text.

            

            

              flipDirection

              'horizontal' | 'vertical'

              'horizontal'

              Direction of the flip animation.

            

          

        


  
License

  
This project is licensed under the ISC License.


  
Contact

  
If you have any questions or issues, please open an issue on the GitHub repository or contact the author directly.