Release 2.1.0 (#47)

* Update default styles and simplified readme

* Update tests

Author: hyochan

README.md

@@ -1,7 +1,6 @@
 # react-native-switch-toggle
 
 > Simple switch toggle component for react-native. This component supports horizontal switch toggle with animation with several options like start/end background colors, start/end circle colors, and duration for animation.
-<img src="https://firebasestorage.googleapis.com/v0/b/bookoo-89f6c.appspot.com/o/switch-toggle.gif?alt=media&token=a9dc36e0-3c25-45dc-bbb7-8b095a716dc8"/>
 
 [![Npm Version](http://img.shields.io/npm/v/react-native-switch-toggle.svg?style=flat-square)](https://npmjs.org/package/react-native-switch-toggle)
 [![Downloads](http://img.shields.io/npm/dm/react-native-switch-toggle.svg?style=flat-square)](https://npmjs.org/package/react-native-switch-toggle)
@@ -15,6 +14,9 @@
 [![supports web](https://img.shields.io/badge/web-4630EB.svg?style=flat-square&logo=GOOGLE-CHROME&labelColor=4285F4&logoColor=fff)](https://docs.expo.io/workflow/web/)
 [![runs with expo](https://img.shields.io/badge/Runs%20with%20Expo-000.svg?style=flat&logo=EXPO&labelColor=ffffff&logoColor=000)](https://github.com/expo/expo)
 
+
+<img src="https://user-images.githubusercontent.com/27461460/120913849-32f23580-c6d5-11eb-90bc-be0a97125427.gif" height=400 />
+
 ## News
 
 Current package is fully redesigned in `2.0.0`. We recommend you to use this package version `>=2.0.0`.
@@ -25,13 +27,13 @@ Current package is fully redesigned in `2.0.0`. We recommend you to use this pac
 | -------------------- | --------- | ------- | -------------------------------------------------------- |
 | switchOn             | ✓         | boolean | false                                                    |
 | onPress              | ✓         | func    | () => {}                                                 |
-| containerStyle       |           | styles  | { width: 72, height: 36, borderRadius: 18 ... }          |
-| circleStyle          |           | styles  | { width: 30, height: 30, borderRadius: 15 ... }          |
-| backgroundColorOn    |           | string  | 'rgb(227,227,227)'                                       |
-| backgroundColorOff   |           | string  | 'rgb(215,215,215)'                                       |
-| circleColorOn        |           | string  | 'white'                                                  |
-| circleColorOff       |           | string  | 'rgb(102,134,205)'                                       |
-| duration             |           | number  | 300                                                      |
+| containerStyle       |           | styles  | { width: 80, height: 40, borderRadius: 25 ... }          |
+| circleStyle          |           | styles  | { width: 32, height: 32, borderRadius: 16 ... }          |
+| backgroundColorOn    |           | string  | 'black'   |
+| backgroundColorOff   |           | string  | '#C4C4C4' |
+| circleColorOn        |           | string  | 'white'   |
+| circleColorOff       |           | string  | '#C4C4C4' |
+| duration             |           | number  | 300       |
 | type                 |           | number  | 0 - Normal switch, 1 - Switch with a text                |
 | buttonText           |           | string  | Text on-top of the button                                |
 | backTextRight        |           | string  | Text to appear in right side when button toggled to left |
@@ -49,147 +51,42 @@ Current package is fully redesigned in `2.0.0`. We recommend you to use this pac
 `$ npm install react-native-switch-toggle --save`
 
 ```javascript
-import React, { Component } from "react";
-import { Platform, StyleSheet, Text, View } from "react-native";
-
 import SwitchToggle from "react-native-switch-toggle";
+```
 
-export default class App extends Component<{}> {
-  constructor(props) {
-    super(props);
-    this.state = {
-      switchOn1: false,
-      switchOn2: false,
-      switchOn4: false
-    };
-  }
-
-  getButtonText() {
-    return this.state.switchOn4 ? "Hour" : "Day";
-  }
-
-  getRightText() {
-    return this.state.switchOn4 ? "" : "Hour";
-  }
-
-  getLeftText() {
-    return this.state.switchOn4 ? "Day" : "";
-  }
+#### Basic Style
+```jsx
+<SwitchToggle switchOn={on} onPress={() => off(!on)} />
+```
 
-  render() {
-    return (
-      <View style={styles.container}>
-        <SwitchToggle switchOn={this.state.switchOn1} onPress={this.onPress1} />
-        <SwitchToggle
-          containerStyle={{
-            marginTop: 16,
-            width: 108,
-            height: 48,
-            borderRadius: 25,
-            backgroundColor: "#ccc",
-            padding: 5
-          }}
-          circleStyle={{
-            width: 38,
-            height: 38,
-            borderRadius: 19,
-            backgroundColor: "white" // rgb(102,134,205)
-          }}
-          switchOn={this.state.switchOn2}
-          onPress={this.onPress2}
-          circleColorOff="white"
-          circleColorOn="red"
-          duration={500}
-        />
-        <SwitchToggle
-          containerStyle={{
-            marginTop: 16,
-            width: 160,
-            height: 65,
-            borderRadius: 30,
-            padding: 5
-          }}
-          backgroundColorOn="#a0e1e5"
-          backgroundColorOff="#e5e1e0"
-          circleStyle={{
-            width: 55,
-            height: 55,
-            borderRadius: 27.5,
-            backgroundColor: "blue" // rgb(102,134,205)
-          }}
-          switchOn={this.state.switchOn3}
-          onPress={this.onPress3}
-          circleColorOff="#ff11ff"
-          circleColorOn="green"
-          duration={500}
-        />
-        <SwitchToggle
-          buttonText={this.getButtonText()}
-          backTextRight={this.getRightText()}
-          backTextLeft={this.getLeftText()}
-          type={1}
-          buttonStyle={{
-            alignItems: "center",
-            justifyContent: "center",
-            position: "absolute"
-          }}
-          rightContainerStyle={{
-            flex: 1,
-            alignItems: "center",
-            justifyContent: "center"
-          }}
-          leftContainerStyle={{
-            flex: 1,
-            alignItems: "center",
-            justifyContent: "flex-start"
-          }}
-          buttonTextStyle={{ fontSize: 20 }}
-          textRightStyle={{ fontSize: 20 }}
-          textLeftStyle={{ fontSize: 20 }}
-          containerStyle={{
-            marginTop: 16,
-            width: 160,
-            height: 65,
-            borderRadius: 30,
-            padding: 5
-          }}
-          backgroundColorOn="#fff"
-          backgroundColorOff="#fff"
-          circleStyle={{
-            width: 80,
-            height: 55,
-            borderRadius: 27.5,
-            backgroundColor: "blue" // rgb(102,134,205)
-          }}
-          switchOn={this.state.switchOn4}
-          onPress={this.onPress4}
-          circleColorOff="#e5e1e0"
-          circleColorOn="#e5e1e0"
-          duration={500}
-        />
-      </View>
-    );
-  }
-  onPress1 = () => {
-    this.setState({ switchOn1: !this.state.switchOn1 });
-  };
-  onPress2 = () => {
-    this.setState({ switchOn2: !this.state.switchOn2 });
-  };
-  onPress3 = () => {
-    this.setState({ switchOn3: !this.state.switchOn3 });
-  };
-  onPress4 = () => {
-    this.setState({ switchOn4: !this.state.switchOn4 });
-  };
-}
+#### Custom Color
+```jsx
+<SwitchToggle
+  switchOn={on}
+  onPress={() => off(!on)}
+  circleColorOff='#C4C4C4'
+  circleColorOn='#00D9D5'
+  backgroundColorOn='#6D6D6D'
+  backgroundColorOff='#C4C4C4'
+/>
+```
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
-    backgroundColor: "#F5FCFF"
-  }
-});
+### Custom Size
+```jsx
+<SwitchToggle
+  switchOn={on}
+  onPress={() => off(!on)}
+  containerStyle={{
+    marginTop: 16,
+    width: 106,
+    height: 48,
+    borderRadius: 25,
+    padding: 5,
+  }}
+  circleStyle={{
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+  }}
+/>
 ```

__tests__/SwitchToggle.test.tsx

@@ -279,4 +279,22 @@ describe('[SwitchToggle]', (): void => {
       expect(props.onPress).toHaveBeenCalled();
     });
   });
+
+  it('should render custom `colors` and `duration`', () => {
+    props = {
+      ...props,
+      backgroundColorOn: 'red',
+      backgroundColorOff: 'red',
+      circleColorOn: 'red',
+      circleColorOff: 'red',
+      duration: 500,
+    };
+
+    component = <SwitchToggle {...props} />;
+
+    const rendered = renderer.create(component);
+
+    expect(rendered).toMatchSnapshot();
+    expect(rendered).toBeTruthy();
+  });
 });