@sksmoothui/react-native-animated-horizontal-flatlist

The NEW UI/UX Animated FlatList module.

Demo

| Blur Layout AutoPlay | Normal | | --------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | | | |

Dependencies

No need to manually install dependencies.

How to Start

First install

npm i @sksmoothui/react-native-animated-horizontal-flatlist --save

Import

import AnimatedFlatList from '@sksmoothui/react-native-animated-horizontal-flatlist';

Basic Usage

import React, { useState } from "react";
import {
  View,
  Text,
} from "react-native";
import AnimatedFlatList from '@sksmoothui/react-native-animated-horizontal-flatlist';

export const Example = () => {
  const [data, setData] = useState([
    {
      id: "0",
      author: "Alejandro Escamilla",
      source: { uri: "https://picsum.photos/id/0/5000/3333" },
    },
    {
      id: "1",
      author: "Alejandro Escamilla",
      source: { uri: "https://picsum.photos/id/1/5000/3333" },
    },
    {
      id: "2",
      author: "Alejandro Escamilla",
      source: { uri: "https://picsum.photos/id/2/5000/3333" },
    },
    {
      id: "3",
      author: "Alejandro Escamilla",
      source: require("./sample.jpeg"),
    },
  ]);
  return (
    <AnimatedFlatList
      data={data}
      autoplay
      blurMode
      // blurPercent={0.4}
      renderItem={({ item, index }) => {
        return (
          <View
            style={{
              flex: 1,
              justifyContent: "flex-end",
              margin: 20,
            }}
          >
            <Text
              style={{
                color: "white",
                fontSize: 22,
              }}
            >
              {item?.author}
            </Text>
            <Text style={{ color: "white", paddingVertical: 4 }}>
              Pease write the description for the item {index}
            </Text>
          </View>
        );
      }}
    />
  );
};

Properties

| Property | Type | Required/Optional | Default | Discription | | ------------------- | -------- | ------------ | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------- | | autoplay| Boolean | OPTIONAL | false |Start autoplay like carousal. | | autoplayTimeout| Number | OPTIONAL | 1400 |AutoPlay timeOut.| | blurMode| Boolean | OPTIONAL | false |Blur layer show if on. | | blurPercent| Number | OPTIONAL | 0.5 |opacity 0-1. | | themeColor | String | OPTIONAL | purple |Color used in paginator. |