created toggleSwitch componenet

src/components/settingsItem/view/settingsItemView.js

@@ -6,7 +6,7 @@ import { View, Text } from 'react-native';
 // Components
 import { DropdownButton } from '../../dropdownButton';
 import { TextButton } from '../../buttons';
-
+import { ToggleSwitch } from '../../toggleSwitch';
 // Styles
 import styles from './settingsItemStyles';
 
@@ -26,7 +26,7 @@ class SettingsItemView extends Component {
   // Component Functions
   _renderItem = () => {
     const {
-      type, options, selectedOptionIndex, handleOnChange, text,
+      type, options, selectedOptionIndex, handleOnChange, text, isOn,
     } = this.props;
 
     switch (type) {
@@ -45,14 +45,10 @@ class SettingsItemView extends Component {
 
       case 'toggle':
         return (
-          <DropdownButton
-            defaultText={options[selectedOptionIndex]}
-            dropdownButtonStyle={styles.dropdownButtonStyle}
-            style={styles.dropdown}
-            dropdownStyle={styles.dropdownStyle}
-            textStyle={styles.dropdownText}
-            options={options}
-            onSelect={e => handleOnChange(e, type)}
+          <ToggleSwitch
+            size="large"
+            isOn={isOn}
+            onToggle={handleOnChange}
           />
         );
 

src/components/toggleSwitch/index.js

@@ -0,0 +1,4 @@
+import ToggleSwitch from './view/toggleSwitchView';
+
+export { ToggleSwitch };
+export default ToggleSwitch;

src/components/toggleSwitch/view/toggleSwitchStyles.js

@@ -0,0 +1,8 @@
+import EStyleSheet from 'react-native-extended-stylesheet';
+
+export default EStyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+});

src/components/toggleSwitch/view/toggleSwitchView.js

@@ -0,0 +1,107 @@
+import React, { Component } from 'react';
+import { View, TouchableOpacity, Animated } from 'react-native';
+
+// Constants
+
+// Components
+
+// Styles
+// eslint-disable-next-line
+import styles from './toggleSwitchStyles';
+
+class ToggleSwitchView extends Component {
+  /* Props
+    * ------------------------------------------------
+    *   @prop { type }    name                - Description....
+    */
+  offsetX = new Animated.Value(0);
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      width: 68,
+      padding: 12,
+      circleWidth: 28,
+      circleHeight: 28,
+      translateX: 32,
+      isOn: false || props.isOn,
+    };
+  }
+
+  // Component Life Cycles
+
+  // Component Functions
+  _createCircleStyle = () => {
+    const { circleWidth, circleHeight } = this.state;
+
+    return {
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingHorizontal: 10,
+      position: 'absolute',
+      backgroundColor: 'white',
+      transform: [{ translateX: this.offsetX }],
+      width: circleWidth,
+      height: circleHeight,
+      borderRadius: circleWidth / 2,
+      shadowOpacity: 0.2,
+      shadowOffset: {
+        height: 1.5,
+      },
+    };
+  };
+
+  _createSwitchStyle = () => {
+    const { onColor, offColor } = this.props;
+    const { padding, width, isOn } = this.state;
+
+    return {
+      justifyContent: 'center',
+      width,
+      borderRadius: 20,
+      height: 35,
+      padding,
+      backgroundColor: isOn ? onColor || '#357ce6' : offColor || '#f5f5f5',
+    };
+  };
+
+  _onToggle = () => {
+    const { onToggle } = this.props;
+    const { isOn } = this.state;
+
+    this.setState(
+      {
+        isOn: !isOn,
+      },
+      () => {
+        onToggle && onToggle(!isOn);
+      },
+    );
+  };
+
+  render() {
+    const { width, translateX, isOn } = this.state;
+    const toValue = isOn ? width - translateX : 0;
+
+    Animated.timing(this.offsetX, {
+      toValue,
+      duration: 300,
+    }).start();
+
+    return (
+      <View style={styles.container}>
+        <TouchableOpacity
+          style={this._createSwitchStyle()}
+          activeOpacity={0.8}
+          onPress={() => {
+            this._onToggle();
+          }}
+        >
+          <Animated.View style={this._createCircleStyle()} />
+        </TouchableOpacity>
+      </View>
+    );
+  }
+}
+
+export default ToggleSwitchView;

src/screens/settings/screen/settingsScreen.js

@@ -44,9 +44,11 @@ class SettingsScreen extends Component {
           <SettingsItem
             title="Currency"
             type="dropdown"
-            options={['TRY', 'USD', 'GYB']}
+            options={['USD', 'TRY', 'CYH']}
             selectedOptionIndex={0}
+            handleOnChange={this._handleOnChange}
           />
+          <SettingsItem title="Push Notification" type="toggle" isOn />
           <SettingsItem title="Pincode" text="Reset" />
         </ScrollView>
       </Fragment>