From 98dfa6b2145c3a042cd0b186b1edc4d8c1f8b3ea Mon Sep 17 00:00:00 2001
From: mattdimegs <mdimeglio7@optonline.net>
Date: Thu, 1 Aug 2024 00:39:02 -0400
Subject: [PATCH] 1.0.1

- Rename App
- Disable Web
- Tiny Edits
- Add Dropdown
- Add Register Fields
---
 app.json          |  16 +--
 app/helpers.jsx   |  71 ++++++----
 app/login.jsx     | 109 ++++++++-------
 app/register.jsx  | 156 ++++++++++++++++++++++
 app/register.tsx  | 107 ---------------
 package-lock.json | 329 +++++++++++++++++++++++++---------------------
 package.json      |   6 +-
 tsconfig.json     |   1 +
 8 files changed, 457 insertions(+), 338 deletions(-)
 create mode 100644 app/register.jsx
 delete mode 100644 app/register.tsx

diff --git a/app.json b/app.json
index 78a9007..b307ed0 100644
--- a/app.json
+++ b/app.json
@@ -1,8 +1,8 @@
 {
   "expo": {
-    "name": "test-application",
-    "slug": "test-application",
-    "version": "1.0.0",
+    "name": "Tones",
+    "slug": "Tones",
+    "version": "1.0.1",
     "orientation": "portrait",
     "icon": "./assets/images/icon.png",
     "scheme": "myapp",
@@ -23,11 +23,11 @@
       },
       "package": "com.anonymous.testapplication"
     },
-    "web": {
-      "bundler": "metro",
-      "output": "static",
-      "favicon": "./assets/images/favicon.png"
-    },
+    // "web": {
+    //   "bundler": "metro",
+    //   "output": "static",
+    //   "favicon": "./assets/images/favicon.png"
+    // },
     "plugins": [
       "expo-router"
     ],
diff --git a/app/helpers.jsx b/app/helpers.jsx
index 69b8a4b..61e2f09 100644
--- a/app/helpers.jsx
+++ b/app/helpers.jsx
@@ -1,7 +1,8 @@
 import styled from 'styled-components';
 import Constants from 'expo-constants';
 import { View, Text, Image, TextInput, TouchableOpacity } from 'react-native';
-import { Octicons, Ionicons } from '@expo/vector-icons';
+import { Ionicons } from '@expo/vector-icons';
+import { Picker } from '@react-native-picker/picker';
 
 const StatusBarHeight = Constants.statusBarHeight;
 
@@ -19,7 +20,7 @@ export const InnerContainer = styled.View`
 
 export const StyledFormArea = styled.View`
   padding-top: 10px;
-  width: 80%;
+  width: 90%;
 `;
 
 export const Title = styled.Text`
@@ -117,25 +118,47 @@ export const TextLinkContent = styled.Text`
 `
 
 export const LoginTextInput = ({
-    label, 
-    icon, 
-    isPassword = false, 
-    hidePassword = true, 
-    setHidePassword = (boolean) => {},
-    ...props
-  }) => {
-    return (
-      <View>
-        <LeftIcon>
-          <Ionicons name={icon} size={30} color='red' />
-        </LeftIcon>
-        <StyledInputLabel>{label}</StyledInputLabel>
-        <StyledTextInput {...props} />
-        {isPassword ? (
-          <RightIcon onPress={() => {setHidePassword(!hidePassword)}}>
-            <Ionicons name={hidePassword ? 'eye-off-outline' : 'eye-outline'} size={30} color="gray" />
-          </RightIcon>
-        ) : null}
-      </View>
-    )
-  }
\ No newline at end of file
+  label, 
+  icon, 
+  isPassword = false, 
+  hidePassword = true, 
+  setHidePassword = (boolean) => {},
+  ...props
+}) => {
+  return (
+    <View>
+      <LeftIcon>
+        <Ionicons name={icon} size={30} color='red' />
+      </LeftIcon>
+      <StyledInputLabel>{label}</StyledInputLabel>
+      <StyledTextInput {...props} />
+      {isPassword ? (
+        <RightIcon onPress={() => {setHidePassword(!hidePassword)}}>
+          <Ionicons name={hidePassword ? 'eye-off-outline' : 'eye-outline'} size={30} color="gray" />
+        </RightIcon>
+      ) : null}
+    </View>
+  )
+}
+
+export const LoginDropdownInput = ({
+  label, 
+  icon,
+  selectedValue,
+  onValueChange,
+  items,
+}) => {
+  return (
+    <View>
+      <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>
+  )
+}
\ No newline at end of file
diff --git a/app/login.jsx b/app/login.jsx
index 09611e5..56bb74f 100644
--- a/app/login.jsx
+++ b/app/login.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { StatusBar } from 'expo-status-bar';
-import { Formik } from 'formik';
+import { useFormik } from 'formik';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { Tabs, Link } from 'expo-router';
 import { useColorScheme } from '@/hooks/useColorScheme';
