React-native-multi-toggle-switch-fixed NPM

react-native-multi-toggle-switch-fixed

MultiToggle Switch for React-Native, Expo Compatible (Web, Android, iOS)

Disclaimer

Original Autor kiok46, It was no longer being maintained so i gave it a refresh

https://github.com/kiok46/react-native-multi-toggle-switch

Try it

Expo Snack React Navite Multi Toggle Switch

https://snack.expo.dev/@navajathe/react-native-multi-toggle-switch-fixed

Android and iOS Demo

Installation

npm i react-native-multi-toggle-switch-fixed

Usage

First step: import the component:

import MultiToggleSwitch from 'react-native-multi-toggle-switch-fixed';

Second step: Use it.

    <MultiToggleSwitch defaultActiveIndex = {1}> 

        <MultiToggleSwitch.Item primaryColor={'darkgray'} onPress={() => alert('iOS')}>
            <Ionicons name={'logo-apple'} size={30} />
        </MultiToggleSwitch.Item>

        <MultiToggleSwitch.Item primaryColor={'#f7df1e'} onPress={() => alert('Web')}>
            <Ionicons name={'laptop-outline'} size={30} />   
        </MultiToggleSwitch.Item>
            
        <MultiToggleSwitch.Item primaryColor={'#a4c639'} onPress={() => alert('Android')}>
            <Ionicons name={'logo-android'} 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