⚠️⚠️⚠️ WIP ⚠️⚠️⚠️
@alejandrocortell/react-native-multiswitch
Device Information for React Native.
Install
Using npm:
npm i @alejandrocortell/react-native-multiswitch
or using yarn:
yarn add @alejandrocortell/react-native-multiswitch
Usage
import MultiSwitch from 'react-native-multiswitch'
export const App = () => {
const items = ['On', 'Off']
const [value, setValue] = useState(items[0])
return (
<MultiSwitch
items={items}
value={value}
onChange={(val) => setValue(val)}
/>
)
}
Props
| Prop | Type | Default | Required |
|---|
| items | string[] | | true |
| value | string | | true |
| onChange | (value: string) => void | | true |
| disabled | boolean | false | false |
| mediumHeight | boolean | false | false |
| bigHeight | boolean | false | false |
| containerStyle | ViewStyle | {} | false |
| sliderStyle | ViewStyle | {} | false |
| textStyle | TextStyle | {} | false |
Examples
<MultipleSwitch
items={items}
value={value}
onChange={(val) => setValue(val)}
/>
// Medium height
<MultipleSwitch
items={items}
value={value}
onChange={(val) => setValue(val)}
mediumHeight
/>
// Big height and disabled
<MultipleSwitch
items={items}
value={value}
onChange={(val) => setValue(val)}
bigHeight
disabled
/>
// Custom styles
<MultipleSwitch
items={items}
value={value}
onChange={(val) => setValue(val)}
containerStyle={{
backgroundColor: '#f7ede2',
height: 100
}}
sliderStyle={{
backgroundColor: '#f6bd60'
}}
textStyle={{
color: '#84a59d',
textTransform: 'uppercase',
fontSize: 40,
}}
/>
Contribute
If you would like to contribute to react-native-multiswitch:
- Add a GitHub Star to the project (that help a lot!).
- Determine whether you're raising a bug, feature request or question.
- Raise your issue or PR.
License
The code is available under the MIT license.
