LoopCarousel

Reusable LoopCarousel component

Example

import {
  LoopCarousel,
  createStyles,
  rem,
  Typography,
  useStyles,
  View,
} from '@lad-tech/mobydick-core';

const data: number[] = [1, 2, 3, 4, 5, 6];
const ITEM_WIDTH = rem(80);

export const LoopCarouselWidget = () => {
  const [styles] = useStyles(stylesFn);

  return (
      <LoopCarousel
        data={data}
        sliderItem={item => (
          <View style={[styles.blockView, {width: ITEM_WIDTH}]}>
            <Typography>{item}</Typography>
          </View>
        )}
        itemWidth={ITEM_WIDTH}
        sideMargin={2}
      />
  );
};

const stylesFn = createStyles(({spaces, colors}) => ({
  container: {
    gap: spaces.Space16,
  },
  blockView: {
    backgroundColor: colors.BgAccent,
    aspectRatio: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
}));

Props

FlatList Props

Inherits FlatList Props.

Required

data

TYPE
ArrayLike

Data for Carousel

Required

sliderItem

TYPE
(item: T, index: number, data: ArrayLike) => ReactElement

Required

itemWidth

TYPE
number

sideMargin

TYPE	DEFAULT
number	10

Margin for items

loading

TYPE	DEFAULT
boolean	false

loading for extraData

onPressItem

TYPE
(item: T) => void

activeItemId

TYPE
string

ActiveItemId for initScroll

isDots

TYPE	DEFAULT
boolean	false

IsDots for showing dots

averageItemLength

TYPE
number

AverageItemLength for onScrollToIndexFailed

animateAutoScroll

TYPE	DEFAULT
animated	false

onActiveChange

TYPE
(item: T) => void

Returned active element

align

TYPE	DEFAULT
ICarouselAlign	ICarouselAlign.start

isScrolling

TYPE	DEFAULT
boolean	false

IsScrolling for autoscroll

ms

TYPE	DEFAULT
number	2000

Timer for autoscroll in milliseconds

indexScroll

TYPE
number

Index to which the carousel will scroll

dotSize

TYPE
number

Dot's element Size

activeDotColor

TYPE
string

Color active dot's element

passiveDotColor

TYPE
string

Color other dot's elements

dotsStyles

TYPE
ViewStyle

Custom styles for dots container