react-native-unlock-slider v1.0.6

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

Extend existing library. Credit to: gutioliveira.