To implement a list with react-native-gesture-flip-card, you can follow these steps to create a simple demo. In this demo, we will use the FlatList component from React Native to render a list of flip cards that can be flipped using react-native-gesture-flip-card.

  1. Set Up a New React Native Project: If you haven't already, create a new React Native project using the following command:

    bash
    npx react-native init FlipCardDemo
  2. Install Dependencies: Navigate to your project directory and install the required packages:

    bash
    cd FlipCardDemo npm install react-native-gesture-flip-card
  3. Create a FlipCard Component: Create a new file named FlipCard.js in the src folder of your project. This component will represent a single flip card.

    javascript
    import React, { useRef } from 'react'; import { View, Text, StyleSheet } from 'react-native'; import FlipCard from 'react-native-gesture-flip-card'; const Card = ({ item }) => { const flipCardRef = useRef(null); return ( <FlipCard ref={flipCardRef}> {/* Front Side */} <View style={styles.card}> <Text style={styles.cardText}>Front Side</Text> </View> {/* Back Side */} <View style={[styles.card, styles.cardBack]}> <Text style={styles.cardText}>Back Side</Text> </View> </FlipCard> ); }; const styles = StyleSheet.create({ card: { width: 200, height: 200, backgroundColor: 'skyblue', justifyContent: 'center', alignItems: 'center', borderRadius: 10, backfaceVisibility: 'hidden', }, cardBack: { backgroundColor: 'orange', }, cardText: { fontSize: 18, fontWeight: 'bold', color: 'white', }, }); export default Card;
  4. Create the Main App Component: In the App.js file in the src folder, create the main component that will render the list of flip cards.

    javascript
    import React from 'react'; import { SafeAreaView, FlatList } from 'react-native'; import Card from './FlipCard'; const DATA = Array.from({ length: 10 }, (_, index) => ({ id: index.toString() })); const App = () => { const renderItem = ({ item }) => <Card item={item} />; return ( <SafeAreaView> <FlatList data={DATA} renderItem={renderItem} keyExtractor={(item) => item.id} /> </SafeAreaView> ); }; export default App;
  5. Run the App: Save the files, and then run your app using the following command:

    bash
    npx react-native run-android # or npx react-native run-ios

    This will launch the app on your Android or iOS simulator, and you should see a list of flip cards. When you tap on each card, it will flip to reveal the backside.

That's it! You've successfully implemented a simple list with react-native-gesture-flip-card. Each item in the list represents a flip card that can be flipped to show the front and back sides. You can further customize the cards and add more content to them according to your requirements.

Have questions or queries?
Get in Touch