Update Tested Registration - Needs CSS

app/helpers.jsx

@@ -1,9 +1,9 @@
 import styled from 'styled-components';
 import Constants from 'expo-constants';
-import { View, Text, Image, TextInput, TouchableOpacity } from 'react-native';
+import { View, Text, LayoutAnimation, Image, TextInput, TouchableOpacity, TouchableNativeFeedback } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
-import { Picker } from '@react-native-picker/picker';
-import { Children } from 'react';
+import { Row } from '../components/Row';
+import { Container } from '../components/Container';
 
 const StatusBarHeight = Constants.statusBarHeight;
 
@@ -117,6 +117,82 @@ export const TextLinkContent = styled.Text`
   font-size: 15px;
 `
 
+const ProviderDropdown = styled.TouchableOpacity`
+  background-color: #E5E7EB;
+  padding: 15px 55px 15px 55px;
+  border-radius: 5px;
+  font-size: 16px;
+  height: 60px;
+  margin-vertical: 3px;
+  margin-bottom: 10px;
+`
+
+export const providerMenu = {
+  menuName: 'providerList',
+  placeholder: 'Select Provider',
+  iconColor: 'red',
+  iconName: 'globe-outline',
+  dropdownList: [
+    { label: 'AllTel', value: 'alltel' },
+    { label: 'AT&T', value: 'att' },
+    { label: 'AT&T MMS', value: 'attmms' },
+    { label: 'Boost', value: 'boost' },
+    { label: 'Boost MMS', value: 'boostmms' },
+    { label: 'C Spire', value: 'c' },
+    { label: 'Consumer Cellular', value: 'consumer' },
+    { label: 'Cricket', value: 'cricket' },
+    { label: 'Cricket MMS', value: 'cricketmms' },
+    { label: 'Google Fi', value: 'googlefi' },
+    { label: 'Mint Mobile', value: 'mint' },
+    { label: 'MetroPCS', value: 'metro' },
+    { label: 'Optimum', value: 'optimum' },
+    { label: 'Republic Wireless', value: 'republic' },
+    { label: 'Spectrum', value: 'spectrum' },
+    { label: 'Sprint', value: 'sprint' },
+    { label: 'Sprint MMS', value: 'sprintmms' },
+    { label: 'Ting', value: 'ting' },
+    { label: 'T-Mobile', value: 'tmobile' },
+    { label: 'TracFone', value: 'tracfone' },
+    { label: 'US Cellular', value: 'us' },
+    { label: 'US Cellular MMS', value: 'usmms' },
+    { label: 'Verizon', value: 'verizon' },
+    { label: 'Verizon MMS', value: 'verizonmms' },
+    { label: 'VerizonBiz', value: 'verizonbiz' },
+    { label: 'Virgin', value: 'virgin' },
+    { label: 'Virgin MMS', value: 'virginmms' },
+  ]
+}
+
+const providerConversion = {
+  alltel: 'AllTel',
+  att: 'AT&T',
+  attmms: 'AT&T MMS',
+  boost: 'Boost',
+  boostmms: 'Boost MMS',
+  c: 'C Spire',
+  consumer: 'Consumer Cellular',
+  cricket: 'Cricket',
+  cricketmms: 'Cricket MMS',
+  googlefi: 'Google Fi',
+  mint: 'Mint Mobile',
+  metro: 'MetroPCS',
+  optimum: 'Optimum',
+  republic: 'Republic Wireless',
+  spectrum: 'Spectrum',
+  sprint: 'Sprint',
+  sprintmms: 'Sprint MMS',
+  ting: 'Ting',
+  tmobile: 'T-Mobile',
+  tracfone: 'TracFone',
+  us: 'US Cellular',
+  usmms: 'US Cellular MMS',
+  verizon: 'Verizon',
+  verizonmms: 'Verizon MMS',
+  verizonbiz: 'VerizonBiz',
+  virgin: 'Virgin',
+  virginmms: 'Virgin MMS',
+}
+
 export const PageHeader = ({
   children 
 }) => {
@@ -153,24 +229,58 @@ export const LoginTextInput = ({
   )
 }
 
-export const LoginDropdownInput = ({
-  label, 
-  icon,
+export const TestLoginDropDownInput = ({
+  label,
+  isOpen,
+  setOpen,
   selectedValue,
   onValueChange,
-  items,
+  menu
 }) => {
   return (
-    <View>
+    <Container>
       <StyledInputLabel>{label}</StyledInputLabel>
-      <Picker
-        selectedValue={selectedValue}
-        onValueChange={onValueChange}
-      >
-        {items.map((provider) => {
-          return <Picker.Item label={provider.label} value={provider.value} key={provider.value} />
-        })}
-      </Picker>
-    </View>
+      <TouchableOpacity activeOpacity={0.8} key={`${menu.menuName}2`}
+        style={{ 
+          backgroundColor: '#E5E7EB',
+          // marginHorizontal: constant.SPACING / 1.7,
+          // marginVertical: constant.SPACING / 2.5,
+          borderRadius: '5px',
+        }}
+        onPress={() => {
+          // LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
+          LayoutAnimation.configureNext(LayoutAnimation.create(200, 'easeInEaseOut', 'opacity'))
+          isOpen ? setOpen(false) : setOpen(true);
+        }}>
+        <Row style={{
+          // paddingHorizontal: constant.SPACING / 1.5,
+          // paddingVertical: constant.SPACING / 1.2,
+        }}>
+          <Ionicons 
+            name={menu.iconName} 
+            size={30}
+            color={menu.iconColor} 
+          />
+          <Text style={{
+            // fontSize: constant.textFontSize,
+            // paddingHorizontal: constant.SPACING
+          }}>
+            {selectedValue ? providerConversion[selectedValue] : menu.placeholder}
+          </Text>
+        </Row>
+        {isOpen && <View style={{ borderRadius: '5px', backgroundColor: '#E5E7EB' }}>
+          {menu.dropdownList.map((subMenu, index) => (
+            <TouchableNativeFeedback key={index}>
+              <View style={{
+                // paddingHorizontal: constant.SPACING,
+                // paddingVertical: constant.SPACING / 1.5,
+              }}>
+                <Text>{subMenu.label}</Text>
+              </View>
+            </TouchableNativeFeedback>
+          ))}
+        </View>}
+      </TouchableOpacity>
+    </Container>
   )
 }

app/register.jsx

@@ -6,6 +6,7 @@ import { useFormik } from 'formik';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { Ionicons } from '@expo/vector-icons';
 import {
+  providerMenu,
   PageHeader,
   StyledContainer,
   InnerContainer,
@@ -17,21 +18,17 @@ import {
   ButtonText,
   MessageBox,
   LoginTextInput,
-  LoginDropdownInput
+  LoginDropdownInput,
+  TestLoginDropDownInput,
 } from './helpers.jsx';
 
-const providers = [
-  {label: 'Verizon', value: 'verizon'},
-  {label: 'AT&T', value: 'att'},
-  {label: 'T-Mobile', value: 'tmobile'}
-]
-
-
 export default function Register() {
 
+  const [providerDropdownOpen, setProviderDropdownOpen] = useState(false);
   const [hidePassword, setHidePassword] = useState(true);
   const [registerButtonDisabled, setRegisterButtonDisabled] = useState(true);
 
+
   const formik = useFormik({
     initialValues: {
       firstName: '',
@@ -112,11 +109,13 @@ export default function Register() {
                 keyboardType="number-pad"
                 maxLength={14}
               />
-              <LoginDropdownInput
+              <TestLoginDropDownInput
                 label="Cellular Provider"
+                isOpen={providerDropdownOpen}
+                setOpen={setProviderDropdownOpen}
                 selectedValue={formik.values.provider}
                 onValueChange={formik.handleChange('provider')}
-                items={providers}
+                menu={providerMenu}
               />
               <LoginTextInput 
                 label="Email Address"

components/Container.tsx

@@ -0,0 +1,20 @@
+import { View, ViewStyle } from "react-native";
+
+interface ContainerProps {
+  children?: React.ReactNode;
+  backgroundColor?: string;
+  style?: ViewStyle;
+}
+export const Container = ({
+  children,
+  backgroundColor,
+  style,
+}: ContainerProps) => {
+  return (
+    <View style={[
+        { flex: 1 }, 
+        { backgroundColor }, 
+        style
+    ]}>{children}</View>
+  )
+};

components/Row.tsx

@@ -0,0 +1,24 @@
+import { View, ViewStyle } from "react-native";
+import { ReactNode } from "react";
+
+interface RowProps {
+  children?: ReactNode | ReactNode[];
+  backgroundColor?: string;
+  style?: ViewStyle | ViewStyle[];
+}
+
+export const Row = ({
+  children,
+  backgroundColor,
+  style,
+}: RowProps) => {
+  return (
+    <View style={[
+        { flexDirection: 'row', alignItems: 'center' }, 
+        { backgroundColor }, 
+        style
+    ]}>
+      {children}
+    </View>
+  )
+};

package-lock.json

@@ -9,7 +9,6 @@
       "version": "1.0.1",
       "dependencies": {
         "@expo/vector-icons": "^14.0.2",
-        "@react-native-picker/picker": "2.7.5",
         "@react-navigation/native": "^6.0.2",
         "expo": "~51.0.24",
         "expo-constants": "~16.0.2",
@@ -5892,15 +5891,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/@react-native-picker/picker": {
-      "version": "2.7.5",
-      "resolved": "https://registry.npmjs.org/@react-native-picker/picker/-/picker-2.7.5.tgz",
-      "integrity": "sha512-vhMaOLkXSUb+YKVbukMJToU4g+89VMhBG2U9+cLYF8X8HtFRidrHjohGqT8/OyesDuKIXeLIP+UFYI9Q9CRA9Q==",
-      "peerDependencies": {
-        "react": "*",
-        "react-native": "*"
-      }
-    },
     "node_modules/@react-native/assets-registry": {
       "version": "0.74.85",
       "resolved": "https://registry.npmjs.org/@react-native/assets-registry/-/assets-registry-0.74.85.tgz",

package.json

@@ -16,7 +16,6 @@
   },
   "dependencies": {
     "@expo/vector-icons": "^14.0.2",
-    "@react-native-picker/picker": "2.7.5",
     "@react-navigation/native": "^6.0.2",
     "expo": "~51.0.24",
     "expo-constants": "~16.0.2",