@jobber/components-native 0.85.1-move-dupli-99be0f8.13 → 0.86.1-JOB-136074-c379982.0

package/dist/types/src/Banner/components/BannerIcon/BannerIcon.style.d.ts

@@ -12,4 +12,7 @@ export declare const useStyles: () => {
     notice: {
         backgroundColor: string;
     };
+    success: {
+        backgroundColor: string;
+    };
 };

package/dist/types/src/Banner/types.d.ts

@@ -1,7 +1,7 @@
 import type { IconNames } from "@jobber/design";
 import type { ReactElement } from "react";
 import type { StyleProp, ViewStyle } from "react-native";
-export type BannerTypes = "error" | "warning" | "notice";
+export type BannerTypes = "error" | "warning" | "notice" | "success";
 export interface BannerStyleProps {
     /**
      * Styles applied to the main view of the banner. Styles are grabbed from Banner.style.ts file

package/dist/types/src/InputFieldWrapper/InputFieldWrapper.style.d.ts

@@ -23,6 +23,7 @@ export declare const useStyles: () => {
         right: number;
         bottom: number;
         left: number;
+        zIndex: number;
     };
     miniLabel: {
         top: number;
@@ -30,7 +31,6 @@ export declare const useStyles: () => {
         backgroundColor: string;
         marginRight: number;
         maxHeight: number;
-        zIndex: number;
     };
     miniLabelShowClearAction: {
         backgroundColor: string;

package/dist/types/src/utils/buildConfig/isEdgeToEdgeEnabled.d.ts

@@ -0,0 +1 @@
+export declare function isEdgeToEdgeEnabled(): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.85.1-move-dupli-99be0f8.13+99be0f87a",
+  "version": "0.86.1-JOB-136074-c379982.0+c379982e9",
   "license": "MIT",
   "description": "React Native implementation of Atlantis",
   "repository": {
@@ -53,6 +53,7 @@
     "ts-xor": "^1.1.0"
   },
   "devDependencies": {
+    "@react-native-community/datetimepicker": "^7.1.0",
     "@storybook/addon-a11y": "^9.1.2",
     "@storybook/react": "^9.1.2",
     "@storybook/react-native-web-vite": "^9.1.2",
@@ -66,6 +67,13 @@
     "date-fns": "^2.30.0",
     "date-fns-tz": "^2.0.0",
     "metro-react-native-babel-preset": "^0.76.0",
+    "react-native": "^0.77.0",
+    "react-native-gesture-handler": "^2.10.2",
+    "react-native-modal-datetime-picker": "^15.0.1",
+    "react-native-reanimated": "^3.7.1",
+    "react-native-safe-area-context": "^5.4.0",
+    "react-native-svg": "^15.1.0",
+    "react-native-web": "^0.20.0",
     "react-test-renderer": "^18.2.0",
     "storybook": "^9.1.2"
   },
@@ -78,6 +86,7 @@
     "react": "^18.2.0",
     "react-intl": "^6.4.2",
     "react-native": ">=0.76.0",
+    "react-native-build-config": "^0.3.2",
     "react-native-gesture-handler": ">=2.10.0",
     "react-native-keyboard-aware-scroll-view": "^0.9.5",
     "react-native-modal-datetime-picker": " >=13.0.0",
@@ -87,5 +96,10 @@
     "react-native-safe-area-context": "^5.4.0",
     "react-native-svg": ">=12.0.0"
   },
-  "gitHead": "99be0f87adc5047e339f84deab23a6cdaeb8ba22"
+  "peerDependenciesMeta": {
+    "react-native-build-config": {
+      "optional": true
+    }
+  },
+  "gitHead": "c379982e9d83ceef1ec4ffa08f53ce98ed914d8c"
 }

package/src/Banner/Banner.test.tsx

@@ -35,6 +35,18 @@ describe("Banner", () => {
       expect(getByText("Notice me")).toBeDefined();
       expect(icon.props.children.props.name).toBe("starburst");
     });
+
+    it("renders a success Banner", () => {
+      const { getByText, getByTestId } = render(
+        <Banner type="success">
+          <Text>Your import is complete</Text>
+        </Banner>,
+      );
+
+      const icon = getByTestId("ATL-Banner-Icon");
+      expect(getByText("Your import is complete")).toBeDefined();
+      expect(icon.props.children.props.name).toBe("checkmark");
+    });
   });
 
   describe("Children", () => {

package/src/Banner/Banner.tsx

@@ -97,5 +97,7 @@ function getBannerIcon(type: BannerTypes): IconNames | undefined {
       return "help";
     case "error":
       return "alert";
+    case "success":
+      return "checkmark";
   }
 }

package/src/Banner/components/BannerIcon/BannerIcon.style.ts

@@ -15,5 +15,8 @@ export const useStyles = buildThemedStyles(tokens => {
     notice: {
       backgroundColor: tokens["color-informative"],
     },
+    success: {
+      backgroundColor: tokens["color-success"],
+    },
   };
 });

package/src/Banner/types.ts

@@ -2,7 +2,7 @@ import type { IconNames } from "@jobber/design";
 import type { ReactElement } from "react";
 import type { StyleProp, ViewStyle } from "react-native";
 
-export type BannerTypes = "error" | "warning" | "notice";
+export type BannerTypes = "error" | "warning" | "notice" | "success";
 
 export interface BannerStyleProps {
   /**

package/src/Form/Form.tsx

@@ -26,6 +26,7 @@ import { useScrollToError } from "./hooks/useScrollToError";
 import { FormSaveButton } from "./components/FormSaveButton";
 import { useSaveButtonPosition } from "./hooks/useSaveButtonPosition";
 import { FormCache } from "./components/FormCache/FormCache";
+import { isEdgeToEdgeEnabled } from "../utils/buildConfig/isEdgeToEdgeEnabled";
 import { InputAccessoriesProvider } from "../InputText";
 import { tokens } from "../utils/design";
 import { ErrorMessageProvider } from "../ErrorMessageWrapper";
@@ -134,6 +135,9 @@ function InternalForm<T extends FieldValues, S>({
 
   const styles = useStyles();
 
+  // Check if edge-to-edge is enabled using utility function
+  const edgeToEdgeEnabled = isEdgeToEdgeEnabled();
+
   return (
     <FormProvider {...formMethods}>
       <>
@@ -161,6 +165,7 @@ function InternalForm<T extends FieldValues, S>({
           <KeyboardAwareScrollView
             enableResetScrollToCoords={false}
             enableAutomaticScroll={true}
+            enableOnAndroid={edgeToEdgeEnabled}
             keyboardOpeningTime={
               Platform.OS === "ios" ? tokens["timing-slowest"] : 0
             }
@@ -168,6 +173,7 @@ function InternalForm<T extends FieldValues, S>({
             ref={scrollViewRef}
             {...keyboardProps}
             extraHeight={headerHeight}
+            extraScrollHeight={edgeToEdgeEnabled ? 20 : 0}
             contentContainerStyle={
               !keyboardHeight && styles.scrollContentContainer
             }

package/src/InputFieldWrapper/InputFieldWrapper.style.ts

@@ -43,6 +43,7 @@ export const useStyles = buildThemedStyles(tokens => {
       right: 0,
       bottom: 0,
       left: 0,
+      zIndex: 1,
     },
 
     miniLabel: {
@@ -53,7 +54,6 @@ export const useStyles = buildThemedStyles(tokens => {
       maxHeight:
         (typographyStyles.defaultSize.lineHeight || 0) +
         tokens["space-smaller"],
-      zIndex: 1,
     },
     // Prevents the miniLabel from cutting off the ClearAction button
     miniLabelShowClearAction: {

package/src/types/buildConfig.d.ts

@@ -0,0 +1,7 @@
+declare module "react-native-build-config" {
+  const BuildConfig: {
+    IS_EDGE_TO_EDGE_ENABLED?: boolean;
+    [k: string]: unknown;
+  };
+  export = BuildConfig;
+}

package/src/utils/buildConfig/isEdgeToEdgeEnabled.ts

@@ -0,0 +1,21 @@
+import { Platform } from "react-native";
+
+type BuildCfg = { IS_EDGE_TO_EDGE_ENABLED?: boolean } | undefined | null;
+
+function loadBuildConfig(): BuildCfg {
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    const mod = require("react-native-build-config");
+
+    return (mod?.default ?? mod) as BuildCfg;
+  } catch {
+    return null; // module not installed or not linked
+  }
+}
+
+export function isEdgeToEdgeEnabled(): boolean {
+  if (Platform.OS !== "android") return false;
+  const cfg = loadBuildConfig();
+
+  return !!cfg?.IS_EDGE_TO_EDGE_ENABLED;
+}