set configiration moved to settings Item from screen

src/components/dropdownButton/view/dropdownButtonStyles.js

@@ -33,6 +33,9 @@ export default EStyleSheet.create({
   iconWrapper: {
     justifyContent: 'center',
     alignItems: 'center',
+    flexDirection: 'row',
+    width: 40,
+    height: 40,
   },
   dropdownText: {
     fontSize: 9,

src/components/dropdownButton/view/dropdownButtonView.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { View, Text, TouchableHighlight } from 'react-native';
-import { Dimensions } from 'react-native';
 
 // External components
 import ModalDropdown from 'react-native-modal-dropdown';
@@ -9,9 +8,6 @@ import Ionicons from 'react-native-vector-icons/Ionicons';
 // Styles
 import styles from './dropdownButtonStyles';
 
-// Constants
-const DEVICE_HEIGHT = Dimensions.get('window').height;
-
 /* Props TODO: Fill all description
   * ------------------------------------------------
   *   @prop { string }      defaultText         - Description....
@@ -38,15 +34,19 @@ const DropdownButtonView = ({
   iconName,
   isHasChildIcon,
   onSelect,
+  dropdownStyle,
+  dropdownTextStyle,
+  dropdownButtonStyle,
+  textStyle,
   options,
   style,
 }) => (
-  <View style={styles.container}>
+  <View style={[styles.container, dropdownButtonStyle]}>
     <ModalDropdown
       style={[!style ? styles.button : style]}
-      textStyle={styles.buttonText}
+      textStyle={[textStyle || styles.buttonText]}
-      dropdownStyle={[styles.dropdown, { height: 35 * (options.length + 1) }]}
+      dropdownStyle={[styles.dropdown, dropdownStyle, { height: 35 * (options.length + 1) }]}
-      dropdownTextStyle={styles.dropdownText}
+      dropdownTextStyle={[dropdownTextStyle || styles.dropdownText]}
       dropdownTextHighlightStyle={styles.dropdownTextHighlight}
       options={options}
       onSelect={e => onSelect && onSelect(e)}

src/components/settingsItem/view/settingsItemStyles.js

@@ -2,7 +2,7 @@ import EStyleSheet from 'react-native-extended-stylesheet';
 
 export default EStyleSheet.create({
   wrapper: {
-    marginHorizontal: 8,
+    marginVertical: 8,
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
@@ -13,4 +13,28 @@ export default EStyleSheet.create({
     fontWeight: 'bold',
     flexGrow: 1,
   },
+  dropdownText: {
+    fontSize: 14,
+    paddingLeft: 16,
+    paddingHorizontal: 14,
+    color: '$primaryDarkGray',
+  },
+  dropdownStyle: {
+    width: 172,
+  },
+  dropdownButtonStyle: {
+    backgroundColor: '$primaryGray',
+    height: 44,
+    width: 172,
+    borderRadius: 8,
+  },
+  dropdown: {
+    flexGrow: 1,
+  },
+  textStyle: {
+    color: '$primaryBlue',
+  },
+  textButton: {
+    justifyContent: 'center',
+  },
 });

src/components/settingsItem/view/settingsItemView.js

@@ -4,6 +4,8 @@ import { View, Text } from 'react-native';
 // Constants
 
 // Components
+import { DropdownButton } from '../../dropdownButton';
+import { TextButton } from '../../buttons';
 
 // Styles
 import styles from './settingsItemStyles';
@@ -22,16 +24,57 @@ class SettingsItemView extends Component {
   // Component Life Cycles
 
   // Component Functions
+  _renderItem = () => {
+    const {
+      type, options, selectedOptionIndex, handleOnChange, text,
+    } = this.props;
+
+    switch (type) {
+      case 'dropdown':
+        return (
+          <DropdownButton
+            defaultText={options[selectedOptionIndex]}
+            dropdownButtonStyle={styles.dropdownButtonStyle}
+            style={styles.dropdown}
+            dropdownStyle={styles.dropdownStyle}
+            textStyle={styles.dropdownText}
+            options={options}
+            onSelect={e => handleOnChange(e, type)}
+          />
+        );
+
+      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)}
+          />
+        );
+
+      default:
+        return (
+          <TextButton
+            onPress={() => handleOnChange(type)}
+            textStyle={styles.textStyle}
+            style={styles.textButton}
+            text={text}
+          />
+        );
+    }
+  };
 
   render() {
-    // eslint-disable-next-line
+    const { title } = this.props;
-    const { title, children } = this.props;
 
-    // eslint-disable-next-line
     return (
       <View style={styles.wrapper}>
         <Text style={styles.text}>{title}</Text>
-        {children}
+        {this._renderItem()}
       </View>
     );
   }

src/screens/settings/screen/settingsScreen.js

@@ -1,11 +1,12 @@
 import React, { Component, Fragment } from 'react';
-import { ScrollView, Text } from 'react-native';
+import { ScrollView } from 'react-native';
 
 // Constants
 
 // Components
 import { BasicHeader } from '../../../components/basicHeader';
 import { SettingsItem } from '../../../components/settingsItem';
+
 // Styles
 import globalStyles from '../../../globalStyles';
 
@@ -23,6 +24,9 @@ class SettingsScreen extends Component {
   // Component Life Cycles
 
   // Component Functions
+  _handleOnChange = (action, type) => {
+    console.log(action + type);
+  };
 
   render() {
     return (
@@ -30,9 +34,20 @@ class SettingsScreen extends Component {
         <BasicHeader title="Settings" />
 
         <ScrollView style={globalStyles.settingsContainer}>
-          <SettingsItem title="Currency">
+          <SettingsItem
-            <Text>ugur</Text>
+            title="Language"
-          </SettingsItem>
+            type="dropdown"
+            options={['Turkish', 'German', 'Turkish']}
+            selectedOptionIndex={0}
+            handleOnChange={this._handleOnChange}
+          />
+          <SettingsItem
+            title="Currency"
+            type="dropdown"
+            options={['TRY', 'USD', 'GYB']}
+            selectedOptionIndex={0}
+          />
+          <SettingsItem title="Pincode" text="Reset" />
         </ScrollView>
       </Fragment>
     );