1.2.0 • Published 7 years ago

react-native-multi-switch v1.2.0

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

react-native-multi-switch

A multiple switch widget for react-native

install

$ npm i -s react-native-multi-switch

or

$ yarn add react-native-multi-switch

No linking is needed

Usage

Note: these examples use native-base's icon component, but you can use any other component.

horizontal2 horizontal3 square3

import React from 'react'
import { View, Text } from 'react-native'

import MultiSwitch from "react-native-multi-switch";
import { Icon } from "native-base"

import _ from 'lodash';

export default class Example extends React.Component {

    render() {
        return (
          <View style={{flex: 1, flexDirection: 'row', justifyContent: "space-between", alignItems: 'center'}}>
            <View style={{width: 270}}>
              <Text style={{fontSize: 24}}>{"This is a triple state choice"}</Text>
            </View>
            <View style={{width: 150, justifyContent: 'center', alignItems: 'center'}}>
              <MultiSwitch choiceSize={40}
                            activeItemStyle={[{color: 'white'}, {color: 'black'}, {color: 'white'}, ]}
                            layout={{vertical: 0, horizontal: -1}}
                            containerStyles={_.times(3, () => ({
                              backgroundColor: 'white',
                              borderRadius: 20,
                              borderWidth: 1,
                              borderColor: "lightgrey",
                              justifyContent: 'space-between',
                            }))}
                            active={1}>
                <Icon name="md-close" style={{fontSize: 15,}}/>
                <Icon name="md-help" style={{fontSize: 15,}}/>
                <Icon name="md-checkmark" style={{fontSize: 15,}}/>
          
              </MultiSwitch>
            </View>
          </View>
        )
    }
}

Props

NameTypeDescription
choiceSizeNumberThe size of the touchable wrapper for each choice (square)
activeNumberindex of the initialy selected choice, can be -1 if no initial selection is desired
layout{horizontal: Number, vertical: Number}used to determine overall container's aspect. Vertical is the number or row and horizontal is the number of column, if one of them equals -1, then the container will be flat in that direction. if both are -1,horizontal takes precedence
neverActivateNumber,...A list of children's indexes which cannot be selected
onActivate(Number) => {}Callback called when one of the choices is selected, argument is child index
activeContainerStyle{styleProp: "value"} or stylesheetan array of styles object or stylesheets to be applied to children's touchable container when they are selected, each item is mapped to the corresponding child
inactiveContainerStyle{styleProp: "value"} or stylesheetan array of styles object or stylesheets to be applied to children's touchable container when they are NOT selected, each item is mapped to the corresponding child
activeItemStyle{styleProp: "value"} or stylesheetan array of styles object or stylesheets to be applied to children's component when they are selected, each item is mapped to the corresponding child
inactiveItemStyle{styleProp: "value"} or stylesheetan array of styles object or stylesheets to be applied to children's component when they are NOT selected, each item is mapped to the corresponding child
containerStyles{styleProp: "value"} or stylesheetan array of styles object or stylesheets to be applied to the overall containing view, the item selected correspond to the actively selected child.

Recipes

Vertical

vertical1 vertical2 vertical3

<MultiSwitch choiceSize={40}
                            activeItemStyle={[{color: 'white'}, {color: 'black'}, {color: 'white'}, ]}
                            layout={{vertical: -1, horizontal: 0}}
                            containerStyles={_.times(3, () => ({
                              backgroundColor: 'white',
                              borderRadius: 20,
                              borderWidth: 1,
                              borderColor: "lightgrey",
                              justifyContent: 'space-between',
                            }))}
                            active={1}>
                <Icon name="md-close" style={{fontSize: 15,}}/>
                <Icon name="md-help" style={{fontSize: 15,}}/>
                <Icon name="md-checkmark" style={{fontSize: 15,}}/>
          
</MultiSwitch>

Other layout

square1 square2 square3

<MultiSwitch choiceSize={40}
                            activeItemStyle={[{color: 'white'}, {color: 'black'}, {color: 'white'}, ]}
                            layout={{vertical: 2, horizontal: 2}}
                            containerStyles={_.times(3, () => ({
                              backgroundColor: 'white',
                              borderRadius: 20,
                              borderWidth: 1,
                              borderColor: "lightgrey",
                              justifyContent: 'space-between',
                            }))}
                            active={1}>
                <Icon name="md-close" style={{fontSize: 15,}}/>
                <Icon name="md-help" style={{fontSize: 15,}}/>
                <Icon name="md-checkmark" style={{fontSize: 15,}}/>
          
