/react-native-snap-slider

A React Native component, provide different "step" values and labels for Slider

Primary LanguageJavaScriptMIT LicenseMIT

react-native-snap-slider

Provide snap control for Slider

npm version npm downloads npm licence

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.

Demo

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.