React-native-da-slider NPM

react-native-da-slider

This component does not relly on other libs besides react-native.

The component uses nothing but react-native and PropTypes.

Contributing

Despite this is not a elaborated component, every contributing is very welcomed.

If you find using the component and having some problem, please file one ISSUE

If you think that you can improve the component, please open one PR

Instalation

yarn add react-native-da-slider

Usage

Basic

The slider will take the space of the parent container and the slider pages, will have diferent heights. No autoplay, loop or any customization.

<Slider
  pages={[
    () => <View style={{ backgroundColor: 'red', flex: 1 }}>
      <Text>Open up App.js to start working on your app!</Text>
    </View>
    ,
    () => <View style={{ backgroundColor: 'blue', height: 100 }}>
      <Text>Open up App.js to start working on your app!</Text>
    </View>
    ,
    () => <View style={{ backgroundColor: 'red', flex: 0.5 }}>
      <Text>Open up App.js to start working on your app!</Text>
    </View>
    ,
    () => <View style={{ backgroundColor: 'blue', height: 100 }}>
      <Text>Open up App.js to start working on your app!</Text>
    </View>
    ,
    () => <View style={{ backgroundColor: 'red', height: 100, }}>
      <Text>Open up App.js to start working on your app!</Text>
    </View>
    ,
    () => <View style={{ backgroundColor: 'blue', height: 100 }}>
      <Text>Open up App.js to start working on your app!</Text>
    </View>
  ]}
  >
</Slider>

With some features

<Slider
  loop
  autoplay
  height={100}
  autoplayInterval={2000}
  defaultPaginationActiveColor="black"
  defaultPaginationInactiveColor="blue"
  pages={[
    () => <View style={{ backgroundColor: 'red', height: 100, }}>
      <Text>Open up App.js to start working on your app!</Text>
    </View>
    ,
    () => <View style={{ backgroundColor: 'blue', height: 100 }}>
      <Text>Open up App.js to start working on your app!</Text>
    </View>
    ,
    () => <View style={{ backgroundColor: 'red', height: 100, }}>
      <Text>Open up App.js to start working on your app!</Text>
    </View>
    ,
    () => <View style={{ backgroundColor: 'blue', height: 100 }}>
      <Text>Open up App.js to start working on your app!</Text>
    </View>
    ,
    () => <View style={{ backgroundColor: 'red', height: 100, }}>
      <Text>Open up App.js to start working on your app!</Text>
    </View>
    ,
    () => <View style={{ backgroundColor: 'blue', height: 100 }}>
      <Text>Open up App.js to start working on your app!</Text>
    </View>
  ]}
>
</Slider>

Structure

example - This folder has one usage example with expo. You can do yarn start.
Slider - The component that you will use

Props

Prop	Default	Type	Description
pages	isRequired	`array`	One array of function, where each function returns the page to be rendered by the splider
overridePagination	false	'bool'	One boolean indicating if the component default pagination will be rendered
renderCustomPagination	() => {	'function'	This callback allows you to add custom element to the default pagination element
autoplay	false	`bool`	One boolean to indicate if the slider is on autoplay mode or not
autoplayInterval	2000	`number`	The number of milliseconds between each autoplay loop.
loop	false	'bool'	Indicates if the component should allow to loop. Go from last index to the first and oposite
onIndexChange	() => {}	'function'	One callback that will be called each time the index of sliding page has already changed.
height	undefined	number	This props lets you specify the height of the slider. The default will lead to flex meaning it will default to the slider container sizes. Use height to set slider container size
defaultPaginationActiveColor	black	'string	This string is the color to be used on the active page dot, when default pagination is not overriden
defaultPaginationInactiveColor	white	'string	This string is the color to be used on the inactive page dot, when default pagination is not overriden