1.0.0 • Published 7 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 --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
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
7 years ago