@@ -23,9 +23,33 @@ import {
 
 export default function TabLayout() {
     const colorScheme = useColorScheme();
+
+    const formik = useFormik({
+      initialValues: {
+        number: '',
+        password: ''
+      },
+      onSubmit: (values) => {
+        values.number = values.number.replace(/[()\-\s]/g, '');
+        console.log(values);
+      },
+    });
+
+    const formValues = formik.values;
   
     const [login, setLogin] = useState(false);
     const [hidePassword, setHidePassword] = useState(true);
+    const [loginButtonDisabled, setLoginButtonDisabled] = useState(true);
+
+    useEffect(() => {
+      if (formValues) {
+        if (formValues.number.length === 14 && formValues.password) {
+          setLoginButtonDisabled(false);
+        } else {
+          setLoginButtonDisabled(true);
+        }
+      }
+    }, [formValues])
   
     return (
       <React.Fragment>
@@ -61,52 +85,43 @@ export default function TabLayout() {
               <PageImage resizeMode="cover" source={require('./../assets/images/tones-logo.png')} />
               <Title>Tones</Title>
               <SubTitle>Account Login</SubTitle>
-  
-              <Formik
-                initialValues={{ number: '', password: '' }}
-                onSubmit={(values) => {
-                  console.log(values);
-                }}
-              >
-                {({handleChange, handleBlur, handleSubmit, values}) => (
-                  <StyledFormArea>
-                    <LoginTextInput 
-                      label="Phone Number"
-                      icon="call-outline"
-                      placeholder="123-456-7890"
-                      placeholderTextColor="gray"
-                      onChangeText={handleChange('number')}
-                      onBlur={handleBlur('number')}
-                      value={values.number}
-                      keyboardType="number-pad"
-                    />
-                    <LoginTextInput 
-                      label="Password"
-                      icon="lock-closed-outline"
-                      placeholder="* * * * * *"
-                      placeholderTextColor="gray"
-                      onChangeText={handleChange('password')}
-                      onBlur={handleBlur('password')}
-                      value={values.password}
-                      secureTextEntry={hidePassword}
-                      isPassword
-                      hidePassword={hidePassword}
-                      setHidePassword={setHidePassword}
-                    />
-                    <MessageBox>...</MessageBox>
-                    <StyledButton onPress={handleSubmit}>
-                      <ButtonText>Login</ButtonText>
-                    </StyledButton>
-                    <Line />
-                    <ExtraView>
-                      <ExtraText>Don't have an account already? </ExtraText>
-                      <Link href='./register'>
-                        <TextLinkContent>Register</TextLinkContent>
-                      </Link>
-                    </ExtraView>
-                  </StyledFormArea>
-                )}
-              </Formik>
+              <StyledFormArea>
+                <LoginTextInput 
+                  label="Phone Number"
+                  icon="call-outline"
+                  placeholder="123-456-7890"
+                  placeholderTextColor="gray"
+                  onChangeText={formik.handleChange('number')}
+                  onBlur={formik.handleBlur('number')}
+                  value={formik.values.number.replace(/^(\d{3})(\d{3})(\d+)$/, "($1) $2-$3")}
+                  keyboardType="number-pad"
+                  maxLength={14}
+                />
+                <LoginTextInput 
+                  label="Password"
+                  icon="lock-closed-outline"
+                  placeholder="* * * * * *"
+                  placeholderTextColor="gray"
+                  onChangeText={formik.handleChange('password')}
+                  onBlur={formik.handleBlur('password')}
+                  value={formik.values.password}
+                  secureTextEntry={hidePassword}
+                  isPassword
+                  hidePassword={hidePassword}
+                  setHidePassword={setHidePassword}
+                />
+                <MessageBox>...</MessageBox>
+                <StyledButton onPress={formik.handleSubmit} disabled={loginButtonDisabled} style={loginButtonDisabled ? {backgroundColor: 'grey'} : {}}>
+                  <ButtonText>Login</ButtonText>
+                </StyledButton>
+                <Line />
+                <ExtraView>
+                  <ExtraText>Don't have an account already? </ExtraText>
+                  <Link href='./register'>
+                    <TextLinkContent>Register</TextLinkContent>
+                  </Link>
+                </ExtraView>
+              </StyledFormArea>
             </InnerContainer>
           </StyledContainer>
         )}
diff --git a/app/register.jsx b/app/register.jsx
new file mode 100644
index 0000000..bd76212
--- /dev/null
+++ b/app/register.jsx
@@ -0,0 +1,156 @@
+import React, { useState, useEffect } from 'react';
+import { ScrollView } from 'react-native';
+import { StatusBar } from 'expo-status-bar';
+import { useFormik, Formik } from 'formik';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import {
+  StyledContainer,
+  InnerContainer,
+  StyledFormArea,
+  Title,
+  SubTitle,
+  PageImage,
+  StyledButton,
+  ButtonText,
+  MessageBox,
+  LoginTextInput,
+  LoginDropdownInput
+} from './helpers.jsx';
+
+const providers = [
+  {label: 'Verizon', value: 'verizon'},
+  {label: 'AT&T', value: 'att'},
+  {label: 'T-Mobile', value: 'tmobile'}
+]
+
+
+export default function Register() {
+
+  const [hidePassword, setHidePassword] = useState(true);
+  const [registerButtonDisabled, setRegisterButtonDisabled] = useState(true);
+
+  const formik = useFormik({
+    initialValues: {
+      firstName: '',
+      lastName: '',
+      number: '',
+      provider: '',
+      email: '', 
+      password: '', 
+      passwordConfirmation: '' 
+    },
+    onSubmit: (values) => {
+      values.number = values.number.replace(/[()\-\s]/g, '');
+      console.log(values);
+    }
+  });
+
+  const formValues = formik.values;
+
+  useEffect(() => {
+    if (formValues) {
+      if ((formValues.number.length === 14 || (formValues.number.length === 10 && !formValues.number.includes('('))) && formValues.email && formValues.firstName && formValues.lastName) {
+        if (formValues.password.length !== 0 && (formValues.password === formValues.passwordConfirmation)) {
+          setRegisterButtonDisabled(false);
+        } else {
+          setRegisterButtonDisabled(true);
+        }
+      } else {
+        setRegisterButtonDisabled(true);
+      }
+    } else {
+      setRegisterButtonDisabled(true);
+    }
+  }, [formValues])
+
+  return (
+    <ScrollView>
+      <StyledContainer>
+        <StatusBar style="dark" />
+        <SafeAreaView />
+        <InnerContainer>
+          <PageImage resizeMode="cover" source={require('./../assets/images/tones-logo.png')} />
+          <Title>Tones</Title>
+          <SubTitle>Account Register</SubTitle>
+          <StyledFormArea>
+            <LoginTextInput
+              label="First Name"
+              icon="person-outline"
+              placeholder="Bud"
+              placeholderTextColor="gray"
+              onChangeText={formik.handleChange('firstName')}
+              onBlur={formik.handleBlur('firstName')}
+              value={formik.values.firstName}
+            />
+            <LoginTextInput
+              label="Last Name"
+              icon="people-outline"
+              placeholder="Doble"
+              placeholderTextColor="gray"
+              onChangeText={formik.handleChange('lastName')}
+              onBlur={formik.handleBlur('lastName')}
+              value={formik.values.lastName}
+            />
+            <LoginTextInput 
+              label="Phone Number"
+              icon="call-outline"
+              placeholder="123-456-7890"
+              placeholderTextColor="gray"
+              onChangeText={formik.handleChange('number')}
+              onBlur={formik.handleBlur('number')}
+              value={formik.values.number.replace(/^(\d{3})(\d{3})(\d+)$/, "($1) $2-$3")}
+              keyboardType="number-pad"
+              maxLength={14}
+            />
+            <LoginDropdownInput
+              label="Cellular Provider"
+              selectedValue={formik.values.provider}
+              onValueChange={formik.handleChange('provider')}
+              items={providers}
+            />
+            <LoginTextInput 
+              label="Email Address"
+              icon="mail-outline"
+              placeholder="test@organization.com"
+              placeholderTextColor="gray"
+              onChangeText={formik.handleChange('email')}
+              onBlur={formik.handleBlur('email')}
+              value={formik.values.email}
+              keyboardType="email-address"
+            />
+            <LoginTextInput 
+              label="Password"
+              icon="lock-closed-outline"
+              placeholder="* * * * * *"
+              placeholderTextColor="gray"
+              onChangeText={formik.handleChange('password')}
+              onBlur={formik.handleBlur('password')}
+              value={formik.values.password}
+              secureTextEntry={hidePassword}
+              isPassword
+              hidePassword={hidePassword}
+              setHidePassword={setHidePassword}
+            />
+            <LoginTextInput 
+              label="Confirm Password"
+              icon="shield-checkmark-outline"
+              placeholder="* * * * * *"
+              placeholderTextColor="gray"
+              onChangeText={formik.handleChange('passwordConfirmation')}
+              onBlur={formik.handleBlur('passwordConfirmation')}
+              value={formik.values.passwordConfirmation}
+              secureTextEntry={hidePassword}
+              isPassword
+              hidePassword={hidePassword}
+              setHidePassword={setHidePassword}
+            />
+            <MessageBox>...</MessageBox>
+            <StyledButton onPress={formik.handleSubmit} style={registerButtonDisabled ? {backgroundColor: 'grey'} : {}}>
+              <ButtonText>Register</ButtonText>
+            </StyledButton>
+          </StyledFormArea>
+        </InnerContainer>
+      </StyledContainer>
+    </ScrollView>
+  )
+}
\ No newline at end of file
diff --git a/app/register.tsx b/app/register.tsx
deleted file mode 100644
index 33b1208..0000000
--- a/app/register.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { ScrollView } from 'react-native';
-import { StatusBar } from 'expo-status-bar';
-import { Formik } from 'formik';
-import { SafeAreaView } from 'react-native-safe-area-context';
-import {
-    StyledContainer,
-    InnerContainer,
-    StyledFormArea,
-    Title,
-    SubTitle,
-    PageImage,
-    StyledButton,
-    ButtonText,
-    MessageBox,
-    LoginTextInput
-  } from './helpers.jsx';
-
-export default function Register() {
-
-  const [hidePassword, setHidePassword] = useState(true);
-
-  return (
-    <ScrollView>
-      <StyledContainer>
-        <StatusBar style="dark" />
-        <SafeAreaView />
-        <InnerContainer>
-          <PageImage resizeMode="cover" source={require('./../assets/images/tones-logo.png')} />
-          <Title>Tones</Title>
-          <SubTitle>Account Register</SubTitle>
-
-          <Formik
-            initialValues={{
-              firstName: '',
-              lastName: '',
-              number: '',
-              email: '', 
-              password: '', 
-              passwordConfirmation: '' 
-            }}
-            onSubmit={(values) => {
-              values.number = values.number.replace(/[()\-\s]/g, '');
-              console.log(values);
-            }}
-          >
-            {({handleChange, handleBlur, handleSubmit, values}) => (
-              <StyledFormArea>
-                <LoginTextInput 
-                  label="Phone Number"
-                  icon="call-outline"
-                  placeholder="123-456-7890"
-                  placeholderTextColor="gray"
-                  onChangeText={handleChange('number')}
-                  onBlur={handleBlur('number')}
-                  value={values.number.replace(/^(\d{3})(\d{3})(\d+)$/, "($1) $2-$3")}
-                  keyboardType="number-pad"
-                  maxLength={14}
-                />
-                <LoginTextInput 
-                  label="Email Address"
-                  icon="mail-outline"
-                  placeholder="test-email@post53.org"
-                  placeholderTextColor="gray"
-                  onChangeText={handleChange('email')}
-                  onBlur={handleBlur('email')}
-                  value={values.email}
-                  keyboardType="email-address"
-                />
-                <LoginTextInput 
-                  label="Password"
-                  icon="lock-closed-outline"
-                  placeholder="* * * * * *"
-                  placeholderTextColor="gray"
-                  onChangeText={handleChange('password')}
-                  onBlur={handleBlur('password')}
-                  value={values.password}
-                  secureTextEntry={hidePassword}
-                  isPassword
-                  hidePassword={hidePassword}
-                  setHidePassword={setHidePassword}
-                />
-                <LoginTextInput 
-                  label="Confirm Password"
-                  icon="lock-closed-outline"
-                  placeholder="* * * * * *"
-                  placeholderTextColor="gray"
-                  onChangeText={handleChange('password')}
-                  onBlur={handleBlur('password')}
-                  value={values.passwordConfirmation}
-                  secureTextEntry={hidePassword}
-                  isPassword
-                  hidePassword={hidePassword}
-                  setHidePassword={setHidePassword}
-                />
-                <MessageBox>...</MessageBox>
-                <StyledButton onPress={handleSubmit}>
-                  <ButtonText>Register</ButtonText>
-                </StyledButton>
-              </StyledFormArea>
-            )}
-          </Formik>
-        </InnerContainer>
-      </StyledContainer>
-    </ScrollView>
-  )
-}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 183f336..c9a0889 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,14 +1,15 @@
 {
-  "name": "test-application",
-  "version": "1.0.0",
+  "name": "tones",
+  "version": "1.0.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "test-application",
-      "version": "1.0.0",
+      "name": "tones",
+      "version": "1.0.1",
       "dependencies": {
         "@expo/vector-icons": "^14.0.2",
+        "@react-native-picker/picker": "^2.7.7",
         "@react-navigation/native": "^6.0.2",
         "expo": "~51.0.24",
         "expo-constants": "~16.0.2",
@@ -28,6 +29,7 @@
         "react-native-safe-area-context": "4.10.5",
         "react-native-screens": "3.31.1",
         "react-native-textinput-effects": "^0.6.3",
+        "react-native-ui-kitten": "^4.4.1",
         "react-native-web": "~0.19.10",
         "styled-components": "^6.1.12"
       },
@@ -2167,6 +2169,16 @@
       "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
       "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ=="
     },
+    "node_modules/@eva-design/dss": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@eva-design/dss/-/dss-1.4.0.tgz",
+      "integrity": "sha512-T0qIZrTNjXiLIFA1Rwzqledw94pWoxQKIunYw+zmSG/vMDHYn6VDEnaZSdsoNBa7HflDgzADB1Sw2qimb9VgZQ=="
+    },
+    "node_modules/@eva-design/processor": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@eva-design/processor/-/processor-1.4.0.tgz",
+      "integrity": "sha512-QEiP6i2UORPNUZQHPvrCqyy2NQcLc9gvkeiuEckfiruwi++S89/HlJKcLvraiVD8RzZ7r8b7QcAIZdvyScNW7w=="
+    },
     "node_modules/@expo/bunyan": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@expo/bunyan/-/bunyan-4.0.0.tgz",
