mvpdream / react-native-unlock-slider

react-native-unlock-slider

Unlock sliding button with slider thumb and background styling.

Install

npm i --save react-native-unlock-slider

Usage

import React from 'react';
import {Text, Image, Alert, View} from 'react-native';

import Slider from 'react-native-unlock-slider'

const App = () => {
  return (
    <View>
        <Slider
            isLeftToRight={true} // set false to move slider Right to Left
            childrenContainer={{ backgroundColor: 'rgba(255,255,255,0.0)'}}
            slideOverStyle={{backgroundColor: 'yellow',borderBottomLeftRadius:5, borderBottomRightRadius: 5, borderTopLeftRadius: 5, borderTopRightRadius: 5 }}
            onEndReached={() => {
              Alert.alert('Attention', 'Unlocked!');
            }}
            isOpacityChangeOnSlide={true}
            containerStyle={{
              margin: 8,
              backgroundColor: 'white',
              borderRadius: 10,
              overflow: 'hidden',
              alignItems: 'center',
              justifyContent: 'center',
            }}
            thumbElement={
              <Image
                  style={{
                    width: 50,
                    margin: 4,
                    borderRadius: 5,
                    height: 50,
                    backgroundColor: 'red',
                  }}
                  source={{
                    uri:
                        'https://facebook.github.io/react-native/docs/assets/favicon.png',
                  }}
              />
            }
        >
          <Text style={{fontWeight: '700'}}>{'PLEASE SLIDE TO UNLOCK PHONE'}</Text>
        </Slider>
    </View>
  );
};

export default App;

Props

Prop	Type	Optional	Default	Description
childrenContainer	Object	Yes	{}	Use to provide style to children component
containerStyle	Object	Yes	{}	set container style
slideOverStyle	Object	Yes	{backgroundColor: 'rgba(255,255,255,0.0)', borderBottomRightRadius: 0, borderTopRightRadius: 0},	set thumb leaving side color, while sliding from left to right.
isOpacityChangeOnSlide	Bool	Yes	false	Reduce opacity of child component while sliding.
thumbElement	Element	Yes	<View style={{ width: 50, height: 50, backgroundColor: 'green' }} />	Slider thumb view, add any other view
onEndReached	Function	Yes	() => {}	Callback function call when slider reached to end
isLeftToRight	Bool	Yes	true	If isLeftToRight = false then slider move Right to Left direction, by default move left to right.

---

Extend existing library. Credit to: gutioliveira.