react-native-toggle-element - npm Package Compare versions

Comparing version 2.0.0 to 2.0.1

package.json

 {
   "name": "react-native-toggle-element",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Switch toggle component for React Native. You can add title, icon, modify component for toggle button.",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -1,3 +0,5 @@
-# React-Native-Toggle-Element [![CircleCI](https://circleci.com/gh/mymai91/react-native-toggle-element.svg?style=svg)](https://circleci.com/gh/mymai91/react-native-toggle-element)
+# React-Native-Toggle-Element 2.0 [![CircleCI](https://circleci.com/gh/mymai91/react-native-toggle-element.svg?style=svg)](https://circleci.com/gh/mymai91/react-native-toggle-element)
 
+The library has been rewritten with Typescript support in version `2.0.0`. This library will work well on both React Native and Expo, please check out the examples folder.
+
 ![ezgif com-video-to-gif (7)](https://user-images.githubusercontent.com/6791942/80718297-8edea800-8b2c-11ea-8f69-c7c3f98ca545.gif)
@@ -22,4 +24,4 @@
 ```jsx
-import React, { useState } from 'react';
-import Toggle from 'react-native-toggle-element';
+import React, { useState } from "react";
+import Toggle from "react-native-toggle-element";
 
@@ -82,5 +84,3 @@ const [toggleValue, setToggleValue] = useState(false);
   onPress={(newState) => setToggleValue(newState)}
-  leftComponent={
-    <Icon name="credit" width="30" height="30" fill={"#3BD2B5"} />
-  }
+  leftComponent={<Icon name="credit" width="30" height="30" fill={"#3BD2B5"} />}
 />
@@ -97,5 +97,3 @@ ```
   onPress={(newState) => setToggleValue(newState)}
-  rightComponent={
-    <Icon name="plus" width="30" height="30" fill={'#3BD2B5'} />
-  }
+  rightComponent={<Icon name="plus" width="30" height="30" fill={"#3BD2B5"} />}
 />
@@ -131,12 +129,12 @@ ```
   thumbActiveComponent={
-    <Icon name="sun" width="40" height="40" fill={'#3BD2B5'} />
+    <Icon name="sun" width="40" height="40" fill={"#3BD2B5"} />
   }
   thumbInActiveComponent={
-    <Icon name="night" width="40" height="40" fill={'#03452C'} />
+    <Icon name="night" width="40" height="40" fill={"#03452C"} />
   }
   trackBar={{
-    activeBackgroundColor: '#9ee3fb',
-    inActiveBackgroundColor: '#3c4145',
-    borderActiveColor: '#86c3d7',
-    borderInActiveColor: '#1c1c1c',
+    activeBackgroundColor: "#9ee3fb",
+    inActiveBackgroundColor: "#3c4145",
+    borderActiveColor: "#86c3d7",
+    borderInActiveColor: "#1c1c1c",
     borderWidth: 5,
@@ -193,3 +191,3 @@ width: 100,
   trackBarStyle={{
-    borderColor: 'green',
+    borderColor: "green",
   }}
@@ -227,4 +225,4 @@ trackBar={{
   disabled
-  disabledTitleStyle={{ color: 'red' }}
-  disabledStyle={{ backgroundColor: 'gray', opacity: 0.3 }}
+  disabledTitleStyle={{ color: "red" }}
+  disabledStyle={{ backgroundColor: "gray", opacity: 0.3 }}
   value={toggleValue}
@@ -259,137 +257,106 @@ onPress={(newState) => setToggleValue(newState)}
 
-| Type          | Default       |
-| ------------- |:-------------:|
-| React element or component     |none |
+| Type                       | Default |
+| -------------------------- | :-----: |
+| React element or component |  none   |
 
-
-
 `containerStyle` style for main container
 
+| Type  | Default |
+| ----- | :-----: |
+| style |  none   |
 
-| Type          | Default       |
-| ------------- |:-------------:|
-| style     |none |
-
-
 `disabled` disable the Toggle Button component (optional)
 
+| Type    | Default |
+| ------- | :-----: |
+| boolean |  false  |
 
-| Type          | Default       |
-| ------------- |:-------------:|
-| boolean     |false |
-
-
 `disabledStyle` styling for Toggle Button Component for disabled (optional)
 
+| Type                | Default |
+| ------------------- | :-----: |
+| View style (object) |  none   |
 
-| Type          | Default       |
-| ------------- |:-------------:|
-| View style (object)     |none |
-
-
 `disabledTitleStyle` styling for **leftTitle & right Title**(optional) when Toggle Button set with status is disabled(optional). If you want to set disable style for Active & Inactive you should use custom left component or custom right component
 
+| Type                 | Default |
+| -------------------- | :-----: |
+| Text style (object)) |  none   |
 
-| Type          | Default       |
-| ------------- |:-------------:|
-| Text style (object))     |none |
-
-
 `leftComponent` define your left component here
 
+| Type                       | Default |
+| -------------------------- | :-----: |
+| React element or component |  none   |
 
-| Type          | Default       |
-| ------------- |:-------------:|
-| React element or component     |none |
-
-
 `leftTitle` button left title (optional)
 
+| Type   | Default |
+| ------ | :-----: |
+| string |  none   |
 
-| Type          | Default       |
-| ------------- |:-------------:|
-| string     |none |
-
-
 `rightComponent` define your right component here (optional)
 
+| Type                       | Default |
+| -------------------------- | :-----: |
+| React element or component |  none   |
 
-| Type          | Default       |
-| ------------- |:-------------:|
-| React element or component     |none |
-
-
 `rightTitle` button right title (optional)
 
+| Type   | Default |
+| ------ | :-----: |
+| string |  none   |
 
-| Type          | Default       |
-| ------------- |:-------------:|
-| string     |none |
-
-
 `thumbActiveComponent` define your thumb button component when status is active (optional)
 
+| Type                       | Default |
+| -------------------------- | :-----: |
+| React element or component |  none   |
 
-| Type          | Default       |
-| ------------- |:-------------:|
-| React element or component     |none |
+`thumbInActiveComponent` define your thumb button component when status is inactive (optional)
 
+| Type                       | Default |
+| -------------------------- | :-----: |
+| React element or component |  none   |
 
-`thumbInActiveComponent` define your thumb button component when status is inactive  (optional)
-
-
-| Type          | Default       |
-| ------------- |:-------------:|
-| React element or component     |none |
-
-
 `thumbStyle` thumb button style (optional). Styling will override the value from **thumbButton** props
 
+| Type                | Default |
+| ------------------- | :-----: |
+| View style (object) |  none   |
 
-| Type          | Default       |
-| ------------- |:-------------:|
-| View style (object)     |none |
-
-
 `thumbButton` define to change size and radius and color depend on active / inactive status (optional)
 
+| Type                    | Default |
+| ----------------------- | :-----: |
+| borderWidth             |    0    |
+| width                   |   50    |
+| height                  |   50    |
+| radius                  |   25    |
+| activeBackgroundColor   | #fde2e2 |
+| inActiveBackgroundColor | #ffb6b6 |
 
-| Type                         | Default       |
-| ------------- |:-------------:|
-| borderWidth     |0 |
-| width     |50 |
-| height     |50 |
-| radius     |25 |
-| activeBackgroundColor     |#fde2e2 |
-| inActiveBackgroundColor     |#ffb6b6 |
-
-
 `trackBar` define to change size and radius and color depend on active / inactive status (optional)
 
+| Type                    |   Default   |
+| ----------------------- | :---------: |
+| borderWidth             |      0      |
+| width                   |     50      |
+| height                  |     50      |
+| radius                  |     25      |
+| activeBackgroundColor   |   #fde2e2   |
+| inActiveBackgroundColor |   #ffb6b6   |
+| borderActiveColor       | transparent |
+| borderInActiveColor     | transparent |
 
-| Type          | Default       |
-| ------------- |:-------------:|
-| borderWidth     |0 |
-| width     |50 |
-| height     |50 |
-| radius     |25 |
-| activeBackgroundColor     |#fde2e2 |
-| inActiveBackgroundColor     |#ffb6b6 |
-| borderActiveColor     |transparent |
-| borderInActiveColor     |transparent |
-
-
 `trackBarStyle` trackbar style (optional). Styling will override the value from **trackBar** props
 
+| Type                | Default |
+| ------------------- | :-----: |
+| View style (object) |  none   |
 
-| Type                         | Default       |
-| ------------- |:-------------:|
-| View style (object)     |none |
-
-
 `animationDuration` duration of the thumb button animation (optional).
 
-
-| Type                         | Default       |
-| ------------- |:-------------:|
-| number     |350 |
+| Type   | Default |
+| ------ | :-----: |
+| number |   350   |

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

39765

increased by0.55%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of lines in readme file

356

decreased by-8.48%

No dependency changes