@@ -5853,6 +5865,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/@react-native-picker/picker": {
+      "version": "2.7.7",
+      "resolved": "https://registry.npmjs.org/@react-native-picker/picker/-/picker-2.7.7.tgz",
+      "integrity": "sha512-CTHthVmx8ujlH/u5AnxLQfsheh/DoEbo+Kbx0HGTlbKVLC1eZ4Kr9jXIIUcwB7JEgOXifdZIPQCsoTc/7GQ0ag==",
+      "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",
@@ -7441,6 +7462,12 @@
         "node": ">= 6"
       }
     },
+    "node_modules/boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
+      "peer": true
+    },
     "node_modules/bplist-creator": {
       "version": "0.0.7",
       "resolved": "https://registry.npmjs.org/bplist-creator/-/bplist-creator-0.0.7.tgz",
@@ -8275,6 +8302,18 @@
         "hyphenate-style-name": "^1.0.3"
       }
     },
+    "node_modules/css-select": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-2.1.0.tgz",
+      "integrity": "sha512-Dqk7LQKpwLoH3VovzZnkzegqNSuAziQyNZUcrdDM401iY+R5NkGBXGmtO05/yaXQziALuPogeG0b7UAgjnTJTQ==",
+      "peer": true,
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-what": "^3.2.1",
+        "domutils": "^1.7.0",
+        "nth-check": "^1.0.2"
+      }
+    },
     "node_modules/css-to-react-native": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
