react-native-multiple-toggle-switch
v1.1.3
Published
Customizable Multi Toggle Switch Component for React-Native
Downloads
3
Readme
react-native-multi-toggle-switch
MultiToggle Switch for React-Native
Installation
npm i @yessiborghi/react-native-multi-toggle-switch --save
Link react-native-vector-icons
native dependencies to your project with:
react-native link react-native-vector-icons
or just:
react-native link
Usage
First step: import the component:
import MultiToggleSwitch from '@yessiborghi/react-native-multi-toggle-switch';
Second step: Use it.
<MultiToggleSwitch>
<MultiToggleSwitch.Item onPress={() => console.log("Facebook tapped!")}>
<Icon name={'facebook'} size={30} />
</MultiToggleSwitch.Item>
<MultiToggleSwitch.Item primaryColor={'#CF4647'}>
<Icon name={'twitter'} size={30} />
</MultiToggleSwitch.Item>
<MultiToggleSwitch.Item>
<Icon name={'instagram'} size={30}/>
</MultiToggleSwitch.Item>
<MultiToggleSwitch.Item primaryColor={'orange'}>
<Icon name={'github'} size={30} />
</MultiToggleSwitch.Item>
</MultiToggleSwitch>
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 | | itemContainer | style | null | Style of item container | | activeContainerStyle | style | null | Style of item container when active | | itemsContainer | style | null | Style of container containing all items | | itemsContainerBackgroundStyle | style | null | Background Style of container containing items | | onPress | function | | Function to be called as soon as the user presses any item |
TODO
- [x] Example
- [x] Able to use all icons(only FontAwesome Supported)