FlatList ⭐️

Platform

iOS	Android	Web
O	O	△

Overview

Basic usage

ScaleSwiper.tsx

import { ScaleSwiper } from 'react-native-awesome-swiper';

const Component = () => {
  const data: string[] = [
    'https://file.mk.co.kr/meet/neds/2022/06/image_readtop_2022_486646_16541333805062545.jpg',
    'http://file.mk.co.kr/meet/neds/2022/02/image_readtop_2022_104459_16440258224937758.jpg',
    'https://pbs.twimg.com/media/FoR4kypaMAA0Nm9?format=jpg&name=4096x4096',
  ];

  const { ref, refCallback } = useSwiperRefCallback<string>();

  return (
    <ScaleSwiper.Provider>
      <ScaleSwiper.FlatList
        data={data}
        refCallback={refCallback}
        renderItem={({ item }) => (
          <Image style={styles.image} source={{ uri: item }} />
        )}
      />
      <ScaleSwiper.DotIndicator
        onPress={(index: number) => {
          ref.current?.scrollToIndex({ index, animated: true });
        }}
      />
    </ScaleSwiper.Provider>
  );
};

Issues ✍️

• pagingEnabled props not working on web.

Props

ScaleSwiperProps extends all FlatListProps

slideCount

How many slide should be visible in screen. Only handles even number. odd number will be parsed to even number.

Type	Default	Required
number	2	NO

slideCount: 2

slideCount: 4

verticalAlign

vertical alignment fo slides beside center slide. itemHeight required for calculation.

Type	Default	Required
'top' | 'bottom' | 'center'	'center'	NO

itemHeight

item height. required when using verticalAlign. can use function to calculate height to keep ratio.

Type	Default	Required
number | (width: number) => number	undefined	NO

scaleDownRate

How much each items' scale should be decreased from center slide.

Type	Default	Required
number	0.14	NO

scaleDownRate: 0.14 (default)

scaleDownRate: 0.3

transform

transform type to use

Type	Default	Required
'scale' | 'scaleX' | 'scaleY'	'scale'	NO

refCallback

callback to use ref. see example above.

Type	Default	Required
Function	undefined	NO