@@ -8285,6 +8324,40 @@
         "postcss-value-parser": "^4.0.2"
       }
     },
+    "node_modules/css-tree": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
+      "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
+      "peer": true,
+      "dependencies": {
+        "mdn-data": "2.0.14",
+        "source-map": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/css-tree/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/css-what": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.4.2.tgz",
+      "integrity": "sha512-ACUm3L0/jiZTqfzRM3Hi9Q8eZqd6IK37mMWPLz9PJxkLWllYeRf+EHUSHYEtFop2Eqytaq1FizFVh7XfBnXCDQ==",
+      "peer": true,
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
     "node_modules/cssom": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.5.0.tgz",
@@ -8639,6 +8712,43 @@
         "node": ">=8"
       }
     },
+    "node_modules/dom-serializer": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
+      "integrity": "sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==",
+      "peer": true,
+      "dependencies": {
+        "domelementtype": "^2.0.1",
+        "entities": "^2.0.0"
+      }
+    },
+    "node_modules/dom-serializer/node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "peer": true
+    },
+    "node_modules/dom-serializer/node_modules/entities": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
+      "peer": true,
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/domelementtype": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz",
+      "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==",
+      "peer": true
+    },
     "node_modules/domexception": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/domexception/-/domexception-4.0.0.tgz",
