diff --git a/app/helpers.jsx b/app/generalHelpers.jsx similarity index 71% rename from app/helpers.jsx rename to app/generalHelpers.jsx index d15e9e4..8c3f822 100644 --- a/app/helpers.jsx +++ b/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 } from 'react-native'; +import { View, Text, LayoutAnimation, Image, TextInput, TouchableOpacity, TouchableNativeFeedback, ScrollView } 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 = ({ { - // LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut) - LayoutAnimation.configureNext(LayoutAnimation.create(200, 'easeInEaseOut', 'opacity')) + LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut); + LayoutAnimation.configureNext(LayoutAnimation.create(200, 'easeInEaseOut', 'opacity')); isOpen ? setOpen(false) : setOpen(true); }}> {selectedValue ? providerConversion[selectedValue] : menu.placeholder} + { + LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut); + LayoutAnimation.configureNext(LayoutAnimation.create(200, 'easeInEaseOut', 'opacity')); + isOpen ? setOpen(false) : setOpen(true); + }} + > + + - {isOpen && - {menu.dropdownList.map((subMenu, index) => ( - - - {subMenu.label} - - - ))} - } + {isOpen && + {menu.dropdownList.map((subMenu, index) => { + return ( + { + onValueChange(subMenu.value); + LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut); + LayoutAnimation.configureNext(LayoutAnimation.create(200, 'easeInEaseOut', 'opacity')); + setOpen(false); + }} + > + + {subMenu.label} + {selectedValue === subMenu.value && + + + + } + + + ) + })} + } ) diff --git a/app/login.jsx b/app/login.jsx index 82b60ee..6f186c3 100644 --- a/app/login.jsx +++ b/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); diff --git a/app/register.jsx b/app/register.jsx index 7ed4398..9e952e1 100644 --- a/app/register.jsx +++ b/app/register.jsx @@ -18,9 +18,8 @@ import { ButtonText, MessageBox, LoginTextInput, - LoginDropdownInput, - TestLoginDropDownInput, -} from './helpers.jsx'; + RegisterDropdownInput, +} from './generalHelpers.jsx'; export default function Register() { @@ -109,7 +108,7 @@ export default function Register() { keyboardType="number-pad" maxLength={14} /> -