react-native-tinder-cards-view v1.0.1

react-native-tinder-cards-view

A high performance, beautiful and fully customizable Animated swipe card list for React Native without any third party library and support pagination.

Getting started

npm install react-native-tinder-cards-view --save

or

yarn add react-native-tinder-cards-view

Important Note

For the best experience in your app we prefer adding images with FastImage plugin.

React Native FastImage is a quick way to load images in React Native. All loaded pictures are aggressively cached by FastImage. You may add your own auth headers and preload pictures to your requests. GIF caching is also supported by react-native-fast-image.

To get started with React Native FastImage, first, add the FastImage component to your project:

yarn add react-native-fast-image

or

npm install –save react-native-fast-image

Platforms Supported

• iOS
• Android

Demo

Props

Style props

Methods

You can use Reference to swipe cards programmatically.

• swipeCardRight
• swipeCardLeft

Swipe Card Right

Swipe current card to the right programmatically using reference:

swiperRef.current?.swipeCardRight();

Swipe Card Left

Swipe current card to the left programmatically using reference:

swiperRef.current?.swipeCardLeft();

Example

import React, {useRef, useState} from 'react';
import {Button, SafeAreaView, Text, View} from 'react-native';
import {AnimatedSwiper, AnimatedSwiperRef} from 'react-native-tinder-cards-view';
import {staticData} from './static/data';

const App = () => {
    /**
     * Swiper reference to make swipe programmatically.
     */
    const swiperRef = useRef<AnimatedSwiperRef>(null);
    const [data, setData] = useState(staticData);

    /**
     * Load more data.
     */
    const loadMore = () => {
        setData(prev => [...prev, ...staticData]);
    }

    return (
        <SafeAreaView>
            <AnimatedSwiper
                ref={swiperRef}
                actionOffset={50}
                renderEmptyComponent={() => (
                    <View style={{height: '100%', justifyContent: 'center', alignItems: 'center'}}>
                        <Text style={{color: 'red'}}>Test empty</Text>
                    </View>
                )}
                data={dataList}
                renderItem={({item}) => (
                    <CardItem image={item.image} name={item.name}/>
                )}
                cardsLeftToCallLoadMore={2}
                onEndReached={() => loadMore()}
                onSwipeRight={item => console.log('swipe right', item)}
                onSwipeLeft={item => console.log('swipe left', item)}
            />
            <Button
                title={'Swipe right programmatically'}
                onPress={() => swiperRef.current?.swipeCardRight()}
            />
            <Button
                title={'Swipe left programmatically'}
                onPress={() => swiperRef.current?.swipeCardLeft()}
            />
        </SafeAreaView>
    )
}

Card Item template:

import React from 'react';
import {Text, View} from 'react-native';
import FastImage from 'react-native-fast-image';
import {styles} from './styles';

const CardItem = ({image, name}: {image: string; name: string}) => {
  return (
    <View style={styles.card}>
      <FastImage style={styles.image} source={{uri: image, priority: FastImage.priority.high}} />
      <Text style={styles.text}>{name}</Text>
    </View>
  );
};

export default CardItem;

Demo App

For full working example you can check it on github from here.

Credit

This package created by Louay Sleman.