@@ -8652,6 +8762,16 @@
         "node": ">=12"
       }
     },
+    "node_modules/domutils": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz",
+      "integrity": "sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==",
+      "peer": true,
+      "dependencies": {
+        "dom-serializer": "0",
+        "domelementtype": "1"
+      }
+    },
     "node_modules/dotenv": {
       "version": "16.4.5",
       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.5.tgz",
@@ -9564,6 +9684,11 @@
       "resolved": "https://registry.npmjs.org/fbjs-css-vars/-/fbjs-css-vars-1.0.2.tgz",
       "integrity": "sha512-b2XGFAFdWZWg0phtAWLHCk836A1Xann+I+Dgd3Gk64MHKZO44FfoD1KxyvbSh0qZsIoXQGGlVztIY+oitJPpRQ=="
     },
+    "node_modules/fecha": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/fecha/-/fecha-3.0.3.tgz",
+      "integrity": "sha512-6LQK/1jud/FZnfEEZJ7y81vw7ge81DNd/XEsX0hgMUjhS+QMljkb1C0czBaP7dMNRVrd5mw/J2J7qI2Nw+TWZw=="
+    },
     "node_modules/fetch-retry": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/fetch-retry/-/fetch-retry-4.1.1.tgz",
@@ -9888,19 +10013,6 @@
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
       "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
     },
