@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. |
