1.0.0 • Published 7 years ago

react-native-triple-state-switch v1.0.0

Weekly downloads
10
License
MIT
Repository
github
Last release
7 years ago

react-native-triple-state-switch

React Native Triple State Switch

events animated

Installation

npm i react-native-triple-state-switch --save

Supported Platforms

iOS and Android

Usage example

import TrippleToggleSwitch from './TrippleToggleSwitch';
import Icon from 'react-native-vector-icons/FontAwesome';
const AnimatedIcon = Animated.createAnimatedComponent(Icon);

export default class App extends Component {

  constructor(props) {
      super(props)

      this.state = {
          bg: 'brown'
      }
  }

  render() {
    return (
      <View style={[styles.container, {backgroundColor: this.state.bg}]}>
	    <TrippleToggleSwitch
            onLeftState={()=>{this.setState({bg: 'grey'})}}
            onMiddleState={()=>{this.setState({bg: 'black'})}}
            onRightState={()=>{this.setState({bg: 'brown'})}}
            AnimatedIcon={AnimatedIcon}
            middleStateIconName={'instagram'}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },

});

API

PropertyTypeDefaultDescription
defaultActiveIndexnumber0Item index which should be active when the component renders
primaryColorstring#124E96Color of icon when in non-active state & Color of icon background when in active state
secondaryColorstringwhiteColor of icon when in active state & Color of icon background when in non-active state
minValuenumber0Min Value from left
maxValuenumber115Max Value from right
leftStateiconNamestringfacebookLeft Icon Name
middleStateiconNamestringtwitterMiddle Icon Name
rightStateiconNamestringgithubRight Icon Name
stateIconSizenumber30Icon Size
switchShiftTimenumber200Animation Timing in ms
itemContainerstylenullindividual Icon styling
itemsContainerstylenullIcons container styling
floatingPointerStylestylenullThe draggable component's styling
itemsContainerBackgroundStylestylenullIcons container's background styling.
onLeftStatefunction() => {}Function to be called when either the left Icon is pressed or the draggable component is dragged on top of it.
onMiddleStatefunction() => {}Function to be called when either the middle Icon is pressed or the draggable component is dragged on top of it.
onRightStatefunction() => {}Function to be called when either the right Icon is pressed or the draggable component is dragged on top of it.