Start on new design

app.json

@@ -5,10 +5,10 @@
     "owner": "mobileapptemplate",
     "version": "1.0.0",
     "orientation": "portrait",
-    "icon": "./src/assets/bp-icon.png",
+    "icon": "./assets/bp-icon.png",
     "userInterfaceStyle": "light",
     "splash": {
-      "image": "./src/assets/bp-splash.png",
+      "image": "./assets/bp-splash.png",
       "resizeMode": "contain",
       "backgroundColor": "#ffffff"
     },

package.json

@@ -30,6 +30,8 @@
     "react": "18.2.0",
     "react-native": "^0.74.5",
     "react-native-dotenv": "^3.4.11",
+    "react-native-element-dropdown": "^2.12.2",
+    "react-native-elements": "^3.4.3",
     "react-native-gesture-handler": "^2.20.0",
     "react-native-reanimated": "^3.15.4",
     "react-native-svg": "^15.7.1",

src/colors.ts

@@ -0,0 +1,12 @@
+export default {
+  primary_green: '#446127',
+  primary_green_2: '#9BA964',
+  primary_yellow: '#F9BD24',
+  white1: '#FFFFFF',
+  off_white: '#F9F4E8',
+  pure_black: '#000000',
+  black3: '#282828',
+  gray2: '#4F4F4F',
+  gray4: '#BDBDBD',
+  gray3: '#828282',
+};

src/components/Dropdown/Dropdown.tsx

@@ -0,0 +1,61 @@
+import { Text, View } from 'react-native';
+import { Dropdown as DropdownElement } from 'react-native-element-dropdown';
+import { Icon } from 'react-native-elements';
+import colors from '@/colors';
+import styles from './styles';
+
+type DropdownProps = {
+  options: string[];
+  setValue: (value: string) => any;
+  value: string;
+};
+
+type Option = {
+  label: string;
+  value: string;
+};
+
+function Dropdown({ options, setValue, value }: DropdownProps) {
+  return (
+    <View>
+      <DropdownElement
+        mode="default"
+        style={styles.dropdown}
+        placeholderStyle={[styles.text]}
+        selectedTextStyle={styles.text}
+        inputSearchStyle={styles.text}
+        itemTextStyle={[styles.text, styles.gray4]}
+        containerStyle={styles.dropdownContainer}
+        dropdownPosition="bottom"
+        itemContainerStyle={styles.itemContainer}
+        iconStyle={styles.iconStyle}
+        data={options.map(option => {
+          return { label: option, value: option };
+        })}
+        maxHeight={400}
+        labelField="label"
+        valueField="value"
+        placeholder="Select Option"
+        value={value}
+        renderItem={(item: Option, selected: boolean | undefined) => (
+          <Text style={[styles.text, styles.gray4, styles.itemContainer]}>
+            {item.value}
+          </Text>
+        )}
+        renderRightIcon={() => (
+          <Icon
+            name="arrow-drop-down"
+            type="material"
+            color={colors.gray4}
+            size={24}
+          />
+        )}
+        onChange={(item: Option) => {
+          setValue(item.value);
+        }}
+      />
+    </View>
+  );
+}
+
+export default Dropdown;