</MultiSwitch>

Making the background color change

background1 background2

<MultiSwitch choiceSize={40}
                            activeItemStyle={[{color: 'white'}, {color: 'black'}, {color: 'white'}, ]}
                            layout={{vertical: 0, horizontal: -1}}
                            containerStyles={[{
                              backgroundColor: 'red',
                              borderRadius: 20,
                              borderWidth: 1,
                              borderColor: "lightgrey",
                              justifyContent: 'space-between',
                            },
                            {
                              backgroundColor: 'white',
                              borderRadius: 20,
                              borderWidth: 1,
                              borderColor: "lightgrey",
                              justifyContent: 'space-between',
                            },
                            {
                              backgroundColor: 'green',
                              borderRadius: 20,
                              borderWidth: 1,
                              borderColor: "lightgrey",
                              justifyContent: 'space-between',
                            }]}
                            activeContainerStyle={[{ backgroundColor: 'white', borderRadius: 100, borderWidth: 1, borderColor: 'rgb(180, 180, 180)'}
                       , { backgroundColor: 'white', borderRadius: 100, borderWidth: 1, borderColor: 'rgb(180, 180, 180)'}
                       , { backgroundColor: 'white', borderRadius: 100, borderWidth: 1, borderColor: 'rgb(180, 180, 180)'}
                       ]}
                        inactiveContainerStyle={[{ borderRadius: 100,}
                       , { borderRadius: 100,}
                       , { borderRadius: 100,}
                       ]}
                       activeItemStyle={[{color: 'black'}, {color: 'black'}, {color: 'black'}]}
                       inactiveItemStyle={[{color: 'black'}, {color: 'black'}, {color: 'black'}]}
                            active={1}>
                <Icon name="md-close" style={{fontSize: 15,}}/>
                <Icon name="md-help" style={{fontSize: 15,}}/>
                <Icon name="md-checkmark" style={{fontSize: 15,}}/>
          
              </MultiSwitch>

More options

4-1 4-2 4-3 4-4

<MultiSwitch choiceSize={40}
                            activeItemStyle={[{color: 'white'}, {color: 'black'}, {color: 'white'}, ]}
                            layout={{vertical: 0, horizontal: -1}}
                            containerStyles={[{
                              backgroundColor: 'red',
                              borderRadius: 20,
                              borderWidth: 1,
                              borderColor: "lightgrey",
                              justifyContent: 'space-between',
                            },
                            {
                              backgroundColor: 'white',
                              borderRadius: 20,
                              borderWidth: 1,
                              borderColor: "lightgrey",
                              justifyContent: 'space-between',
                            },
                            {
                              backgroundColor: 'green',
                              borderRadius: 20,
                              borderWidth: 1,
                              borderColor: "lightgrey",
                              justifyContent: 'space-between',
                            },
                            {
                              backgroundColor: 'yellow',
                              borderRadius: 20,
                              borderWidth: 1,
                              borderColor: "lightgrey",
                              justifyContent: 'space-between',
                            }]}
                            activeContainerStyle={[{ backgroundColor: 'white', borderRadius: 100, borderWidth: 1, borderColor: 'rgb(180, 180, 180)'}
                       , { backgroundColor: 'white', borderRadius: 100, borderWidth: 1, borderColor: 'rgb(180, 180, 180)'}
                       , { backgroundColor: 'white', borderRadius: 100, borderWidth: 1, borderColor: 'rgb(180, 180, 180)'}
                       , { backgroundColor: 'white', borderRadius: 100, borderWidth: 1, borderColor: 'rgb(180, 180, 180)'}
                       ]}
                        inactiveContainerStyle={[{ borderRadius: 100,}
                       , { borderRadius: 100,}
                       , { borderRadius: 100,}
                       , { borderRadius: 100,}
                       ]}
                       activeItemStyle={[{color: 'black'}, {color: 'black'}, {color: 'black'}, {color: 'black'}]}
                       inactiveItemStyle={[{color: 'black'}, {color: 'black'}, {color: 'black'}, {color: 'black'}]}
                            active={1}>
                <Icon name="md-close" style={{fontSize: 15,}}/>
                <Icon name="md-help" style={{fontSize: 15,}}/>
                <Icon name="md-checkmark" style={{fontSize: 15,}}/>
                <Icon name="md-camera" style={{fontSize: 15,}}/>
          
</MultiSwitch>