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.