react-native-slide-cards

"react-native-slide-cards" is an easy-to-use React Native package that allows you to turn your data into animated sliding cards. It is suitable for simple and medium-sized projects, and simplifies the process of creating interactive cards.

This package is simply built by me using expo and Moti with function-based components.

Installation

To use "react-native-slide-cards," you can install it using npm:

npm install react-native-slide-cards

Properties

| Property | Description | Type | Default | |----------------------|-----------------------------------------------|-------------------|------------| | cards | The data array used to create the cards (required) | array | - | | closeness | The closeness level of the cards | number | 1.5 | | cardHeight | The height of the cards | number | 230 | | radius | The border radius of the cards | number | 50 | | damping | dumping rate | number | 15 | | mass | mass rate | number | 1 | | duration | The animation duration | number | 300 | | gap | The distance between cards when opened | number | - | | headerImagePressability | Whether the image in the header is clickable | boolean | true | | cardPress | The function triggered when a card is pressed | function | - | | headerAppearance | The appearance layout of the header | object | { left: ['image', 'title'], middle: [], right: ['icon'] } | | cardBackgroundTag | The data array key for the background image in the card | string | - | | cardBackgroundBlur | The blur level of the card background (0-100) | number | - | | headerTextTag | The data array key for the header text | string | - | | headerImageTag | The data array key for the header image | string | - | | headerIconTag | The data array key for the header icon | string | - | | headerIconPress | The function triggered when the header icon is pressed | function | - | | headerImagePress | The function triggered when the header image is pressed | function | - | | headerIconVisibility| The visibility of the header icon | boolean | true | | headerImageStyle | The style of the header image | object | - | | headerTextStyle | The style of the header text | object | - | | headerIconStyle | The style of the header icon | object | - | | mode | The view mode ('light' or 'dark') | string | 'light' | | cardColor | The background color(s) of the cards | array | - | | mainContent | The main content of the card | function | - | | cardBackgroundUrl | The URL for the card background image | string | - | | headerIcon | Custom icon view | - | - |

Example

import { ScrollView, StyleSheet, Text, View } from 'react-native';
import { SlidingCards } from 'react-native-slide-cards'
import React from "react";

export default function App() {
  const myData = [
    { id: 15412678, name: 'John Doe', phoneNum: '+1 (555) 123-4567', address: '1234 Dummy Street, Springfield, CA 12345', email: '[email protected]' },
    { id: 69273842, name: 'Olivia Martinez', phoneNum: '+61 2 9876 5432', address: '5432 Dummy Road, Sydney, Australia 2000', email: '[email protected]' },
    { id: 37294815, name: 'Alex Johnson', phoneNum: '+49 (0)30 9876 5432', address: '9876 Dummy Lane, Berlin, Germany 10115', email: '[email protected]' },
    { id: 49027486, name: 'Emily Brown ', phoneNum: '+33 (0)1 2345 6789', address: '3456 Dummy Street, Paris, France 75001', email: '[email protected]' },
    { id: 51284759, name: 'William Wilson', phoneNum: '+81 3-1234-5678', address: '1234 Dummy Blossom Lane, Tokyo, Japan 100-0001', email: '[email protected]' }
  ]

  const mainContent = (data) => {
    return (
      <View style={{ width: '100%', height: '100%' }}>
        <Text>{data.phoneNum}</Text>
        <Text>{data.email}</Text>
        <Text>{data.address}</Text>
      </View>
    )
  }

  return (
    <View style={styles.container}>
      <ScrollView style={{ width: '100%' }}>
        <SlidingCards
          cards={myData}
          headerTextTag={'name'}
          mainContent={mainContent}
        />
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#000000',
    alignItems: 'center',
  },
});

Dependencies

moti

expo-linear-gradient

react-native-gesture-handler

react-native-reanimated

Notes

Make sure the dependencies required for this package are compatible with your react-native and expo version.

This package is using react-native-reanimated. Update your babel.config file as follows

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['react-native-reanimated/plugin'], <-- add this
  };
};