@mselmany/react-native-switcho NPM

@mselmany/react-native-switcho

Universal animated switcher ui element. (with react-native-reanimated) Compatiple with ios, android, web - expo.

🎨 All colors customizable
Supports optional icons (for on/off status)
👀 Looks the same across all platforms

Example Video

Installation

npm install --save @mselmany/react-native-switcho
# or
yarn add @mselmany/react-native-switcho

Usage

import { useState } from 'react';
import { MaterialIcons } from '@expo/vector-icons';

import Switcher from '@mselmany/react-native-switcho';

export default function App() {
  const [isToggled, onToggle] = useState(false);

  return (
    <Switcher
      value={isToggled}
      onValueChange={onToggle}
      size="medium" // number | xlarge | large | medium | small
      radius={25} // optional - default is equals to size
      disabled={false} // optional: true | false
      neutralColor="#c8c8c8" // optional - default is #c8c8c8
      positiveColor="#27cc0d" // optional - default is #27cc0d
      thumbColor="#fff" // optional - default is #fff
      IconOff={<MaterialIcons name="close" size={16} />} // optional
      IconOn={<MaterialIcons name="check" size={16} />} // optional
    />
  );
}