3D Card Flip Component

A React Native component that displays a card with front and back faces that can be flipped with a 3D rotation animation.

Capabilities

Card Structure

• Renders two separate views representing the front and back of the card @test
• The front view displays by default when the component mounts @test
• Both front and back views accept custom content as children @test

Transform-Based Flipping

• Applies a 180-degree Y-axis rotation transform to flip from front to back @test
• The back view has an initial 180-degree Y-axis rotation to display correctly when flipped @test
• Uses perspective transform to create a 3D visual effect during the flip @test

Visibility Control

• Only the front face is visible when showing the front (back face is hidden) @test
• Only the back face is visible when showing the back (front face is hidden) @test

Implementation

@generates

API

import React from 'react';
import { ViewStyle } from 'react-native';

interface FlipCardProps {
  /**
   * Content to display on the front of the card
   */
  frontContent: React.ReactNode;

  /**
   * Content to display on the back of the card
   */
  backContent: React.ReactNode;

  /**
   * Whether the card is currently flipped to show the back
   */
  isFlipped: boolean;

  /**
   * Optional style to apply to the card container
   */
  style?: ViewStyle;
}

/**
 * A card component that can flip between front and back faces using 3D transforms
 */
export function FlipCard(props: FlipCardProps): React.ReactElement;

Dependencies { .dependencies }

react-native { .dependency }

Provides the View component and transform styling capabilities for creating the 3D flip effect.

@satisfied-by