React-native-flatlist-withindicator NPM

react-native-flatlist-withindicator

npm npm

Description

react-native-flatlist-withindicator is a package that extends the functionality of the original React Native FlatList component. It provides customizable indicators to display the current active item in a horizontal list.

Features

Customize indicators to show the current active item
Enhance user experience with visual indicators
Built on top of the original React Native FlatList component

Installation

To install the package, run the following command:

official documentation on how to Installation - React Native Reanimated

npm install react-native-flatlist-withindicator

yarn add react-native-flatlist-withindicator

Usage

import * as React from 'react';
import { StyleSheet, View, Text, ScrollView } from 'react-native';
import {
  FlatListWithCircularIndicator,
  FlatListWithRectangleIndicator,
} from 'react-native-flatlist-withindicator';

const marginValue = 10;
const cardWidth = 200;

const Card = ({ item }) => {
  return (
    <View
      style={[
        { marginRight: marginValue, width: cardWidth },
        styles.cardContainer,
      ]}
    >
      <Text style={styles.cardText}>{item}</Text>
    </View>
  );
};

export default function App() {
  const data = [1, 2, 3];
  return (
    <ScrollView style={styles.container}>
      <View style={styles.flatListContainer}>
        <FlatListWithRectangleIndicator
          renderItem={({ item }) => <Card item={item} />}
          data={data}
          cardWidthPlusMarginValue={cardWidth + marginValue}
          keyExtractor={(_, index) => index.toString()}
        />
      </View>
      <View style={styles.flatListContainer}>
        <FlatListWithRectangleIndicator
          renderItem={({ item }) => <Card item={item} />}
          data={data}
          cardWidthPlusMarginValue={cardWidth + marginValue}
          keyExtractor={(_, index) => index.toString()}
          animationScaleFactor={0.57}
        />
      </View>
      <View style={styles.flatListContainer}>
        <FlatListWithCircularIndicator
          renderItem={({ item }) => <Card item={item} />}
          data={data}
          cardWidthPlusMarginValue={cardWidth + marginValue}
          keyExtractor={(_, index) => index.toString()}
          animationScaleFactor={0.57}
        />
      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  cardContainer: {
    alignItems: 'center',
    justifyContent: 'center',
    alignContent: 'center',
    backgroundColor: 'lightblue',
    height: 200,
    borderRadius: 10,
  },
  flatListContainer: { marginTop: 30 },
  text: { marginLeft: 10, fontSize: 14, fontWeight: '500' },
  cardText: { fontSize: 20, fontWeight: '800' },
});

Shared Props

Shared Props Table:

Name	Type	Required/Optional	Description
`activeIndicatorColor`	`string`	Optional	The color of the active indicator.
`inActiveIndicatorColor`	`string`	Optional	The color of the inactive indicators.
`data`	`Array<any>`	Required	An array of data items to be rendered in the list.
`cardWidthPlusMarginValue`	`number`	Required	The width of each list item plus any margin or padding.
`animationScaleFactor`	`number`	Optional	The scaling and animation factor for the indicators. Default value is `1`.
`containerStyle`	`ViewStyle`	Optional	Additional styles to be applied to the container view.
`indicatorContainerStyle`	`ViewStyle`	Optional	Additional styles to be applied to the indicator container view.
`customsIndicatorStyle`	`ViewStyle`	Optional	Additional styles to be applied to the custom indicators.
`isRTL`	`boolean`	Optional	Determines if the layout is right-to-left. Default value is based on the device's language settings.
`passOnScrollEvent`	`(event) => void`	Optional	Passes the `onScroll` event from the parent component to the child component.

Note: Any other props accepted by the React Native FlatList component can also be used with react-native-flatlist-withindicator. However, please be aware that the following props are excluded from the standard FlatList component:

horizontal: This prop is not applicable since it is designed to display a horizontal list.
showsHorizontalScrollIndicator: This prop is not applicable since it handles its own indicator display.
The onScroll prop is not applicable . Instead, you can use the passOnScrollEvent prop to achieve the onScroll functionality.

FlatList With Rectangle Indicator Props (Extends Shared Props):

Name	Type	Required/Optional	Description
`activeIndicatorWidth`	`number`	Optional	The width of the active indicator. Default value is `32`
`inactiveIndicatorWidth`	`number`	Optional	The width of the inactive indicator.Default value is `12`

FlatList With Circular Indicator Props (Extends Shared Props):

Name	Type	Required/Optional	Description
`circleRadius`	`number`	Optional	The radius of the circular indicator.Default value is `10`

animationScaleFactor Prop

The animationScaleFactor prop is an optional number prop that determines the scaling and animation factor for the indicators. The default value is 1, It controls the scale and intensity of the animation applied to the indicators as the user scrolls through the list.