https://github.com/kiok46/react-native-triple-state-switch
React Native Triple State Switch
https://github.com/kiok46/react-native-triple-state-switch
android ios react react-native switch
Last synced: 10 months ago
JSON representation
React Native Triple State Switch
- Host: GitHub
- URL: https://github.com/kiok46/react-native-triple-state-switch
- Owner: kiok46
- License: mit
- Created: 2017-10-18T20:09:07.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-11-06T14:49:25.000Z (over 8 years ago)
- Last Synced: 2024-07-13T22:10:41.303Z (almost 2 years ago)
- Topics: android, ios, react, react-native, switch
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/react-native-triple-state-switch
- Size: 4.88 KB
- Stars: 15
- Watchers: 4
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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 (
{this.setState({bg: 'grey'})}}
onMiddleState={()=>{this.setState({bg: 'black'})}}
onRightState={()=>{this.setState({bg: 'brown'})}}
AnimatedIcon={AnimatedIcon}
middleStateIconName={'instagram'}
/>
);
}
}
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 | facebook | Left Icon Name |
| middleStateiconName | string | twitter | 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. |