1.0.0 • Published 8 years ago
react-native-triple-state-switch v1.0.0
react-native-triple-state-switch
React Native Triple State Switch

Installation
npm i react-native-triple-state-switch --saveSupported 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
| Property | Type | Default | Description |
|---|---|---|---|
| defaultActiveIndex | number | 0 | Item index which should be active when the component renders |
| primaryColor | string | #124E96 | Color of icon when in non-active state & Color of icon background when in active state |
| secondaryColor | string | white | Color of icon when in active state & Color of icon background when in non-active state |
| minValue | number | 0 | Min Value from left |
| maxValue | number | 115 | Max Value from right |
| leftStateiconName | string | Left Icon Name | |
| middleStateiconName | string | Middle Icon Name | |
| rightStateiconName | string | github | Right Icon Name |
| stateIconSize | number | 30 | Icon Size |
| switchShiftTime | number | 200 | Animation Timing in ms |
| itemContainer | style | null | individual Icon styling |
| itemsContainer | style | null | Icons container styling |
| floatingPointerStyle | style | null | The draggable component's styling |
| itemsContainerBackgroundStyle | style | null | Icons container's background styling. |
| onLeftState | function | () => {} | Function to be called when either the left Icon is pressed or the draggable component is dragged on top of it. |
| onMiddleState | function | () => {} | Function to be called when either the middle Icon is pressed or the draggable component is dragged on top of it. |
| onRightState | function | () => {} | Function to be called when either the right Icon is pressed or the draggable component is dragged on top of it. |
1.0.0
8 years ago