react-native-customisable-switch

A React Native module that allows you to customize switch (style, form and animation), available for android and IOS.

Content

• Installation
• Examples
• Properties
• Questions

Installation

npm install --save react-native-customisable-switch

Examples

import React, { Component } from 'react';
import { Text, View } from 'react-native';
import Switch from 'react-native-customisable-switch';

export default class Test extends Component {
  constructor(props) {
    super(props);
    this.state = {
      switchOneValue: false,
      switchTwoValue: false,
      switchThreeValue: true,
    };
  }

  render() {
    const {
      switchOneValue,
      switchTwoValue,
      switchOneValue,
    } = this.state;

    return(
      <View style={styles.container}>
        <View style={styles.container}>
          <Switch
            value={switchOneValue}
            onChangeValue={() => this.setState({ switchOneValue: !switchOneValue })}
          />
        </View>
        <View style={styles.container}>
          <Switch
            value={switchTwoValue}
            onChangeValue={() => this.setState({ switchTwoValue: !switchTwoValue })}
            activeText={''}
            inactiveText={''}
            fontSize={16}
            activeTextColor={'rgba(255, 255, 255, 1)'}
            inactiveTextColor={'rgba(255, 255, 255, 1)'}
            activeBackgroundColor={'rgba(50, 163, 50, 1)'}
            inactiveBackgroundColor={'rgba(137, 137, 137, 1)'}
            activeButtonBackgroundColor={'rgba(255, 255, 255, 1)'}
            inactiveButtonBackgroundColor={'rgba(255, 255, 255, 1)'}
            switchWidth={70}
            switchHeight={30}
            switchBorderRadius={0}
            switchBorderColor={'rgba(0, 0, 0, 1)'}
            switchBorderWidth={0}
            buttonWidth={25}
            buttonHeight={25}
            buttonBorderRadius={0}
            buttonBorderColor={'rgba(0, 0, 0, 1)'}
            buttonBorderWidth={0}
            animationTime={150}
            padding={true}
          />
        </View>  
        <View style={styles.container}>
          <Switch
            value={switchThreeValue}
            onChangeValue={() => this.setState({ switchThreeValue: !switchThreeValue })}
            activeText={'On'}
            inactiveText={'Off'}
            fontSize={16}
            switchWidth={70}
            switchHeight={25}
            switchBorderRadius={12}
            switchBorderWidth={0}
            buttonWidth={25}
            buttonHeight={40}
            buttonBorderRadius={20}
            buttonBorderColor={'rgba(0, 0, 0, 1)'}
            buttonBorderWidth={0}
            animationTime={150}
            padding={true}
          />
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#464857',
    justifyContent: 'center',
    alignItems: 'center',
  },
)};

Component Properties

Property	Type	Default Value	Description
value	boolean	false	Switch value to determine whether or not the switch is active or inactive
onChangeValue	function	() => null	Function to handle the change of the value property
activeText	string	"On"	Text when the switch is activate
inactiveText	string	"Off"	Text when the switch is inactive
fontSize	number	16	Text Size for activeText and inactiveText
activeTextColor	string	"rgba(255, 255, 255, 1)"	Text color of activeText
inactiveTextColor	string	"rgba(255, 255, 255, 1)"	Text color of inactiveText
activeBackgroundColor	string	"rgba(50, 163, 50, 1)"	Background color of the switch while active
inactiveBackgroundColor	string	"rgba(137, 137, 137, 1)"	Background color of the switch while inactive
switchWidth	number	70	Width of the switch
switchHeight	number	30	Height of the switch
switchBorderRadius	number	15	Border radius of the switch
switchBorderColor	string	"rgba(0, 0, 0, 1)"	Border color of the switch
switchBorderWidth	number	0	Border width of the switch
buttonWidth	number	25	Width of the button in the switch
buttonHeight	number	25	Height of the button in the switch
buttonBorderRadius	number	15	Border radius of the button in the switch
buttonBorderColor	string	"rgba(0, 0, 0, 1)"	Border color of the button in the switch
buttonBorderWidth	number	0	Border width of the button in the switch
animationTime	number	150	Time of toggle animation in milliseconds
padding	boolean	true	Whether the switch has a horizontal padding of 5 or not

Questions

Create an issue (https://github.com/baderahmed/react-native-customisable-switch/issues)