Minimal Flash Swiper Component For React Native

A lightweight, blazing-fast swiper (carousel) component for React Native powered apps.

How to use it:

1. Installation.

# Yarn
$ yarn add react-native-flash-swiper

# NPM
$ npm i react-native-flash-swiper

2. Import the flash swiper component.

import * as React from 'react'
import { SafeAreaView, View, StyleSheet } from 'react-native'
import { FlashSwiper } from 'react-native-flash-swiper'
import { Card } from '@components'

3. Create a swiper component.

const App = () => {
  const data = [
    {component: <Card description="Desc 1", image={require('1.jpg')} />, key: 1},
    {component: <Card description="Desc 2", image={require('2.jpg')} />, key: 2},
    {component: <Card description="Desc 3", image={require('3.jpg')} />, key: 3},
    // ...
  ]
  const { container } = styles;
  return (
    <SafeAreaView style={container}> 
      <View>
        <FlashSwiper
          components={data} 
          color='black'
          innerDotBorderColor='white'
          innerDotBackground='black'
        />
      </View>
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1, 
    justifyContent: 'center',
    alignItems: 'center',
    // styles
  }
})

4. Available props.

/**
 * if you want to swipe components
 */
components: Array[{key: number, component: JSX.Element}]

/**
 * color of wrapper dot
 */
color?: ViewProps.backround.color

/**
 * border color of inner dot
 */
innerDotBorderColor?: ViewProps.borderColor.color

/**
 * color of inner dot
 */
innerDotBackground?: ViewProps.backround.color

/**
 * this is need for current page handle
 */
selected?: true | false

Preview:

Download Details:

Author: bedirhangull

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/bedirhangull/react-native-flash-swiper

License: MIT