Register Dropdown Menu Contents

Added Checkmark for Selected
Fixed Spacing
Added Borders

app/generalHelpers.jsx

@@ -1,12 +1,9 @@
 import styled from 'styled-components';
-import Constants from 'expo-constants';
+import { View, Text, LayoutAnimation, Image, TextInput, TouchableOpacity, TouchableNativeFeedback, ScrollView } from 'react-native';
-import { View, Text, LayoutAnimation, Image, TextInput, TouchableOpacity, TouchableNativeFeedback } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import { Row } from '../components/Row';
 import { Container } from '../components/Container';
 
-const StatusBarHeight = Constants.statusBarHeight;
-
 export const StyledContainer = styled.View`
   flex: 1;
   padding: 25px;
@@ -66,6 +63,19 @@ export const RightIcon = styled.TouchableOpacity`
   z-index: 1;
 `;
 
+export const DropdownArrow = styled.TouchableOpacity`
+  right: 15px;
+  position: absolute;
+  z-index: 1;
+`;
+
+export const SelectedCheckmark = styled.View`
+  right: 4px;
+  top: 4px;
+  position: absolute;
+  z-index: 1;
+`;
+
 export const StyledButton = styled.TouchableOpacity`
   padding: 15px;
   background-color: red;
@@ -229,7 +239,7 @@ export const LoginTextInput = ({
   )
 }
 
-export const TestLoginDropDownInput = ({
+export const RegisterDropdownInput = ({
   label,
   isOpen,
   setOpen,
@@ -243,18 +253,18 @@ export const TestLoginDropDownInput = ({
       <TouchableOpacity activeOpacity={0.8} key={`${menu.menuName}2`}
         style={{ 
           backgroundColor: '#E5E7EB',
-          // marginHorizontal: constant.SPACING / 1.7,
+          marginTop: 3,
-          // marginVertical: constant.SPACING / 2.5,
+          marginBottom: 10,
           borderRadius: '5px',
         }}
         onPress={() => {
-          // LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
+          LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
-          LayoutAnimation.configureNext(LayoutAnimation.create(200, 'easeInEaseOut', 'opacity'))
+          LayoutAnimation.configureNext(LayoutAnimation.create(200, 'easeInEaseOut', 'opacity'));
           isOpen ? setOpen(false) : setOpen(true);
         }}>
         <Row style={{
-          // paddingHorizontal: constant.SPACING / 1.5,
+          paddingHorizontal: 16,
-          // paddingVertical: constant.SPACING / 1.2,
+          paddingVertical: 16 / 1.2,
         }}>
           <Ionicons 
             name={menu.iconName} 
@@ -262,24 +272,59 @@ export const TestLoginDropDownInput = ({
             color={menu.iconColor} 
           />
           <Text style={{
-            // fontSize: constant.textFontSize,
+            fontSize: 16,
-            // paddingHorizontal: constant.SPACING
+            paddingHorizontal: 16
           }}>
             {selectedValue ? providerConversion[selectedValue] : menu.placeholder}
           </Text>
+          <DropdownArrow
+            onPress={() => {
+              LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+              LayoutAnimation.configureNext(LayoutAnimation.create(200, 'easeInEaseOut', 'opacity'));
+              isOpen ? setOpen(false) : setOpen(true);
+            }}
+          >
+            <Ionicons 
+              name={isOpen ? "chevron-up-outline" : "chevron-down-outline"}
+              size={30}
+              color="gray" 
+            />
+          </DropdownArrow>
         </Row>
-        {isOpen && <View style={{ borderRadius: '5px', backgroundColor: '#E5E7EB' }}>
+        {isOpen && <ScrollView style={{ borderRadius: '5px', backgroundColor: '#E5E7EB' }}>
-          {menu.dropdownList.map((subMenu, index) => (
+          {menu.dropdownList.map((subMenu, index) => {
-            <TouchableNativeFeedback key={index}>
+            return (
+              <TouchableNativeFeedback
+                key={index}
+                onPress={() => {
+                  onValueChange(subMenu.value);
+                  LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+                  LayoutAnimation.configureNext(LayoutAnimation.create(200, 'easeInEaseOut', 'opacity'));
+                  setOpen(false);
+                }}
+              >
                 <View style={{
-                // paddingHorizontal: constant.SPACING,
+                  paddingHorizontal: 16,
-                // paddingVertical: constant.SPACING / 1.5,
+                  paddingVertical: 16 / 1.5,
+                  borderTopColor: 'gray',
+                  borderTopWidth: .5,
+                  marginHorizontal: 10
                 }}>
                   <Text>{subMenu.label}</Text>
+                  {selectedValue === subMenu.value &&
+                    <SelectedCheckmark>
+                      <Ionicons 
+                        name="checkmark-outline"
+                        size={30}
+                        color="red" 
+                      />
+                    </SelectedCheckmark>
+                  }
                 </View>
               </TouchableNativeFeedback>
-          ))}
+            )
-        </View>}
+          })}
+        </ScrollView>}
       </TouchableOpacity>
     </Container>
   )

app/login.jsx

@@ -19,7 +19,7 @@ import {
   ExtraText,
   TextLinkContent,
   LoginTextInput
-} from './helpers.jsx';
+} from './generalHelpers.jsx';
 
 export default function TabLayout() {
     const [hidePassword, setHidePassword] = useState(true);

app/register.jsx

@@ -18,9 +18,8 @@ import {
   ButtonText,
   MessageBox,
   LoginTextInput,
-  LoginDropdownInput,
+  RegisterDropdownInput,
-  TestLoginDropDownInput,
+} from './generalHelpers.jsx';
-} from './helpers.jsx';
 
 export default function Register() {
 
@@ -109,7 +108,7 @@ export default function Register() {
                 keyboardType="number-pad"
                 maxLength={14}
               />
-              <TestLoginDropDownInput
+              <RegisterDropdownInput
                 label="Cellular Provider"
                 isOpen={providerDropdownOpen}
                 setOpen={setProviderDropdownOpen}