react-native-snap-slider

Provide snap control for Slider

Originally, this project was created to add snap control for SliderIOS.

The newly updated Slider component already provide similar function by the "step" Props

This component can have different "step" values and labels.

Install

Install the package:

$ npm i react-native-snap-slider --save

Usage

'use strict';

var React = require('react-native');
var SnapSlider = require('react-native-snap-slider');

var {
    AppRegistry,
    StyleSheet,
    Text,
    View,
} = React;

var snapslider = React.createClass({
    sliderOptions: [
        {value: 0, label: 'item A'},
        {value: 1, label: 'item B'},
        {value: 2, label: 'item C'},
        {value: 3, label: 'item D'},
    ],
    getInitialState() {
        return {
            defaultItem: 2,
        };
    },
    slidingComplete(itemSelected) {
        console.log("slidingComplete");
        console.log("item selected " + this.refs.slider.state.item);
        console.log("item selected(from callback)" + itemSelected);
        console.log("value " + this.sliderOptions[this.refs.slider.state.item].value);
    },
    render: function() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>
                    SnapSlider Example!
                </Text>
                <SnapSlider ref="slider" containerStyle={styles.snapsliderContainer} style={styles.snapslider}
                    itemWrapperStyle={styles.snapsliderItemWrapper}
                    itemStyle={styles.snapsliderItem}
                    items={this.sliderOptions}
                    labelPosition="bottom"
                    defaultItem={this.state.defaultItem}
                    onSlidingComplete={this.slidingComplete} />
            </View>
        );
    }
});

var styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },

    snapsliderContainer: {
    },
    snapslider: {
    },
    snapsliderItemWrapper: {
    },
    snapsliderItem: {
    }
});
AppRegistry.registerComponent('snapslider', () => snapslider);

Props

Prop | Type | Optional | Default | Description --------------------- | -------- | -------- | ------------------------- | ----------- containerStyle | style | Yes | | The style for the slider container style | style | Yes | | Style for the slider, append to the SliderIOS style itemWrapperStyle | style | Yes | | Style for the items label container itemStyle | style | Yes | | Style for the individual item items | Array | No | | Item list, in JSON Array [{value: 0, label: 'Item A'}...{}] defaultItem | Number | No | | The default item in slider, first item is 0 labelPosition | String | "bottom" | | The label position, "bottom" or "top"

Example

Running the example:

$ cd Example/snapslider
$ npm install

Open the ios/snapslider.xcodeproj with Xcode

License

MIT.