Skip to main content

AutoCarousel

Reusable AutoCarousel component

Example

import {
AutoCarousel,
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 CarouselWidget = () => {
const [styles] = useStyles(stylesFn);

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

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
keyExtractor

TYPE
(item: T, index?: number) => string

Required
itemWidth

TYPE
number

sideMargin

TYPEDEFAULT
number10

Margin for items

loading

TYPEDEFAULT
booleanfalse

loading for extraData

onPressItem

TYPE
(item: T) => void

activeItemId

TYPE
string

ActiveItemId for initScroll

isDots

TYPEDEFAULT
booleanfalse

IsDots for showing dots

averageItemLength

TYPE
number

AverageItemLength for onScrollToIndexFailed

animateAutoScroll

TYPEDEFAULT
animatedfalse

onActiveChange

TYPE
(item: T) => void

Returned active element

align

TYPEDEFAULT
ICarouselAlignICarouselAlign.start

ms

TYPEDEFAULT
number2000

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