1.0.1

- Rename App - Disable Web - Tiny Edits - Add Dropdown - Add Register Fields
2024-08-01 00:39:02 -04:00 · 2024-08-01 00:39:02 -04:00 · 98dfa6b214
commit 98dfa6b214
parent e088830e48
8 changed files with 457 additions and 338 deletions
--- 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"
    ],
--- 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`
@ -139,3 +140,25 @@ export const LoginTextInput = ({
    </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>
+  )
+}
--- 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';
@ -24,8 +24,32 @@ 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,40 +85,33 @@ 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}
+                  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={handleChange('password')}
-                      onBlur={handleBlur('password')}
-                      value={values.password}
+                  onChangeText={formik.handleChange('password')}
+                  onBlur={formik.handleBlur('password')}
+                  value={formik.values.password}
                  secureTextEntry={hidePassword}
                  isPassword
                  hidePassword={hidePassword}
                  setHidePassword={setHidePassword}
                />
                <MessageBox>...</MessageBox>
-                    <StyledButton onPress={handleSubmit}>
+                <StyledButton onPress={formik.handleSubmit} disabled={loginButtonDisabled} style={loginButtonDisabled ? {backgroundColor: 'grey'} : {}}>
                  <ButtonText>Login</ButtonText>
                </StyledButton>
                <Line />
@ -105,8 +122,6 @@ export default function TabLayout() {
                  </Link>
                </ExtraView>
              </StyledFormArea>
-                )}
-              </Formik>
            </InnerContainer>
          </StyledContainer>
        )}
--- a/app/register.jsx
+++ 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>
+  )
+}
--- a/app/register.tsx
+++ b/app/register.tsx
@ -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>
-  )
-}
--- 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",
--- 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"
  },
--- a/tsconfig.json
+++ b/tsconfig.json
@ -11,6 +11,7 @@
  "include": [
    "**/*.ts",
    "**/*.tsx",
+    "**/*.jsx",
    ".expo/types/**/*.ts",
    "expo-env.d.ts"
  ]