added React Native Dropdown Picker and wrapper component

.eslintrc.js

@@ -1,6 +1,6 @@
 module.exports = {
   root: true,
-  extends: '@react-native-community',
+  extends: ['@react-native-community', 'prettier'],
   rules: {
     'react-native/no-inline-styles': 'off',
   },

.gitignore

@@ -35,6 +35,7 @@ local.properties
 node_modules/
 npm-debug.log
 yarn-error.log
+.yarn
 
 # BUCK
 buck-out/

package.json

@@ -21,6 +21,7 @@
     "axios": "^0.23.0",
     "react": "17.0.2",
     "react-native": "0.66.1",
+    "react-native-dropdown-picker": "^5.2.3",
     "react-native-fs": "^2.18.0",
     "react-native-keychain": "^8.0.0",
     "react-native-localization": "^2.1.7",
@@ -41,6 +42,7 @@
     "eslint": "7.14.0",
     "jest": "^26.6.3",
     "metro-react-native-babel-preset": "^0.66.2",
+    "prettier": "^2.4.1",
     "react-test-renderer": "17.0.2"
   },
   "jest": {

src/components/ItemPickerWithLabel.js

@@ -0,0 +1,70 @@
+import React, { useState } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { grayColor, paddingHorizontalDefault, primaryColor, whiteColor } from '../AppStyle';
+import DropDownPicker from 'react-native-dropdown-picker';
+
+export default function ItemPickerWithLabel(props) {
+  const [open, setOpen] = useState(false);
+  const [items, setItems] = useState(props.items ?? []);
+  const placeholder = props.placeholder ?? 'Select an item';
+  const label = props.label ?? '';
+
+  const onChangeValue = value => {
+    if (props.onChangeValue) {
+      props.onChangeValue(value);
+    }
+  };
+
+  const componentStyles = StyleSheet.create({
+    container: {
+      width: '100%',
+      // Layout
+      flexDirection: 'column',
+      flexWrap: 'nowrap',
+      flex: 1,
+      justifyContent: 'space-evenly',
+      // Visual
+      paddingHorizontal: paddingHorizontalDefault,
+    },
+    textLabel: {
+      fontSize: 11,
+      color: primaryColor,
+    },
+    picker: {
+      borderWidth: 0,
+      borderRadius: 0,
+    },
+    pickerContainer: {
+      paddingVertical: 5,
+    },
+    dropDownContainer: {
+      borderWidth: 1,
+      borderRadius: 0,
+      backgroundColor: whiteColor,
+      borderColor: grayColor,
+    },
+  });
+
+  return (
+    <View style={componentStyles.container}>
+      <Text style={componentStyles.textLabel} numberOfLines={1}>
+        {label}
+      </Text>
+      <DropDownPicker
+        listMode={'SCROLLVIEW'}
+        loading={props.loading ?? false}
+        placeholder={placeholder}
+        open={open}
+        value={props.value}
+        items={items}
+        setOpen={setOpen}
+        setValue={props.setValue}
+        setItems={setItems}
+        style={componentStyles.picker}
+        containerStyle={componentStyles.pickerContainer}
+        dropDownContainerStyle={componentStyles.dropDownContainer}
+        onChangeValue={value => onChangeValue(value)}
+      />
+    </View>
+  );
+}

src/screens/Profile.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { strings } from '../localization/LocalizationStrings';
 import {
   marginTopDefault,
@@ -9,7 +9,7 @@ import {
   pageItemStyle,
   paddingVerticalDefault,
 } from '../AppStyle';
-import { StyleSheet, SafeAreaView, View, Text, ScrollView } from 'react-native';
+import { StyleSheet, SafeAreaView, View, ScrollView } from 'react-native';
 import { logStringifyPretty, showGeneralMessage, signOut } from '../Utils';
 import { emailApi, getCredentials, handleApiError, userManagementApi } from '../api/apiHandler';
 import { MfaAuthInfoMethodEnum } from '../api/generated/owSecurityApi';
@@ -20,13 +20,14 @@ import ButtonStyled from '../components/ButtonStyled';
 import ItemTextWithIcon from '../components/ItemTextWithIcon';
 import ItemTextWithLabel from '../components/ItemTextWithLabel';
 import ItemTextWithLabelEditable from '../components/ItemTextWithLabelEditable';
-import RadioCheckbox from '../components/RadioCheckbox';
+import ItemPickerWithLabel from '../components/ItemPickerWithLabel';
 
 const Profile = props => {
   const state = store.getState();
   const session = state.session.value;
   const [loading, setLoading] = useState(false);
   const [profile, setProfile] = useState();
+  const [mfaValue, setMfaValue] = useState('off');
 
   // Refresh the getProfile only anytime there is a navigation change and this has come into focus
   // Need to becareful here as useFocusEffect is also called during re-render so it can result in
@@ -132,6 +133,14 @@ const Profile = props => {
     updateProfile({ userTypeProprietaryInfo: proprietaryInfo });
   };
 
+  useEffect(() => {
+    if (profile) {
+      let mfa = profile.userTypeProprietaryInfo.mfa;
+      let val = mfa.enabled ? mfa.method : 'off';
+      setMfaValue(val);
+    }
+  }, [profile]);
+
   // Phone Numbers
   const renderPhoneNumberFields = () => {
     let views = [];
@@ -201,6 +210,10 @@ const Profile = props => {
     section: {
       marginTop: marginTopDefault,
     },
+    accountSection: {
+      marginTop: marginTopDefault,
+      zIndex: 1,
+    },
     item: {
       paddingVertical: paddingVerticalDefault,
       paddingHorizontal: paddingHorizontalDefault,
@@ -234,7 +247,7 @@ const Profile = props => {
             />
           ) : (
             <AccordionSection
-              style={styles.section}
+              style={styles.accountSection}
               title={strings.profile.accountInfo}
               isLoading={loading}
               disableAccordion={true}>
@@ -249,34 +262,20 @@ const Profile = props => {
               {renderPhoneNumberFields()}
 
               {/* MFA */}
-              <View key="mfa" style={styles.item}>
+              {profile.userTypeProprietaryInfo.mfa && (
-                <Text style={styles.label}>{strings.profile.mfa}</Text>
+                <ItemPickerWithLabel
-                {profile.userTypeProprietaryInfo.mfa && (
+                  label={strings.profile.mfa}
-                  <View>
+                  loading={loading}
-                    <RadioCheckbox
+                  value={mfaValue}
-                      label={strings.profile.off}
+                  setValue={setMfaValue}
-                      checked={!profile.userTypeProprietaryInfo.mfa.enabled}
+                  items={[
-                      onChange={() => onMfaChange()}
+                    { label: strings.profile.off, value: 'off' },
-                    />
+                    { label: strings.profile.email, value: MfaAuthInfoMethodEnum.Email },
-                    <RadioCheckbox
+                    { label: strings.profile.sms, value: MfaAuthInfoMethodEnum.Sms },
-                      label={strings.profile.sms}
+                  ]}
-                      checked={
+                  onChangeValue={onMfaChange}
-                        profile.userTypeProprietaryInfo.mfa.enabled &&
+                />
-                        profile.userTypeProprietaryInfo.mfa.method === MfaAuthInfoMethodEnum.Sms
+              )}
-                      }
-                      onChange={() => onMfaChange(MfaAuthInfoMethodEnum.Sms)}
-                    />
-                    <RadioCheckbox
-                      label={strings.profile.email}
-                      checked={
-                        profile.userTypeProprietaryInfo.mfa.enabled &&
-                        profile.userTypeProprietaryInfo.mfa.method === MfaAuthInfoMethodEnum.Email
-                      }
-                      onChange={() => onMfaChange(MfaAuthInfoMethodEnum.Email)}
-                    />
-                  </View>
-                )}
-              </View>
             </AccordionSection>
           )}