@hoddy-ui/core 1.1.0 → 1.1.2

package/src/Components/TextField.tsx

@@ -275,235 +275,245 @@ const TextField: React.FC<TextFieldProps> = ({
   );
 };
 
-export const TextField2: React.FC<TextFieldProps> = ({
-  label,
-  keyboardType,
-  color = "primary",
-  value,
-  type,
-  helperText,
-  onChangeText,
-  onSubmitEditing = () => {},
-  onFocus = () => {},
-  onBlur = () => {},
-  error,
-  start,
-  rounded,
-  disabled = false,
-  style = {},
-  inputStyles = {},
-  gutterBottom = 8,
-  placeholder,
-  end,
-  options,
-  ...props
-}) => {
-  const colors = useColors();
-  const [focused, _setFocused] = useState(false);
-  const [showPassword, setShowPassword] = useState(false);
+export const TextField2 = React.forwardRef<TextInput, TextFieldProps>(
+  (
+    {
+      label,
+      keyboardType,
+      color = "primary",
+      value,
+      type,
+      helperText,
+      onChangeText,
+      onSubmitEditing = () => {},
+      onFocus = () => {},
+      onBlur = () => {},
+      error,
+      start,
+      rounded,
+      disabled = false,
+      style = {},
+      inputStyles = {},
+      gutterBottom = 8,
+      placeholder,
+      end,
+      options,
+      multiline,
+      ...props
+    },
+    ref
+  ) => {
+    const colors = useColors();
+    const [focused, _setFocused] = useState(false);
+    const [showPassword, setShowPassword] = useState(false);
 
-  const height = moderateScale(
-    props.multiline ? 50 + (props.numberOfLines || 1) * 18 : 50
-  );
+    const height = moderateScale(
+      multiline ? 50 + (props.numberOfLines || 1) * 18 : 50
+    );
 
-  const setFocused = (value: boolean) => {
-    _setFocused(value);
-  };
+    const setFocused = (value: boolean) => {
+      _setFocused(value);
+    };
 
-  const styles: any = ScaledSheet.create({
-    root: {
-      marginBottom: gutterBottom + "@vs",
-      ...style,
-    },
-    container: {
-      height: height,
-      overflow: "hidden",
-      flexDirection: "row",
-      borderColor: error
-        ? colors.error.main
-        : focused
-        ? colors[color].main
-        : colors.white[5],
-      borderWidth: error ? 1 : focused ? 2 : 1,
-      width: "100%",
-      borderRadius: rounded ? 30 : 10,
-      alignItems: "center",
-      ...inputStyles,
-    },
-    input: {
-      fontSize: "14@s",
-      flex: 1,
-      alignSelf: "stretch",
-      paddingLeft: moderateScale(10),
-      paddingRight: moderateScale(10),
-      color: colors.dark.main,
-      zIndex: 10,
-      // backgroundColor: "#284",
-    },
-    inputText: {
-      fontSize: "14@ms",
-      color: colors.dark.main,
-      paddingLeft: moderateScale(10),
-    },
-    placeholder: {
-      fontSize: "14@ms",
-      color: colors.textSecondary.main,
-      paddingLeft: moderateScale(10),
-    },
-    label: {},
-    helperText: {
-      paddingHorizontal: "15@s",
-      color: focused ? colors[color].dark : "#fffa",
-      paddingTop: "4@ms",
-    },
-    error: {
-      paddingLeft: 10,
-      paddingRight: 10,
-      paddingTop: 5,
-      flexDirection: "row",
-      alignItems: "center",
-    },
-    errorText: {
-      fontSize: 12,
-      marginLeft: 10,
-    },
-  });
-  const formProps: any =
-    type === "email"
-      ? {
-          textContentType: "emailAddress",
-          keyboardType: "email-address",
-          autoCapitalize: "none",
-          autoCompleteType: "email",
-        }
-      : type === "number"
-      ? {
-          keyboardType: "numeric",
-        }
-      : type === "tel"
-      ? {
-          textContentType: "telephoneNumber",
-          keyboardType: "phone-pad",
-        }
-      : type === "search"
-      ? {
-          keyboardType: "web-search",
-          returnKeyType: "search",
-          autoCapitalize: "none",
-        }
-      : type === "password"
-      ? {
-          secureTextEntry: !showPassword,
-          autoCompleteType: "password",
-          autoCapitalize: "none",
-          textContentType: "password",
-        }
-      : {};
-  return (
-    <>
-      <View style={styles.root}>
-        {label && (
-          <Typography variant="body1" color="textSecondary" gutterBottom={7}>
-            {label}
-          </Typography>
-        )}
-        <TouchableOpacity
-          onPress={() => setFocused(true)}
-          style={styles.container}
-        >
-          {start}
-
-          {options ? (
-            <>
-              {value ? (
-                <Typography style={styles.inputText}>
-                  {options.find((cur) => cur.value === value)?.label}
-                </Typography>
-              ) : (
-                <Typography style={styles.placeholder}>
-                  {placeholder}
-                </Typography>
-              )}
-              <Ionicons
-                name="chevron-down"
-                size={24}
-                style={{ marginLeft: "auto", marginRight: 15 }}
-                color={colors.dark.light}
-              />
-            </>
-          ) : (
-            <TextInput
-              onFocus={() => {
-                onFocus();
-                setFocused(true);
-              }}
-              onBlur={() => {
-                onBlur();
-                setFocused(false);
-              }}
-              value={value}
-              onChangeText={onChangeText}
-              key={showPassword ? "show" : "hide"}
-              keyboardType={keyboardType}
-              placeholderTextColor={colors.textSecondary.main}
-              editable={!disabled}
-              placeholder={placeholder}
-              selectTextOnFocus={!disabled}
-              onSubmitEditing={onSubmitEditing}
-              {...formProps}
-              {...props}
-              style={styles.input}
-            />
+    const styles: any = ScaledSheet.create({
+      root: {
+        marginBottom: gutterBottom + "@vs",
+        ...style,
+      },
+      container: {
+        height: height,
+        overflow: "hidden",
+        flexDirection: "row",
+        borderColor: error
+          ? colors.error.main
+          : focused
+          ? colors[color].main
+          : colors.white[4],
+        borderWidth: error ? 1 : focused ? 2 : 1,
+        width: "100%",
+        borderRadius: rounded ? 30 : 10,
+        alignItems: multiline ? "flex-start" : "center",
+        paddingVertical: multiline ? 10 : 0,
+        ...inputStyles,
+      },
+      input: {
+        fontSize: "14@s",
+        flex: 1,
+        alignSelf: "stretch",
+        paddingLeft: moderateScale(10),
+        paddingRight: moderateScale(10),
+        color: colors.dark.main,
+        zIndex: 10,
+        // backgroundColor: "#284",
+      },
+      inputText: {
+        fontSize: "14@ms",
+        color: colors.dark.main,
+        paddingLeft: moderateScale(10),
+      },
+      placeholder: {
+        fontSize: "14@ms",
+        color: colors.textSecondary.light,
+        paddingLeft: moderateScale(10),
+      },
+      label: {},
+      helperText: {
+        paddingHorizontal: "15@s",
+        color: focused ? colors[color].dark : "#fffa",
+        paddingTop: "4@ms",
+      },
+      error: {
+        paddingLeft: 10,
+        paddingRight: 10,
+        paddingTop: 5,
+        flexDirection: "row",
+        alignItems: "center",
+      },
+      errorText: {
+        fontSize: 12,
+        marginLeft: 10,
+      },
+    });
+    const formProps: any =
+      type === "email"
+        ? {
+            textContentType: "emailAddress",
+            keyboardType: "email-address",
+            autoCapitalize: "none",
+            autoCompleteType: "email",
+          }
+        : type === "number"
+        ? {
+            keyboardType: "numeric",
+          }
+        : type === "tel"
+        ? {
+            textContentType: "telephoneNumber",
+            keyboardType: "phone-pad",
+          }
+        : type === "search"
+        ? {
+            keyboardType: "web-search",
+            returnKeyType: "search",
+            autoCapitalize: "none",
+          }
+        : type === "password"
+        ? {
+            secureTextEntry: !showPassword,
+            autoCompleteType: "password",
+            autoCapitalize: "none",
+            textContentType: "password",
+          }
+        : {};
+    return (
+      <>
+        <View style={styles.root}>
+          {label && (
+            <Typography variant="body1" color="textSecondary" gutterBottom={7}>
+              {label}
+            </Typography>
           )}
+          <TouchableOpacity
+            onPress={() => setFocused(true)}
+            style={styles.container}
+          >
+            <View style={{ marginTop: multiline ? 5 : 0 }}>{start}</View>
 
-          {end ? (
-            <View style={{ marginRight: 20 }}>{end}</View>
-          ) : (
-            type === "password" && (
-              <TouchableOpacity
-                style={{ marginRight: 20 }}
-                onPress={() => setShowPassword(!showPassword)}
-              >
+            {options ? (
+              <>
+                {value ? (
+                  <Typography style={styles.inputText}>
+                    {options.find((cur) => cur.value === value)?.label}
+                  </Typography>
+                ) : (
+                  <Typography style={styles.placeholder}>
+                    {placeholder}
+                  </Typography>
+                )}
                 <Ionicons
-                  name={showPassword ? "eye-outline" : "eye-off-outline"}
+                  name="chevron-down"
                   size={24}
-                  color={colors.textSecondary.main}
+                  style={{ marginLeft: "auto", marginRight: 15 }}
+                  color={colors.dark.light}
                 />
-              </TouchableOpacity>
-            )
-          )}
-        </TouchableOpacity>
-        {helperText && (
-          <Typography
-            color="textSecondary"
-            style={styles.helperText}
-            variant="caption"
-          >
-            {helperText}
-          </Typography>
-        )}
-        {error && (
-          <View style={styles.error}>
-            <MaterialIcons name="error" color={colors.error.main} size={16} />
-            <Typography style={styles.errorText} color="error">
-              {error}
+              </>
+            ) : (
+              <TextInput
+                ref={ref}
+                onFocus={() => {
+                  onFocus();
+                  setFocused(true);
+                }}
+                onBlur={() => {
+                  onBlur();
+                  setFocused(false);
+                }}
+                value={value}
+                onChangeText={onChangeText}
+                key={showPassword ? "show" : "hide"}
+                keyboardType={keyboardType}
+                placeholderTextColor={colors.textSecondary.light}
+                editable={!disabled}
+                placeholder={placeholder}
+                selectTextOnFocus={!disabled}
+                onSubmitEditing={onSubmitEditing}
+                multiline={multiline}
+                extAlignVertical={multiline ? "top" : "center"}
+                {...formProps}
+                {...props}
+                style={styles.input}
+              />
+            )}
+
+            {end ? (
+              <View style={{ marginRight: 20 }}>{end}</View>
+            ) : (
+              type === "password" && (
+                <TouchableOpacity
+                  style={{ marginRight: 20 }}
+                  onPress={() => setShowPassword(!showPassword)}
+                >
+                  <Ionicons
+                    name={showPassword ? "eye-outline" : "eye-off-outline"}
+                    size={24}
+                    color={colors.textSecondary.main}
+                  />
+                </TouchableOpacity>
+              )
+            )}
+          </TouchableOpacity>
+          {helperText && (
+            <Typography
+              color="textSecondary"
+              style={styles.helperText}
+              variant="caption"
+            >
+              {helperText}
             </Typography>
-          </View>
+          )}
+          {error && (
+            <View style={styles.error}>
+              <MaterialIcons name="error" color={colors.error.main} size={16} />
+              <Typography style={styles.errorText} color="error">
+                {error}
+              </Typography>
+            </View>
+          )}
+        </View>
+        {options && (
+          <SelectMenu
+            options={options}
+            value={value}
+            open={focused}
+            onClose={() => setFocused(false)}
+            label={label}
+            helperText={helperText}
+            onChange={onChangeText!}
+          />
         )}
-      </View>
-      {options && (
-        <SelectMenu
-          options={options}
-          value={value}
-          open={focused}
-          onClose={() => setFocused(false)}
-          label={label}
-          helperText={helperText}
-          onChange={onChangeText!}
-        />
-      )}
-    </>
-  );
-};
+      </>
+    );
+  }
+);
 
 export default TextField;

package/src/Components/Typography.tsx

@@ -15,7 +15,6 @@ const Typography: React.FC<TypographyProps> = forwardRef(
       variant = "body1",
       align = "left",
       gutterBottom = 0,
-      numberOfLines,
       adjustsFontSizeToFit,
       fontWeight = 400,
       fontFamily, // NEW PROP ADDED
@@ -52,7 +51,6 @@ const Typography: React.FC<TypographyProps> = forwardRef(
     return (
       <Text
         ref={ref as any}
-        numberOfLines={numberOfLines}
         adjustsFontSizeToFit={adjustsFontSizeToFit}
         style={[styles.text, style]} // Ensures external styles are applied
         {...props}

package/src/config/KeyManager.ts

@@ -1,10 +1,12 @@
 type configTypes = {
   GOOGLE_MAP_API_KEY?: string;
   DEFAULT_FONT_FAMILY?: string;
+  EDGE_TO_EDGE?: boolean;
 };
 
 let config: configTypes = {
   GOOGLE_MAP_API_KEY: "",
+  EDGE_TO_EDGE: false,
 };
 
 export function setConfig(key: configTypes): void {

package/src/config/index.ts

@@ -7,6 +7,7 @@ type configProps = {
   googleMapApiKey?: string;
   colors?: extraColorTypes;
   fontFamily?: string;
+  edgeToEdge?: boolean;
 };
 
 export function initialize(config: configProps): void {
@@ -14,6 +15,7 @@ export function initialize(config: configProps): void {
     setConfig({
       GOOGLE_MAP_API_KEY: config.googleMapApiKey,
       DEFAULT_FONT_FAMILY: config.fontFamily,
+      EDGE_TO_EDGE: config.edgeToEdge ?? false,
     });
     if (config.colors) setExtraColors(config.colors);
   } catch (error) {

package/src/theme/index.tsx

@@ -5,6 +5,7 @@ import React, { createContext, useEffect, useReducer } from "react";
 import { Platform, useColorScheme } from "react-native";
 import { SafeAreaProvider } from "react-native-safe-area-context";
 import FlashMessage from "../Components/FlashMessage";
+import { getConfig } from "../config/KeyManager";
 import { useColors, useTheme } from "../hooks";
 import {
   ThemeActionTypes,
@@ -41,9 +42,10 @@ const ConfigureSystemUI = () => {
   const colors = useColors();
 
   useEffect(() => {
+    const config = getConfig();
     if (colors) {
       SystemUI.setBackgroundColorAsync(colors.white[1]);
-      if (Platform.OS === "android") {
+      if (Platform.OS === "android" && !config.EDGE_TO_EDGE) {
         NavigationBar.setBackgroundColorAsync(colors.white[1]);
         if (theme === "dark") {
           NavigationBar.setButtonStyleAsync("light");

package/src/types.ts

@@ -2,7 +2,6 @@ import { ReactNode } from "react";
 import {
   NativeScrollEvent,
   NativeSyntheticEvent,
-  Text,
   TextInputProps,
   TextProps,
   TextStyle,
@@ -79,14 +78,7 @@ export interface AvatarProps {
   size?: number;
   style?: ViewStyle;
 }
-export interface AnimatorProps {
-  style?: ViewStyle;
-  duration?: number;
-  children: ReactNode;
-  delay?: number;
-  animationType?: "easeInEaseOut" | "linear" | "spring";
-  type?: "fade" | "slideInLeft" | "slideInRight" | "slideInUp" | "slideInDown";
-}
+
 export interface ButtonProps {
   color?: colorTypes;
   variant?: "text" | "outlined" | "contained";
@@ -145,6 +137,7 @@ export interface IconButtonProps {
 
 export type locatorLocation = {
   description: string;
+  formatted_address?: string;
   longitude: number;
   latitude: number;
 };
@@ -324,3 +317,58 @@ export interface DividerProps {
   style?: ViewStyle;
   height?: number;
 }
+
+export type AnimationType =
+  | "fade"
+  | "grow"
+  | "slide"
+  | "blink"
+  | "float"
+  | "roll"
+  | "thrownup";
+
+// Base props that are common to all animations
+interface BaseAnimatorProps {
+  children: ReactNode;
+  duration?: number;
+  delay?: number;
+  closeAfter?: number | null;
+  style?: ViewStyle;
+}
+
+// Type-specific animation props using discriminated unions
+export type AnimatorProps =
+  | (BaseAnimatorProps & {
+      type: "fade";
+      // No additional props for fade animation
+    })
+  | (BaseAnimatorProps & {
+      type: "grow";
+      initialScale?: number;
+    })
+  | (BaseAnimatorProps & {
+      type: "slide";
+      direction?: "up" | "down" | "left" | "right";
+      initialValue?: number;
+    })
+  | (BaseAnimatorProps & {
+      type: "blink";
+      blinkDuration?: number;
+      minOpacity?: number;
+      maxOpacity?: number;
+    })
+  | (BaseAnimatorProps & {
+      type: "float";
+      closeDuration?: number;
+      floatDistance?: number;
+      floatDuration?: number;
+    })
+  | (BaseAnimatorProps & {
+      type: "roll";
+      initialTranslateY?: number;
+      initialRotate?: string;
+    })
+  | (BaseAnimatorProps & {
+      type: "thrownup";
+      // No additional props for thrownup animation
+    });

package/src/Components/Animator.tsx

@@ -1,43 +0,0 @@
-import { useFocusEffect } from "@react-navigation/native";
-import React, { FC, useCallback, useState } from "react";
-import { LayoutAnimation, View } from "react-native";
-import { ScaledSheet } from "react-native-size-matters";
-import { AnimatorProps } from "../types";
-
-export const Animator: FC<AnimatorProps> = ({
-  style = {},
-  duration = 500,
-  children,
-  delay = 100,
-  animationType = "easeInEaseOut",
-  type = "fade",
-}) => {
-  const [play, setPlay] = useState(false);
-  const toggleAnimation = () => {
-    setPlay(false);
-
-    setTimeout(() => {
-      LayoutAnimation.configureNext({
-        ...LayoutAnimation.Presets[animationType],
-        duration,
-      });
-      setPlay(true);
-    }, delay);
-  };
-  const styles = ScaledSheet.create({
-    root: {
-      opacity: play ? 1 : 0,
-      left: type === "slideInLeft" ? (!play ? -200 : 0) : undefined,
-      right: type === "slideInRight" ? (!play ? -200 : 0) : undefined,
-      bottom: type === "slideInUp" ? (!play ? -100 : 0) : undefined,
-      top: type === "slideInDown" ? (!play ? -100 : 0) : undefined,
-      ...style,
-    },
-  });
-  useFocusEffect(
-    useCallback(() => {
-      toggleAnimation();
-    }, [])
-  );
-  return <View style={styles.root}>{play && children}</View>;
-};