react-native-view-slider

A robust simple lightweight library for sliding views/images/anything in react-native applications.

• Support -> React native => 0.59.0 -> This module will support both expo managed application and bare react native applications.

Install the library

npm i react-native-view-slider

Import

import ViewSlider from 'react-native-view-slider'

Using in application

import React from 'react';
import {
StyleSheet,
View,
Text,
Dimensions,
Image
} from 'react-native';
import ViewSlider from 'react-native-view-slider'

const { width, height } = Dimensions.get('window');

function App() {
  return (
    <>
      <ViewSlider 
        renderSlides = {
          <>
            <View style={styles.viewBox}>
              <Image source={{uri: 'https://image.shutterstock.com/image-photo/beautiful-autumn-scene-hintersee-lake-260nw-747646759.jpg'}} style={{height: 200, width}}/>
            </View>
            <View style={styles.viewBox}><Text>TWO</Text></View>
            <View style={styles.viewBox}><Text>THREE</Text></View>
            <View style={styles.viewBox}><Text>FOUR</Text></View>
         </>
      }
      style={styles.slider}     //Main slider container style
      height = {200}    //Height of your slider
      slideCount = {4}    //How many views you are adding to slide
      dots = {true}     // Pagination dots visibility true for visibile 
      dotActiveColor = 'red'     //Pagination dot active color
      dotInactiveColor = 'gray'    // Pagination do inactive color
      dotsContainerStyle={styles.dotContainer}     // Container style of the pagination dots
      autoSlide = {true}    //The views will slide automatically
      slideInterval = {1000}    //In Miliseconds
     />
    </>
  );
};

const styles = StyleSheet.create({
  viewBox: {
      paddingHorizontal: 20,
      justifyContent: 'center',
      width: width,
      padding: 10,
      alignItems: 'center',
      height: 150
  },
  slider: {
      alignSelf: 'center',
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: 'pink'
  },
  dotContainer: {
    backgroundColor: 'transparent',
    position: 'absolute',
    bottom: 15
  }
});

export default App;

Props

• renderSlides : Views/sliders content
• style : slider container style[ Full customize your slider container with style prop ]
• height : Your slider height
• slideCount : Number of slides you are giving [Required]
• dots : default false [If you want the slider dots to be shown set it to true]
• dotActiveColor : active dot color
• dotInactiveColor : Inactive dot color
• dotsContainerStyle
• autoSlide : The views will slide automatically
• slideInterval : In Miliseconds