react-native-switch-component v2.3.0

Switch Component

The Switch component is compatible with both iOS and Android. The steps to include it in your React Native project are outlined below.

Dependencies

To use the Switch component, you need to install the following dependencies:

• react-native-reanimated: For animations and transitions in the Switch.
• react-native: The core library for building your React Native app.

You can install these dependencies using npm or yarn.

UI and Using

Get Started

Follow these steps to include the Switch component in your project:

1. Install the necessary dependency:

First, you need to add the react-native-switch-component package to your project. This package helps you manage animations.

npm i react-native-switch-component

or

yarn add react-native-switch-component

3. Usage with Default Values:

const App = () => {
  return (
    <Switch />
  );
};
export default App;

3. Usage with Customized Values:

const App = () => {
  return (
    <Switch
      activeIconColor="white"
      activeBgColor="#02D95A"
      passiveIconColor="white"
      passiveBgColor="lightgray"
      dumping={20}
      startPosition={0}
      endPosition={20}
    />
  );
};
export default App;

Customizable Switch Component

This Switch component allows for extensive customization, including the ability to modify icon colors, background colors, animations, and more. You can also personalize its appearance with additional styling properties for the Switch, container, and inner box.

Props

Customization

With the new style, styleBoxContainer, and styleBox properties, you can fully customize the appearance of the Switch component, its container, and the inner box, allowing it to fit seamlessly into your app's design.

Example

<Switch 
  activeIconColor="blue"
  activeBgColor="green"
  passiveIconColor="gray"
  passiveBgColor="lightgray"
  dumping={20}
  startPosition={0}
  endPosition={20}
  style={{ flex:1, justifyContent: 'center', alignItems: 'center' }}
  styleBoxContainer={{ width: 20, height: 20 }}
  styleBox={{ borderRadius: 10 }}
/>