-    "node_modules/fsevents": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
-      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "hasInstallScript": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
-      }
-    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -13373,139 +13485,6 @@
         "lightningcss-win32-x64-msvc": "1.19.0"
       }
     },
-    "node_modules/lightningcss-darwin-arm64": {
-      "version": "1.19.0",
-      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.19.0.tgz",
-      "integrity": "sha512-wIJmFtYX0rXHsXHSr4+sC5clwblEMji7HHQ4Ub1/CznVRxtCFha6JIt5JZaNf8vQrfdZnBxLLC6R8pC818jXqg==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-darwin-x64": {
-      "version": "1.19.0",
-      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.19.0.tgz",
-      "integrity": "sha512-Lif1wD6P4poaw9c/4Uh2z+gmrWhw/HtXFoeZ3bEsv6Ia4tt8rOJBdkfVaUJ6VXmpKHALve+iTyP2+50xY1wKPw==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-linux-arm-gnueabihf": {
-      "version": "1.19.0",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.19.0.tgz",
-      "integrity": "sha512-P15VXY5682mTXaiDtbnLYQflc8BYb774j2R84FgDLJTN6Qp0ZjWEFyN1SPqyfTj2B2TFjRHRUvQSSZ7qN4Weig==",
-      "cpu": [
-        "arm"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-linux-arm64-gnu": {
-      "version": "1.19.0",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.19.0.tgz",
-      "integrity": "sha512-zwXRjWqpev8wqO0sv0M1aM1PpjHz6RVIsBcxKszIG83Befuh4yNysjgHVplF9RTU7eozGe3Ts7r6we1+Qkqsww==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-linux-arm64-musl": {
-      "version": "1.19.0",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.19.0.tgz",
-      "integrity": "sha512-vSCKO7SDnZaFN9zEloKSZM5/kC5gbzUjoJQ43BvUpyTFUX7ACs/mDfl2Eq6fdz2+uWhUh7vf92c4EaaP4udEtA==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-linux-x64-gnu": {
-      "version": "1.19.0",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.19.0.tgz",
-      "integrity": "sha512-0AFQKvVzXf9byrXUq9z0anMGLdZJS+XSDqidyijI5njIwj6MdbvX2UZK/c4FfNmeRa2N/8ngTffoIuOUit5eIQ==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-linux-x64-musl": {
-      "version": "1.19.0",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.19.0.tgz",
-      "integrity": "sha512-SJoM8CLPt6ECCgSuWe+g0qo8dqQYVcPiW2s19dxkmSI5+Uu1GIRzyKA0b7QqmEXolA+oSJhQqCmJpzjY4CuZAg==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
     "node_modules/lightningcss-win32-x64-msvc": {
       "version": "1.19.0",
       "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.19.0.tgz",
@@ -13559,6 +13538,11 @@
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
       "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
     },
+    "node_modules/lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="
+    },
     "node_modules/lodash.throttle": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
@@ -13815,6 +13799,12 @@
       "resolved": "https://registry.npmjs.org/md5hex/-/md5hex-1.0.0.tgz",
       "integrity": "sha512-c2YOUbp33+6thdCUi34xIyOU/a7bvGKj/3DB1iaPMTuPHf/Q2d5s4sn1FaCOO43XkXggnb08y5W2PU8UNYNLKQ=="
     },
+    "node_modules/mdn-data": {
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
+      "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==",
+      "peer": true
+    },
     "node_modules/memoize-one": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
@@ -14730,6 +14720,15 @@
         "node": ">=4"
       }
     },
+    "node_modules/nth-check": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz",
+      "integrity": "sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==",
+      "peer": true,
+      "dependencies": {
+        "boolbase": "~1.0.0"
+      }
+    },
     "node_modules/nullthrows": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/nullthrows/-/nullthrows-1.1.1.tgz",
@@ -15681,6 +15680,20 @@
         "react-native": "*"
       }
     },
