Fast and Flexible React Native Slider with zero-dependency.

Usage no npm install needed!

<script type="module">
  import kuasha420ReactNativeFlatlistSlider from 'https://cdn.skypack.dev/@kuasha420/react-native-flatlist-slider';


React Native FlatList Slider

Star IT Ltd

🔥 A Fast and Flexible Image Slider for React Native. It has lots of customization options and only uses Core React Native Components. Zero dependency! 🔥

  • Only uses core React & React Native exports. 🚀
  • Written as functional component using hooks. 🪝
  • Tons of customization options. 👗
  • Written on TypeScript. 🔵
  • Supports Web (react-native-web). 🌞


Install with your favorite package manager.

Using Yarn:

yarn add @kuasha420/react-native-flatlist-slider

Using NPM:

npm i @kuasha420/react-native-flatlist-slider


Just import the FlatListSlider component from the library and pass some slider images. All Props are optional and has a sensible default (Except images, because you know...).

import { FlatListSlider } from '@kuasha420/react-native-flatlist-slider';

// Plain array with image URLs
const images = [

// Local Assets using require syntax
const images = [

// Or a mix of both!
const images = [

export const App: React.FC<Props> = (props) => {
  return <FlatListSlider images={images} />;


Available Props (All Optional)

NOTE: If you are consuming the package in a TypeScript project, you'll get IntelliSense (autocomplete) of all the props with JSDoc Descriptions and type safety.

interface FlatListSliderProps {
  width: 'window' | number;
  preAppliedSpacing: number;
  images: Array<string | number | ImageURISource>;
  aspectRatio: number;
  resizeMode: ImageResizeMode;
  style: ViewStyle;
  duration: number;
  animated: boolean;
  showIndicator: boolean;
  indicatorSize: number;
  indicatorColor: string;
  indicatorActiveColor: string;
  indicatorShape: 'circle' | 'square' | 'rectangle' | 'line';
  pressable: boolean;
  onPressSlide: (index: number, event: GestureResponderEvent) => void;

Default Values

const defaultProps: FlatListSliderProps = {
  width: 'window',
  preAppliedSpacing: 0,
  aspectRatio: 1.78,
  resizeMode: 'contain',
  images: [],
  style: {},
  duration: 3000,
  animated: true,
  showIndicator: true,
  indicatorSize: 15,
  indicatorColor: '#111',
  indicatorActiveColor: '#fff',
  indicatorShape: 'circle',
  pressable: false,
  onPressSlide: (index, event) => (__DEV__ ? console.log({ index, event }) : console.log(index)),


This package is licensed under the MIT License.


Any kind of contribution is welcome. Thanks!