@hoddy-ui/core 1.0.5 → 1.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hoddy-ui/core",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "Core rich react native components written in typescript",
   "main": "index.ts",
   "repository": {

package/src/Components/Checkbox.tsx

@@ -0,0 +1,36 @@
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import React from "react";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
+
+const CheckBox = (props: any) => {
+  const iconName = props.isChecked
+    ? "checkbox-marked"
+    : "checkbox-blank-outline";
+
+  return (
+    <View style={styles.container}>
+      <Pressable onPress={props.onPress}>
+        <MaterialCommunityIcons name={iconName} size={24} color="#0195FF" />
+      </Pressable>
+    </View>
+  );
+};
+
+export default CheckBox;
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: "flex-start",
+    alignItems: "center",
+    flexDirection: "row",
+    width: 20,
+    marginTop: 5,
+    marginRight: 10,
+  },
+  title: {
+    fontSize: 16,
+    color: "#000",
+    marginLeft: 5,
+    fontWeight: "600",
+  },
+});

package/src/Components/FlashMessage.tsx

@@ -0,0 +1,57 @@
+import React, { useEffect, useState } from "react";
+import { View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { ScaledSheet } from "react-native-size-matters";
+import { useColors } from "../hooks";
+import { FlashMessageProps } from "../types";
+import Typography from "./Typography";
+
+const FlashMessage: React.FC<FlashMessageProps> = ({
+  title,
+  message,
+  type,
+}) => {
+  const { top } = useSafeAreaInsets();
+  const colors = useColors();
+  const [show, setShow] = useState(false);
+  const styles = ScaledSheet.create({
+    root: {
+      position: "absolute",
+      top: 0,
+      zIndex: 1000,
+      left: 0,
+      paddingTop: top + 10,
+      paddingHorizontal: "15@ms",
+      backgroundColor: colors[type].main,
+      width: "100%",
+      paddingBottom: "10@ms",
+    },
+  });
+  useEffect(() => {
+    if (message) setShow(true);
+    setTimeout(() => {
+      setShow(false);
+    }, 2000);
+  }, [message]);
+  return show ? (
+    <View style={styles.root}>
+      {title && (
+        <Typography
+          variant="body2"
+          fontWeight={600}
+          gutterBottom={3}
+          style={{ color: "#fff" }}
+        >
+          {title}
+        </Typography>
+      )}
+      <Typography fontWeight={700} style={{ color: "#fff" }}>
+        {message}
+      </Typography>
+    </View>
+  ) : (
+    <></>
+  );
+};
+
+export default FlashMessage;

package/src/Components/FormWrapper.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import {
+  Keyboard,
+  KeyboardAvoidingView,
+  ScrollView,
+  TouchableWithoutFeedback,
+  View,
+} from "react-native";
+import { ScaledSheet } from "react-native-size-matters";
+import { FormWrapperProps } from "../types";
+const FormWrapper: React.FC<FormWrapperProps> = ({
+  children,
+  behavior = "position",
+  contentContainerStyle,
+  mode = "scroll",
+  keyboardVerticalOffset = 50,
+  style = {},
+  onScroll,
+}) => {
+  const styles = ScaledSheet.create({
+    root: {
+      width: "100%",
+      flex: 1,
+      ...style,
+    },
+  });
+  return mode === "static" ? (
+    <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
+      <KeyboardAvoidingView
+        style={styles.root}
+        behavior={behavior}
+        contentContainerStyle={styles.root}
+        keyboardVerticalOffset={keyboardVerticalOffset}
+      >
+        {children}
+      </KeyboardAvoidingView>
+    </TouchableWithoutFeedback>
+  ) : (
+    <ScrollView
+      onScroll={onScroll}
+      showsVerticalScrollIndicator={false}
+      scrollEventThrottle={40}
+      keyboardDismissMode="interactive"
+      contentContainerStyle={contentContainerStyle}
+      keyboardShouldPersistTaps="handled"
+    >
+      <KeyboardAvoidingView
+        behavior={behavior}
+        style={styles.root}
+        keyboardVerticalOffset={keyboardVerticalOffset}
+      >
+        {children}
+      </KeyboardAvoidingView>
+    </ScrollView>
+  );
+};
+
+export default FormWrapper;

package/src/Components/Grid.tsx

@@ -0,0 +1,33 @@
+import { View, Text } from "react-native";
+import React from "react";
+import { ScaledSheet } from "react-native-size-matters";
+import { GridItemProps, GridProps } from "../types";
+
+export const GridItem: React.FC<GridItemProps> = ({
+  children,
+  col = 2,
+  alignItems,
+  spacing = 1,
+  style = {},
+}) => {
+  const styles = ScaledSheet.create({
+    gridItem: {
+      width: 100 / col + "%",
+      padding: spacing * 10 + "@ms",
+      alignItems: alignItems,
+    },
+  });
+  return <View children={children} style={[styles.gridItem, style]} />;
+};
+const Grid: React.FC<GridProps> = ({ children, spacing = 1, style = {} }) => {
+  const styles = ScaledSheet.create({
+    grid: {
+      flexWrap: "wrap",
+      marginHorizontal: -spacing * 10 + "@ms",
+      flexDirection: "row",
+    },
+  });
+  return <View children={children} style={[styles.grid, style]} />;
+};
+
+export default Grid;

package/src/Components/List.tsx

@@ -0,0 +1,98 @@
+import { MaterialIcons } from "@expo/vector-icons";
+import React from "react";
+import { TouchableOpacity, View } from "react-native";
+import { ScaledSheet } from "react-native-size-matters";
+import { useColors } from "../hooks";
+import { ListItemProps, ListItemTextProps, ListProps } from "../types";
+import Typography from "./Typography";
+
+export const ListItemText: React.FC<ListItemTextProps> = ({
+  primary,
+  divider,
+  primaryProps = {},
+  secondaryProps = {},
+  secondary,
+  style = {},
+}) => {
+  const colors = useColors();
+  const styles = ScaledSheet.create({
+    container: {
+      borderBottomColor: colors.white[4],
+      borderBottomWidth: divider ? 1 : 0,
+      paddingVertical: 0,
+      flexGrow: 1,
+      ...style,
+    },
+  });
+  return (
+    <View style={styles.container}>
+      {primary && (
+        <Typography
+          style={{ alignItems: "center" }}
+          variant="body1"
+          gutterBottom={2}
+          {...primaryProps}
+        >
+          {primary}
+        </Typography>
+      )}
+      {secondary && (
+        <Typography variant="body2" color="textSecondary" {...secondaryProps}>
+          {secondary}
+        </Typography>
+      )}
+    </View>
+  );
+};
+export const ListItem: React.FC<ListItemProps> = ({
+  link = false,
+  divider = false,
+  onPress,
+  index = 1,
+  style = {},
+  children,
+}) => {
+  const colors = useColors();
+
+  const styles: any = ScaledSheet.create({
+    root: {
+      flexDirection: "row",
+      alignItems: "center",
+      paddingHorizontal: "10@s",
+      borderBottomColor: colors.white[4],
+      borderBottomWidth: divider ? 1 : 0,
+      paddingVertical: "10@vs",
+    },
+  });
+  return (
+    <View
+
+    // layout={Layout.springify()}
+    // exiting={SlideOutDown.delay(index * 100)}
+    // entering={SlideInUp.delay(index * 100)}
+    >
+      <TouchableOpacity disabled={Boolean(!onPress)} onPress={onPress}>
+        <View style={{ ...styles.root, ...style }}>
+          {children}
+          {link && (
+            <MaterialIcons
+              color={colors.white[5]}
+              name="arrow-forward-ios"
+              size={15}
+            />
+          )}
+        </View>
+      </TouchableOpacity>
+    </View>
+  );
+};
+export const List: React.FC<ListProps> = ({ style = {}, children }) => {
+  const styles = ScaledSheet.create({
+    root: {
+      flex: 1,
+      paddingHorizontal: "20@ms",
+      ...style,
+    },
+  });
+  return <View style={styles.root}>{children}</View>;
+};

package/src/Components/Locator.tsx

@@ -0,0 +1,225 @@
+import { Ionicons } from "@expo/vector-icons";
+import React, { useState } from "react";
+import { Alert, TouchableOpacity, View } from "react-native";
+import { ListItem } from "./List";
+import TextField from "./TextField";
+
+import * as Location from "expo-location";
+import { ScaledSheet } from "react-native-size-matters";
+import { useColors } from "../hooks";
+import { LocatorProps } from "../types";
+
+// import { GOOGLE_MAP_API } from "../../api/config";
+import Typography from "./Typography";
+import { GOOGLE_MAP_API_KEY } from "../../api/config";
+
+Location.setGoogleApiKey(GOOGLE_MAP_API_KEY);
+
+type predictionType = {
+  id: string;
+  description: string;
+};
+export const getPredictionsFromCoords = async (coords: any) => {
+  if (!coords) return [];
+  const res = await (
+    await fetch(
+      `https://maps.googleapis.com/maps/api/geocode/json?radius=200&latlng=${coords.latitude},${coords.longitude}&key=${GOOGLE_MAP_API_KEY}`
+    )
+  ).json();
+
+  const p = [];
+
+  for (let key in res.results) {
+    const { formatted_address: description, place_id } = res.results[key];
+    p.push({
+      description,
+      id: place_id,
+      latLng: { lst: coords.latitude, lng: coords.longitude },
+    });
+  }
+
+  return p;
+};
+
+const Locator: React.FC<LocatorProps> = ({
+  variant = "contained",
+  onLocationSelected,
+  label,
+  error,
+  location = {
+    description: null,
+  },
+  renderInput,
+  gutterBottom = 0,
+  helperText,
+  float = true,
+  country = "ng",
+}) => {
+  const [changed, setChanged] = useState(false);
+  const [value, setValue] = useState("");
+  const [prediction, setPrediction] = useState<predictionType[]>([]);
+  const colors = useColors();
+  const styles: any = ScaledSheet.create({
+    list: {
+      backgroundColor: colors.white[2],
+      elevation: 10,
+      shadowColor: "#000",
+      shadowOpacity: 0.1,
+      shadowRadius: float ? 15 : 0,
+      shadowOffset: {
+        height: 10,
+      },
+      borderRadius: 10,
+      marginBottom: 10,
+      width: "100%",
+      zIndex: 1000,
+      marginTop: float ? 2 : "15@ms",
+      top: float ? "100%" : undefined,
+      position: float ? "absolute" : "relative",
+    },
+  });
+  const search = async (query: string) => {
+    const endpoint = `https://maps.googleapis.com/maps/api/place/autocomplete/json?input=${query}&components=country:${country}&radius=20000&location=6.465422,3.406448&key=${GOOGLE_MAP_API_KEY}`;
+    const res = await (await fetch(endpoint)).json();
+    const p = [];
+    for (let key in res.predictions) {
+      const { description, place_id } = res.predictions[key];
+      p.push({
+        description,
+        id: place_id,
+      });
+    }
+    setPrediction(p);
+  };
+
+  const locateMe = () => {
+    // Alert.alert(
+    //   "Use my location",
+    //   "Auto fill this input with my current location",
+    //   [{ text: "Cancel" }, { text: "Use Location", onPress: () => getLoc() }]
+    // );
+    const getLoc = async () => {
+      const { status } = await Location.requestForegroundPermissionsAsync();
+      if (status !== "granted")
+        return Alert.alert(
+          "Error",
+          "Permission to access location was denied! "
+        );
+      try {
+        let { coords } = await Location.getCurrentPositionAsync({
+          accuracy: Location.LocationAccuracy.High,
+        });
+        const p = await getPredictionsFromCoords(coords);
+        setPrediction(p);
+      } catch (err) {
+        console.log(err);
+        Alert.alert(
+          "Can't access your location",
+          "Make sure your location settings are turned on and you are connected to the internet. "
+        );
+      }
+    };
+    getLoc();
+  };
+
+  const clear = () => {
+    setPrediction([]);
+    setValue("");
+    onLocationSelected(null);
+    setChanged(false);
+  };
+  const locationPressed = async (loc: predictionType) => {
+    setValue(loc.description);
+    const res = await (
+      await fetch(
+        `https://maps.googleapis.com/maps/api/place/details/json?place_id=${loc.id}&fields=formatted_address%2Cgeometry&key=${GOOGLE_MAP_API_KEY}`
+      )
+    ).json();
+    onLocationSelected({
+      latitude: res.result?.geometry.location.lat,
+      longitude: res.result?.geometry.location.lng,
+      description: loc.description,
+    });
+    setChanged(false);
+    setPrediction([]);
+  };
+
+  return (
+    <View style={{ zIndex: 100 }}>
+      {renderInput ? (
+        renderInput({
+          onFocus: () => search(value),
+          onBlur: () => setPrediction([]),
+          value: changed ? value : location?.description || value,
+          onChangeText: (val) => {
+            setChanged(true);
+            setValue(val);
+            search(val);
+          },
+          clear,
+          locateMe,
+        })
+      ) : (
+        <TextField
+          label={label}
+          onChangeText={(val) => {
+            setChanged(true);
+            setValue(val);
+            search(val);
+          }}
+          onBlur={() => {
+            setPrediction([]);
+          }}
+          onFocus={() => {
+            search(value);
+          }}
+          value={changed ? value : location?.description || value}
+          gutterBottom={gutterBottom}
+          error={error}
+          helperText={helperText}
+          variant={variant}
+          end={
+            <View style={{ flexDirection: "row" }}>
+              <TouchableOpacity onPress={locateMe} style={{ marginRight: 10 }}>
+                <Ionicons
+                  color={colors.primary.main}
+                  size={18}
+                  name="location"
+                />
+              </TouchableOpacity>
+              <TouchableOpacity onPress={clear}>
+                <Ionicons color={colors.dark.main} size={18} name="close" />
+              </TouchableOpacity>
+            </View>
+          }
+        />
+      )}
+
+      {prediction.length > 0 && (
+        <View style={styles.list}>
+          {prediction.map(
+            (cur, i) =>
+              i < 5 && (
+                <ListItem
+                  divider={i < prediction.length - 1}
+                  key={cur.id}
+                  link
+                  onPress={() => locationPressed(cur)}
+                >
+                  <Ionicons
+                    name="location-outline"
+                    style={{ marginRight: 10 }}
+                    size={16}
+                    color={colors.textSecondary.main}
+                  />
+                  <Typography style={{ flex: 1 }}>{cur.description}</Typography>
+                </ListItem>
+              )
+          )}
+        </View>
+      )}
+    </View>
+  );
+};
+
+export default Locator;

package/src/Components/Popup.tsx

@@ -0,0 +1,99 @@
+import { Modal, Pressable, StyleSheet, View } from "react-native";
+
+import React, { useState } from "react";
+import { ScaledSheet } from "react-native-size-matters";
+import { useColors } from "../hooks";
+import { PopupProps } from "../types";
+import { IconButton } from "./Button";
+import Typography from "./Typography";
+
+const Popup: React.FC<PopupProps> = ({
+  title,
+  sheet,
+  bare = false,
+  children,
+  open,
+  onClose = () => {},
+}) => {
+  const colors = useColors();
+  const [show, setShow] = useState(open);
+
+  const styles: any = ScaledSheet.create({
+    container: {
+      marginTop: sheet ? "auto" : "50%",
+      paddingBottom: sheet ? "30@ms" : 0,
+      minHeight: sheet,
+      maxHeight: "80%",
+      backgroundColor: colors.white[2],
+      borderTopLeftRadius: 20,
+      borderTopRightRadius: 20,
+      borderBottomRightRadius: sheet ? 0 : 20,
+      borderBottomLeftRadius: sheet ? 0 : 20,
+      borderColor: colors.white[5],
+      borderWidth: 0,
+      alignSelf: "center",
+      maxWidth: sheet ? undefined : "90%",
+      width: sheet ? "100%" : undefined,
+    },
+    content: {
+      paddingHorizontal: bare ? undefined : "10@ms",
+      // flex: 1,
+    },
+    title: {
+      flexDirection: "row",
+      alignItems: "center",
+      paddingVertical: "5@ms",
+      paddingHorizontal: "10@ms",
+      marginBottom: "10@ms",
+    },
+    backdrop: {
+      position: "absolute",
+      height: "100%",
+      width: "100%",
+      zIndex: 10000,
+      backgroundColor: "#000b",
+    },
+  });
+
+  React.useEffect(() => {
+    setShow(open);
+  }, [open]);
+
+  const closeAction = () => {
+    setShow(false);
+    onClose();
+  };
+
+  return (
+    <>
+      {open && <Pressable style={styles.backdrop} />}
+      <Modal
+        transparent
+        animationType="slide"
+        visible={show}
+        onRequestClose={() => setShow(false)}
+      >
+        {open && (
+          <Pressable style={StyleSheet.absoluteFill} onPress={closeAction} />
+        )}
+
+        <View style={styles.container}>
+          {!bare && (
+            <View style={styles.title}>
+              <IconButton size={20} icon="close" onPress={closeAction} />
+              <View style={{ flex: 1 }}>
+                <Typography color="textSecondary" align="center">
+                  {title}
+                </Typography>
+              </View>
+            </View>
+          )}
+
+          <View style={styles.content}>{children}</View>
+        </View>
+      </Modal>
+    </>
+  );
+};
+
+export default Popup;

package/src/Components/SelectMenu.tsx

@@ -1,12 +1,13 @@
-import React from "react";
-import { View, Modal, TouchableOpacity, ScrollView } from "react-native";
-import { ScaledSheet } from "react-native-size-matters";
-import Typography from "./Typography";
 import { MaterialIcons } from "@expo/vector-icons";
-import Button from "./Button";
+import React, { useCallback, useState } from "react";
+import { FlatList, Modal, TouchableOpacity, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { ScaledSheet } from "react-native-size-matters";
 import { useColors } from "../hooks";
 import { SelectMenuProps } from "../types";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
+import Button from "./Button";
+import TextField from "./TextField";
+import Typography from "./Typography";
 
 const SelectMenu: React.FC<SelectMenuProps> = ({
   open = false,
@@ -21,6 +22,8 @@ const SelectMenu: React.FC<SelectMenuProps> = ({
 }) => {
   const colors = useColors();
   const { bottom } = useSafeAreaInsets();
+
+  const [search, setSearch] = useState("");
   const styles: any = ScaledSheet.create({
     root: {
       backgroundColor: colors.white[1],
@@ -35,7 +38,6 @@ const SelectMenu: React.FC<SelectMenuProps> = ({
       marginBottom: "20@vs",
     },
 
-    options: {},
     option: {
       paddingHorizontal: "10@s",
       paddingVertical: "10@vs",
@@ -50,77 +52,89 @@ const SelectMenu: React.FC<SelectMenuProps> = ({
       paddingTop: "15@ms",
     },
   });
+
+  const renderItem = useCallback(
+    ({ item }: any) => (
+      <TouchableOpacity
+        style={{
+          ...styles.option,
+          backgroundColor:
+            item.value === value ? colors.blue.light + "2" : colors.white[2],
+        }}
+        onPress={() => {
+          onChange(item.value);
+          if (!disableAutoClose) onClose();
+        }}
+        key={item.label}
+      >
+        {item.start && <View style={{ marginRight: 10 }}>{item.start}</View>}
+        <View style={{ flex: 1 }}>
+          <Typography
+            style={{
+              color: item.value === value ? colors.blue.light : colors.black[2],
+            }}
+          >
+            {item.label}
+          </Typography>
+          {item.secondary ? (
+            <Typography
+              variant="body2"
+              style={{
+                marginTop: 2,
+                color:
+                  item.value === value ? colors.blue.light : colors.white[5],
+              }}
+            >
+              {item.secondary}
+            </Typography>
+          ) : null}
+        </View>
+        {value === item.value && (
+          <MaterialIcons
+            name="check"
+            color={colors.blue.light}
+            size={24}
+            style={{ marginLeft: "auto" }}
+          />
+        )}
+      </TouchableOpacity>
+    ),
+    [value, colors]
+  );
   return (
     <Modal visible={open} animationType="slide" onRequestClose={onClose}>
       <View style={styles.root}>
-        <View style={{ flex: 1 }}>
-          <ScrollView>
-            <View style={styles.content}>
-              <View style={styles.header}>
-                <Typography variant="h5" gutterBottom={5} fontWeight={700}>
-                  {label}
-                </Typography>
-                {helperText ? (
-                  <Typography variant="body2" color="textSecondary">
-                    {helperText}
-                  </Typography>
-                ) : null}
-              </View>
-              <View style={styles.options}>
-                {[...options].map((cur) => (
-                  <TouchableOpacity
-                    style={{
-                      ...styles.option,
-                      backgroundColor:
-                        cur.value === value
-                          ? colors.blue.light + "2"
-                          : colors.white[2],
-                    }}
-                    onPress={() => {
-                      onChange(cur.value);
-                      if (!disableAutoClose) onClose();
-                    }}
-                    key={cur.label}
-                  >
-                    <View>
-                      <Typography
-                        style={{
-                          color:
-                            cur.value === value
-                              ? colors.blue.light
-                              : colors.black[2],
-                        }}
-                      >
-                        {cur.label}
-                      </Typography>
-                      {cur.secondary ? (
-                        <Typography
-                          variant="body2"
-                          style={{
-                            marginTop: 2,
-                            color:
-                              cur.value === value
-                                ? colors.blue.light
-                                : colors.white[5],
-                          }}
-                        >
-                          {cur.secondary}
-                        </Typography>
-                      ) : null}
-                    </View>
-                    {value === cur.value && (
-                      <MaterialIcons
-                        name="check"
-                        color={colors.blue.light}
-                        size={24}
-                        style={{ marginLeft: "auto" }}
-                      />
-                    )}
-                  </TouchableOpacity>
-                ))}
-              </View>
-            </View>
-          </ScrollView>
+        <View style={styles.content}>
+          <View style={styles.header}>
+            <Typography variant="h5" gutterBottom={5} fontWeight={700}>
+              {label}
+            </Typography>
+            {helperText ? (
+              <Typography variant="body2" color="textSecondary">
+                {helperText}
+              </Typography>
+            ) : null}
+
+            <TextField
+              label="Search"
+              value={search}
+              type="search"
+              onChangeText={setSearch}
+              variant="outlined"
+            />
+          </View>
+          <FlatList
+            removeClippedSubviews
+            keyExtractor={(item) => item.value}
+            renderItem={renderItem}
+            data={options
+              .filter((item) =>
+                search.length > 1
+                  ? item.label.toLowerCase().indexOf(search.toLowerCase()) > -1
+                  : item
+              )
+              .sort((a, b) => a.label.localeCompare(b.label))}
+          />
         </View>
         <View style={styles.footer}>
           <Button

package/src/Components/TextField.tsx

@@ -1,9 +1,10 @@
 import { Ionicons, MaterialIcons } from "@expo/vector-icons";
-import React, { useRef, useState } from "react";
+import React, { startTransition, useRef, useState } from "react";
 import { Animated, TextInput, TouchableOpacity, View } from "react-native";
 import {
   ScaledSheet,
   moderateScale,
+  ms,
   verticalScale,
 } from "react-native-size-matters";
 import { useColors } from "../hooks";
@@ -15,7 +16,7 @@ const TextField: React.FC<TextFieldProps> = ({
   label,
   keyboardType,
   variant,
-  color = "dark",
+  color = "primary",
   value,
   type,
   helperText,
@@ -44,13 +45,13 @@ const TextField: React.FC<TextFieldProps> = ({
   React.useEffect(() => {
     if (focused || value) {
       Animated.timing(labelAnim, {
-        toValue: variant === "outlined" ? verticalScale(-12) : verticalScale(5),
+        toValue: verticalScale(variant === "text" ? 2 : 4),
         duration: 300,
         useNativeDriver: false,
       }).start();
     } else {
       Animated.timing(labelAnim, {
-        toValue: height / moderateScale(variant === "text" ? 2 : 3.2),
+        toValue: height / moderateScale(variant === "text" ? 2.5 : 3.2),
         duration: 300,
         useNativeDriver: false,
       }).start();
@@ -77,9 +78,9 @@ const TextField: React.FC<TextFieldProps> = ({
         ? colors.error.main
         : focused
         ? colors[color].main
-        : colors.black[1],
-      borderWidth: error ? 1 : variant === "outlined" ? (focused ? 2 : 1) : 0,
-      borderBottomWidth: variant === "text" ? 0.5 : error ? 1 : 0,
+        : colors.textSecondary.main,
+      borderWidth: error ? 1 : variant === "outlined" ? (focused ? 2 : 0.5) : 0,
+      borderBottomWidth: variant === "text" ? 0.5 : undefined,
       width: "100%",
       borderRadius: variant === "text" ? 0 : rounded ? 30 : 7,
       alignItems: "center",
@@ -89,27 +90,29 @@ const TextField: React.FC<TextFieldProps> = ({
       fontSize: "14@s",
       flex: 1,
       alignSelf: "stretch",
-      paddingLeft: moderateScale(15),
+      paddingLeft: variant === "text" ? 0 : moderateScale(15),
       paddingRight: moderateScale(10),
-      paddingTop: variant !== "outlined" ? "11@vs" : 0,
+      paddingTop: "11@vs",
       color: colors.black[1],
       zIndex: 10,
       // backgroundColor: "#284",
     },
     inputText: {
       fontSize: "14@ms",
-      paddingLeft: moderateScale(15),
-      paddingTop: variant !== "outlined" ? "13@ms" : 0,
+      flex: 1,
+      paddingLeft: variant === "text" ? 0 : moderateScale(15),
+      paddingTop: "13@ms",
     },
     label: {
       position: "absolute",
-      left: moderateScale(15),
+      left: variant === "text" ? 0 : moderateScale(15),
       fontSize: focused || value ? "10@s" : "13@s",
-      color: focused ? colors[color].main : colors.black[1],
+      color: focused ? colors[color].main : colors.textSecondary.main,
     },
     helperText: {
       paddingHorizontal: "15@s",
-      color: focused ? colors[color].dark : colors.black[1],
+      flex: 1,
+      color: focused ? colors[color].dark : colors.textSecondary.main,
       paddingTop: "4@ms",
     },
     error: {
@@ -167,9 +170,24 @@ const TextField: React.FC<TextFieldProps> = ({
           </Animated.Text>
           {start}
           {options ? (
-            <Typography style={styles.inputText}>
-              {options.find((cur) => cur.value === value)?.label}
-            </Typography>
+            <View
+              style={{ flex: 1, alignItems: "center", flexDirection: "row" }}
+            >
+              {options.find((cur) => cur.value === value)?.start && (
+                <View
+                  style={{
+                    paddingTop: variant !== "outlined" ? ms(13) : 0,
+                    paddingRight: 10,
+                  }}
+                >
+                  {options.find((cur) => cur.value === value)?.start}
+                </View>
+              )}
+
+              <Typography style={styles.inputText}>
+                {options.find((cur) => cur.value === value)?.label}
+              </Typography>
+            </View>
           ) : (
             <TextInput
               onFocus={() => {
@@ -192,6 +210,15 @@ const TextField: React.FC<TextFieldProps> = ({
             />
           )}
           {end && <View style={{ marginRight: 20 }}>{end}</View>}
+          {options && (
+            <View style={{ marginRight: 20 }}>
+              <Ionicons
+                name="chevron-down"
+                color={colors.textSecondary.main}
+                size={24}
+              />
+            </View>
+          )}
         </TouchableOpacity>
         {helperText && (
           <Typography
@@ -250,12 +277,18 @@ export const TextField2: React.FC<TextFieldProps> = ({
   ...props
 }) => {
   const colors = useColors();
-  const [focused, setFocused] = useState(false);
+  const [focused, _setFocused] = useState(false);
 
   const labelAnim = useRef(new Animated.Value(0)).current;
 
   const height = moderateScale(50);
 
+  const setFocused = (value: boolean) => {
+    startTransition(() => {
+      _setFocused(value);
+    });
+  };
+
   React.useEffect(() => {
     if (focused || value) {
       Animated.timing(labelAnim, {
@@ -374,7 +407,6 @@ export const TextField2: React.FC<TextFieldProps> = ({
               <Typography style={styles.inputText}>
                 {options.find((cur) => cur.value === value)?.label}
               </Typography>
-
               <Ionicons
                 name="chevron-down"
                 size={24}

package/src/config/KeyManager.ts

@@ -0,0 +1,13 @@
+type apikeys = {
+  GOOGLE_MAP_API_KEY?: string;
+};
+
+let apiKey: apikeys;
+
+export function setApiKey(key: apikeys): void {
+  apiKey = key;
+}
+
+export function getApiKey(): apikeys {
+  return apiKey;
+}

package/src/config/index.ts

@@ -0,0 +1,39 @@
+// import * as fs from "fs";
+import { setApiKey } from "./KeyManager";
+
+type configProps = {
+  googleMapApiKey?: string;
+  colors?: {
+    primary?: {
+      mains: string;
+      light: string;
+      dark: string;
+      text: string;
+    };
+  };
+};
+
+export function initialize(config: configProps): void {
+  try {
+    setApiKey({
+      GOOGLE_MAP_API_KEY: config.googleMapApiKey,
+    });
+
+    console.log("Got key from frontend", config.googleMapApiKey);
+  } catch (error) {
+    console.error("Error reading the config file:", error);
+  }
+}
+// export function loadConfig(): void {
+//   try {
+//     const configData = fs.readFileSync("./hui-config.json", "utf-8");
+//     const config: configProps = JSON.parse(configData);
+//     setApiKey({
+//       GOOGLE_MAP_API_KEY: config.googleMapApiKey,
+//     });
+
+//     console.log("Got key from frontend", config.googleMapApiKey);
+//   } catch (error) {
+//     console.error("Error reading the config file:", error);
+//   }
+// }

package/src/hooks.ts

@@ -1,8 +1,8 @@
 import { useContext } from "react";
 import { Platform } from "react-native";
-import { ms, vs } from "react-native-size-matters";
-import colors from "./theme/colors";
+import { vs } from "react-native-size-matters";
 import { UIThemeContext } from "./theme";
+import colors from "./theme/colors";
 
 export const useColors = () => {
   const { themeState } = useContext(UIThemeContext);

package/src/theme/colors.ts

@@ -26,7 +26,7 @@ const darkColors = {
     5: "#aaa",
   },
   white: {
-    1: "#111",
+    1: "#000",
     2: "#222",
     3: "#444",
     4: "#333",
@@ -39,17 +39,17 @@ const darkColors = {
     text: "#000",
   },
   light: {
-    main: "#000",
+    main: "#111",
     light: "#555",
     dark: "#333",
     text: "#fff",
   },
-
+  grey: {
+    dark: "#d0d8d8",
+    main: "#e4e0e4",
+  },
   textSecondary: {
-    main: "#777",
-    light: "#aaa",
-    dark: "#555",
-    text: "#fff",
+    main: "#666",
   },
   secondary: {
     main: "#a00",
@@ -69,11 +69,11 @@ export default function colors(theme: ThemeTypes) {
   const dynamicColors = theme === "dark" ? darkColors : lightColors;
   return {
     primary: {
-      main: "#FD7",
+      main: "#f80",
       light: "#FEFFD3",
       dark: "#fa0",
       orange: "#F68B1E",
-      text: "#000",
+      text: "#fff",
     },
     secondary: {
       main: "#f11",
@@ -98,18 +98,21 @@ export default function colors(theme: ThemeTypes) {
       light: "#777",
       dark: "#111",
       text: "#fff",
+      mid: "#f2f3f4",
     },
     textSecondary: {
       main: "#aaa",
-      light: "#bbb",
-      dark: "#777",
-      text: "#000",
+      mid: "#9ab",
+      dark: "#678",
+      darkBlue: "#123",
     },
     blue: {
       main: "#09F",
       light: "#39f",
       dark: "#028",
       text: "#fff",
+      navy: "#071440",
+      soft: "#EBF2FF",
     },
     info: {
       main: "#09f",
@@ -122,6 +125,9 @@ export default function colors(theme: ThemeTypes) {
       text: "#fff",
       light: "#5c3",
       dark: "#062",
+
+      green: "#49D3BA",
+      lighter: "#00A86B",
     },
 
     warning: {
@@ -135,6 +141,13 @@ export default function colors(theme: ThemeTypes) {
       text: "#fff",
       light: "#f43",
       dark: "#a20",
+      red: "#D92D20",
+      soft: "#fee",
+      bold: "#d22",
+    },
+    grey: {
+      dark: "#101828",
+      main: "#344054",
     },
     ...dynamicColors,
   };

package/src/types.ts

@@ -200,7 +200,12 @@ export interface TextFieldProps extends TextInputProps {
   inputStyles?: any;
   gutterBottom?: number;
   end?: ReactNode;
-  options?: { secondary?: string; value: string | number; label: string }[];
+  options?: {
+    start?: ReactNode;
+    secondary?: string;
+    value: string | number;
+    label: string;
+  }[];
   onFocus?: () => void;
   onBlur?: () => void;
 }
@@ -233,9 +238,9 @@ export interface SafeAreaViewProps {
 export interface SelectMenuProps {
   open: boolean;
   onClose: () => void;
-  value: string | number;
-  options: { secondary?: string; value: string | number; label: string }[];
-  onChange: (value: string | number) => void;
+  value: any;
+  options: { secondary?: string; value: any; label: string }[];
+  onChange: (value: string) => void;
   disableAutoClose?: boolean;
   label?: string;
   secondary?: string;