+    "node_modules/react-native-svg": {
+      "version": "9.13.6",
+      "resolved": "https://registry.npmjs.org/react-native-svg/-/react-native-svg-9.13.6.tgz",
+      "integrity": "sha512-vjjuJhEhQCwWjqsgWyGy6/C/LIBM2REDxB40FU1PMhi8T3zQUwUHnA6M15pJKlQG8vaZyA+QnLyIVhjtujRgig==",
+      "peer": true,
+      "dependencies": {
+        "css-select": "^2.0.2",
+        "css-tree": "^1.0.0-alpha.37"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": ">=0.50.0"
+      }
+    },
     "node_modules/react-native-textinput-effects": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/react-native-textinput-effects/-/react-native-textinput-effects-0.6.3.tgz",
@@ -15689,6 +15702,22 @@
         "@types/react-native-vector-icons": "^6.4.5"
       }
     },
+    "node_modules/react-native-ui-kitten": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/react-native-ui-kitten/-/react-native-ui-kitten-4.4.1.tgz",
+      "integrity": "sha512-l3QZNKl+y4U4gcuFJYb1ozXPmIJ5ipz+cxCNwq+sWlymY3A7puvqhP9bP1T2tc1wqwR3Gpjnc9Jlnwwv1OUzsQ==",
+      "deprecated": "This package is renamed to @ui-kitten/components",
+      "dependencies": {
+        "@eva-design/dss": "^1.4.0",
+        "@eva-design/processor": "^1.4.0",
+        "fecha": "3.0.3",
+        "hoist-non-react-statics": "^3.2.1",
+        "lodash.merge": "^4.6.1"
+      },
+      "peerDependencies": {
+        "react-native-svg": "^9.4.0"
+      }
+    },
     "node_modules/react-native-web": {
       "version": "0.19.12",
       "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.19.12.tgz",
diff --git a/package.json b/package.json
index ec919b7..cce343b 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
-  "name": "test-application",
+  "name": "tones",
   "main": "expo-router/entry",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "scripts": {
     "start": "expo start",
     "reset-project": "node ./scripts/reset-project.js",
@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "@expo/vector-icons": "^14.0.2",
+    "@react-native-picker/picker": "^2.7.7",
     "@react-navigation/native": "^6.0.2",
     "expo": "~51.0.24",
     "expo-constants": "~16.0.2",
@@ -35,6 +36,7 @@
     "react-native-safe-area-context": "4.10.5",
     "react-native-screens": "3.31.1",
     "react-native-textinput-effects": "^0.6.3",
+    "react-native-ui-kitten": "^4.4.1",
     "react-native-web": "~0.19.10",
     "styled-components": "^6.1.12"
   },
diff --git a/tsconfig.json b/tsconfig.json
index 909e901..758cc93 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -11,6 +11,7 @@
   "include": [
     "**/*.ts",
     "**/*.tsx",
+    "**/*.jsx",
     ".expo/types/**/*.ts",
     "expo-env.d.ts"
   ]