react-native-slide-cards v0.0.2

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

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: 'john.doe@example.com' },
    { id: 69273842, name: 'Olivia Martinez', phoneNum: '+61 2 9876 5432', address: '5432 Dummy Road, Sydney, Australia 2000', email: 'olivia.martinez@example.com' },
    { id: 37294815, name: 'Alex Johnson', phoneNum: '+49 (0)30 9876 5432', address: '9876 Dummy Lane, Berlin, Germany 10115', email: 'alex.johnson@example.com' },
    { id: 49027486, name: 'Emily Brown ', phoneNum: '+33 (0)1 2345 6789', address: '3456 Dummy Street, Paris, France 75001', email: 'emily.brown@example.com' },
    { id: 51284759, name: 'William Wilson', phoneNum: '+81 3-1234-5678', address: '1234 Dummy Blossom Lane, Tokyo, Japan 100-0001', email: 'william.wilson@example.com' }
  ]

  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
  };
};