Skip to content

fix(components-native): Form respect safe area spacing #3078

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
omairJobber wants to merge 1 commit into
base: master
Choose a base branch
from
+25 −43
Open

fix(components-native): Form respect safe area spacing #3078

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions packages/components-native/src/Form/Form.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -557,12 +557,12 @@ describe("Form", () => {
expect(getByTestId("ATL-FormSafeArea")).toBeDefined();
});

it("does NOT render a safe area when there's a saveButtonOffset is provided", () => {
const { queryByTestId } = render(
it("does render a safe area when there's a saveButtonOffset is provided", () => {
Copy link

Copilot AI Apr 29, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Test description is grammatically incorrect; consider rephrasing for clarity (e.g., remove the extra “is”).

Suggested change
it("does render a safe area when there's a saveButtonOffset is provided", () => {
it("does render a safe area when there's a saveButtonOffset provided", () => {

Copilot uses AI. Check for mistakes.
const { getByTestId } = render(
<FormTest onSubmit={onSubmitMock} saveButtonOffset={30} />,
);

expect(queryByTestId("ATL-FormSafeArea")).toBeNull();
expect(getByTestId("ATL-FormSafeArea")).toBeDefined();
});
});

Expand Down
7 changes: 1 addition & 6 deletions packages/components-native/src/Form/Form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,6 @@ import { useScrollToError } from "./hooks/useScrollToError";
import { FormSaveButton } from "./components/FormSaveButton";
import { useSaveButtonPosition } from "./hooks/useSaveButtonPosition";
import { FormCache } from "./components/FormCache/FormCache";
import { useAtlantisFormContext } from "./context/AtlantisFormContext";
import { IOSKeyboardAwareScrollViewSpacer } from "./components/IOSKeyboardAwareScrollViewSpacer/IOSKeyboardAwareScrollViewSpacer";
import { InputAccessoriesProvider } from "../InputText";
import { tokens } from "../utils/design";
Expand Down Expand Up @@ -179,8 +178,6 @@ function InternalForm<T extends FieldValues, S>({

const styles = useStyles();

const { edgeToEdgeEnabled } = useAtlantisFormContext();

return (
<FormProvider {...formMethods}>
<>
Expand Down Expand Up @@ -234,9 +231,7 @@ function InternalForm<T extends FieldValues, S>({
<View
style={[
styles.fixedSaveButton,
(edgeToEdgeEnabled || Platform.OS !== "android") && {
marginBottom: paddingBottom,
},
paddingBottom > 0 && { marginBottom: paddingBottom },
]}
Comment on lines 233 to 235
Copy link

Copilot AI Apr 29, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This marginBottom branch is currently unreachable because paddingBottom comes from useBottomPadding(), which now always returns 0. If the intent is to keep inline save-button spacing aligned with the bottom safe area, paddingBottom needs to be sourced from safe-area insets (or the entire paddingBottom plumbing should be removed if SafeAreaView already guarantees the desired spacing).

Copilot uses AI. Check for mistakes.
>
{renderStickySection ? (
Expand Down
55 changes: 21 additions & 34 deletions packages/components-native/src/Form/components/FormBody/FormBody.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
import React, { type ReactElement, useMemo } from "react";
import { View } from "react-native";
import React, { type ReactNode } from "react";
import { SafeAreaView } from "react-native-safe-area-context";
import { useStyles } from "./FormBody.style";
import { useScreenInformation } from "../../hooks/useScreenInformation";
import type { FormActionBarProps } from "../FormActionBar";
import { FormActionBar } from "../FormActionBar";
import { tokens } from "../../../utils/design";

interface FormBodyProps extends FormActionBarProps {
readonly children: ReactElement;
readonly children: ReactNode;
readonly shouldRenderActionBar?: boolean;
readonly saveButtonOffset?: number;
}
Comment on lines 7 to 11
Copy link

Copilot AI Apr 29, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

saveButtonOffset is still declared on FormBodyProps, but FormBody no longer reads it (it isn’t destructured/used). This makes the prop misleading and easy to assume it still influences safe-area behavior. Either remove saveButtonOffset from FormBodyProps (and stop passing it from the parent), or re-introduce behavior that actually depends on it.

Copilot uses AI. Check for mistakes.
Expand All @@ -23,43 +21,32 @@ export function FormBody({
secondaryActions,
setSecondaryActionLoading,
setSaveButtonHeight,
saveButtonOffset,
}: FormBodyProps) {
const paddingBottom = useBottomPadding();
const fullViewPadding = useMemo(() => ({ paddingBottom }), [paddingBottom]);
const styles = useStyles();

return (
<>
<View style={[styles.container]}>
{children}
{shouldRenderActionBar && (
<FormActionBar
setSecondaryActionLoading={setSecondaryActionLoading}
keyboardHeight={keyboardHeight}
submit={submit}
isFormSubmitting={isFormSubmitting}
saveButtonLabel={saveButtonLabel}
renderStickySection={renderStickySection}
secondaryActions={secondaryActions}
setSaveButtonHeight={setSaveButtonHeight}
/>
)}
</View>

{shouldRenderActionBar && !saveButtonOffset && (
<View
style={[fullViewPadding, styles.safeArea]}
testID="ATL-FormSafeArea"
<SafeAreaView
edges={["bottom"]}
style={[styles.container, styles.safeArea]}
testID="ATL-FormSafeArea"
>
{children}
{shouldRenderActionBar && (
<FormActionBar
setSecondaryActionLoading={setSecondaryActionLoading}
keyboardHeight={keyboardHeight}
submit={submit}
isFormSubmitting={isFormSubmitting}
saveButtonLabel={saveButtonLabel}
renderStickySection={renderStickySection}
secondaryActions={secondaryActions}
setSaveButtonHeight={setSaveButtonHeight}
/>
)}
</>
</SafeAreaView>
);
}

export function useBottomPadding(): number {
const { insets } = useScreenInformation();
const extraBottomSpace = insets.bottom - tokens["space-base"];

return extraBottomSpace >= 0 ? extraBottomSpace : 0;
return 0;
}
Comment on lines 50 to 52
Copy link

Copilot AI Apr 29, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

useBottomPadding() now returns a constant 0, but it’s still used by Form to compute keyboard offsets and inline save-button spacing. This effectively disables any safe-area inset adjustment and can change behavior on devices with non-zero bottom insets. Consider either (a) re-implementing this using safe-area insets (e.g., via useSafeAreaInsets() / useScreenInformation().insets.bottom), or (b) removing the hook and simplifying the dependent calculations so they don’t rely on a dead value.

Copilot uses AI. Check for mistakes.
Loading