@rocapine/react-native-onboarding-ui 1.14.0 → 1.15.0

package/src/UI/Pages/Carousel/Renderer.tsx

@@ -1,4 +1,5 @@
 import { OnboardingTemplate } from "../../Templates/OnboardingTemplate";
+import { SafeAreaView } from "react-native-safe-area-context";
 import {
   CarouselStepType,
   CarouselStepTypeSchema,
@@ -58,6 +59,7 @@ const CarouselRendererBase = ({ step, onContinue, theme = defaultTheme }: Conten
   const isLastPage = currentPage === screens.length - 1;
 
   return (
+    <SafeAreaView style={{ flex: 1 }} edges={["top", "bottom"]}>
     <OnboardingTemplate
       step={step}
       onContinue={handleButtonPress}
@@ -101,6 +103,7 @@ const CarouselRendererBase = ({ step, onContinue, theme = defaultTheme }: Conten
         </View>
       </View>
     </OnboardingTemplate>
+    </SafeAreaView>
   );
 };
 

package/src/UI/Pages/Commitment/Renderer.tsx

@@ -8,6 +8,7 @@ import {
 } from "react-native";
 import { CommitmentStepType, CommitmentStepTypeSchema } from "./types";
 import { OnboardingTemplate } from "../../Templates/OnboardingTemplate";
+import { SafeAreaView } from "react-native-safe-area-context";
 import {
   Gesture,
   GestureDetector,
@@ -80,6 +81,7 @@ const CommitmentRendererBase = ({ step, onContinue, theme = defaultTheme }: Cont
   const isButtonDisabled = payload.variant === "signature" && !hasSignature;
 
   return (
+    <SafeAreaView style={{ flex: 1 }} edges={["top", "bottom"]}>
     <OnboardingTemplate
       step={validatedData}
       onContinue={onContinue}
@@ -219,6 +221,7 @@ const CommitmentRendererBase = ({ step, onContinue, theme = defaultTheme }: Cont
         </View>
       </ScrollView>
     </OnboardingTemplate>
+    </SafeAreaView>
   );
 };
 

package/src/UI/Pages/ComposableScreen/elements/SafeAreaViewElement.tsx

@@ -0,0 +1,93 @@
+import React from "react";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { z } from "zod";
+import { BaseBoxProps, BaseBoxPropsSchema } from "./BaseBoxProps";
+import { GradientBox } from "./GradientBox";
+import { UIElement } from "../types";
+import { RenderContext, dim } from "./shared";
+
+export type SafeAreaEdge = "top" | "right" | "bottom" | "left";
+export type SafeAreaEdgeMode = "off" | "additive" | "maximum";
+
+export type SafeAreaViewElementProps = BaseBoxProps & {
+  mode?: "padding" | "margin";
+  edges?: SafeAreaEdge[] | Partial<Record<SafeAreaEdge, SafeAreaEdgeMode>>;
+};
+
+const EdgeSchema = z.enum(["top", "right", "bottom", "left"]);
+const EdgeModeSchema = z.enum(["off", "additive", "maximum"]);
+
+export const SafeAreaViewElementPropsSchema = BaseBoxPropsSchema.extend({
+  mode: z.enum(["padding", "margin"]).optional(),
+  edges: z
+    .union([
+      z.array(EdgeSchema),
+      z.object({
+        top: EdgeModeSchema.optional(),
+        right: EdgeModeSchema.optional(),
+        bottom: EdgeModeSchema.optional(),
+        left: EdgeModeSchema.optional(),
+      }),
+    ])
+    .optional(),
+});
+
+type SafeAreaViewUIElement = Extract<UIElement, { type: "SafeAreaView" }>;
+
+type Props = {
+  element: SafeAreaViewUIElement;
+  ctx: RenderContext;
+};
+
+export const SafeAreaViewElementComponent = ({ element, ctx }: Props): React.ReactElement => {
+  const p = element.props;
+  const hasGradient = !!p.backgroundGradient;
+  const frameStyle = {
+    flex: p.flex,
+    flexShrink: p.flexShrink,
+    flexGrow: p.flexGrow,
+    alignSelf: p.alignSelf,
+    width: dim(p.width),
+    height: dim(p.height),
+    minWidth: p.minWidth,
+    maxWidth: p.maxWidth,
+    minHeight: p.minHeight,
+    maxHeight: p.maxHeight,
+    margin: p.margin,
+    marginHorizontal: p.marginHorizontal,
+    marginVertical: p.marginVertical,
+    backgroundColor: hasGradient ? undefined : p.backgroundColor,
+    borderWidth: p.borderWidth,
+    borderRadius: p.borderRadius,
+    borderColor: p.borderColor,
+    overflow: hasGradient ? "hidden" as const : p.overflow,
+    opacity: p.opacity,
+  };
+
+  const safeAreaStyle = {
+    flex: hasGradient ? 1 : p.flex,
+    padding: p.padding,
+    paddingHorizontal: p.paddingHorizontal,
+    paddingVertical: p.paddingVertical,
+  };
+
+  if (hasGradient) {
+    return (
+      <GradientBox gradient={p.backgroundGradient} style={frameStyle}>
+        <SafeAreaView mode={p.mode} edges={p.edges as any} style={safeAreaStyle}>
+          {ctx.renderChildren(element.children, "YStack")}
+        </SafeAreaView>
+      </GradientBox>
+    );
+  }
+
+  return (
+    <SafeAreaView
+      mode={p.mode}
+      edges={p.edges as any}
+      style={{ ...frameStyle, ...safeAreaStyle }}
+    >
+      {ctx.renderChildren(element.children, "YStack")}
+    </SafeAreaView>
+  );
+};

package/src/UI/Pages/ComposableScreen/elements/renderElement.tsx

@@ -15,6 +15,7 @@ import { ButtonElementComponent } from "./ButtonElement";
 import { DatePickerElementComponent } from "./DatePickerElement";
 import { CarouselElementComponent } from "./CarouselElement";
 import { ZStackElementComponent } from "./ZStackElement";
+import { SafeAreaViewElementComponent } from "./SafeAreaViewElement";
 
 export const renderElement = (
   element: UIElement,
@@ -77,5 +78,9 @@ export const renderElement = (
     return <ZStackElementComponent key={element.id} element={element} ctx={ctx} />;
   }
 
+  if (element.type === "SafeAreaView") {
+    return <SafeAreaViewElementComponent key={element.id} element={element} ctx={ctx} />;
+  }
+
   return null;
 };

package/src/UI/Pages/ComposableScreen/types.ts

@@ -14,6 +14,7 @@ import { type CheckboxGroupElementProps, CheckboxGroupElementPropsSchema } from
 import { type DatePickerElementProps, DatePickerElementPropsSchema } from "./elements/DatePickerElement";
 import { type CarouselElementProps, CarouselElementPropsSchema } from "./elements/CarouselElement";
 import { type ZStackElementProps, ZStackElementPropsSchema } from "./elements/ZStackElement";
+import { type SafeAreaViewElementProps, SafeAreaViewElementPropsSchema } from "./elements/SafeAreaViewElement";
 
 export type { BaseBoxProps } from "./elements/BaseBoxProps";
 export { BaseBoxPropsSchema } from "./elements/BaseBoxProps";
@@ -31,6 +32,7 @@ export type { CheckboxGroupElementProps } from "./elements/CheckboxGroupElement"
 export type { DatePickerElementProps } from "./elements/DatePickerElement";
 export type { CarouselElementProps } from "./elements/CarouselElement";
 export type { ZStackElementProps } from "./elements/ZStackElement";
+export type { SafeAreaViewElementProps, SafeAreaEdge, SafeAreaEdgeMode } from "./elements/SafeAreaViewElement";
 
 // UIElement union — must live here (not in elements/) to avoid circular deps
 // because the Stack variant's children: UIElement[] references itself.
@@ -121,6 +123,13 @@ export type UIElement =
       type: "ZStack";
       props: ZStackElementProps;
       children: UIElement[];
+    }
+  | {
+      id: string;
+      name?: string;
+      type: "SafeAreaView";
+      props: SafeAreaViewElementProps;
+      children: UIElement[];
     };
 
 export const UIElementSchema: z.ZodType<UIElement> = z.lazy(() =>
@@ -212,6 +221,13 @@ export const UIElementSchema: z.ZodType<UIElement> = z.lazy(() =>
       props: ZStackElementPropsSchema,
       children: z.array(UIElementSchema),
     }),
+    z.object({
+      id: z.string(),
+      name: z.string().optional(),
+      type: z.literal("SafeAreaView"),
+      props: SafeAreaViewElementPropsSchema,
+      children: z.array(UIElementSchema),
+    }),
   ])
 );
 

package/src/UI/Pages/Loader/Renderer.tsx

@@ -1,4 +1,5 @@
 import { OnboardingTemplate } from "../../Templates/OnboardingTemplate";
+import { SafeAreaView } from "react-native-safe-area-context";
 import { LoaderStepType, LoaderStepTypeSchema, LoaderStep } from "./types";
 import {
   View,
@@ -97,6 +98,7 @@ const BarsVariant = ({
   const styles = createStyles(theme);
 
   return (
+    <SafeAreaView style={{ flex: 1 }} edges={["top", "bottom"]}>
     <OnboardingTemplate
       step={step}
       onContinue={onContinue}
@@ -113,6 +115,7 @@ const BarsVariant = ({
       <ScrollView
         contentContainerStyle={styles.scrollContent}
         showsVerticalScrollIndicator={false}
+        alwaysBounceVertical={false}
       >
         <View style={styles.container}>
           {/* Title */}
@@ -147,6 +150,7 @@ const BarsVariant = ({
         />
       )}
     </OnboardingTemplate>
+    </SafeAreaView>
   );
 };
 
@@ -171,10 +175,12 @@ const CircleVariant = ({
   const styles = createStyles(theme);
 
   return (
+    <SafeAreaView style={{ flex: 1 }} edges={["top", "bottom"]}>
     <OnboardingTemplate step={step} onContinue={onContinue} theme={theme}>
       <ScrollView
         contentContainerStyle={styles.scrollContent}
         showsVerticalScrollIndicator={false}
+        alwaysBounceVertical={false}
       >
         <View style={styles.container}>
           {/* Circular Progress */}
@@ -201,6 +207,7 @@ const CircleVariant = ({
         </View>
       </ScrollView>
     </OnboardingTemplate>
+    </SafeAreaView>
   );
 };
 

package/src/UI/Pages/MediaContent/Renderer.tsx

@@ -1,4 +1,5 @@
 import { OnboardingTemplate } from "../../Templates/OnboardingTemplate";
+import { SafeAreaView } from "react-native-safe-area-context";
 import { MediaContentStepType, MediaContentStepTypeSchema } from "./types";
 import { View, Text, StyleSheet, Image, ScrollView } from "react-native";
 import { Theme } from "../../Theme/types";
@@ -115,6 +116,7 @@ const MediaContentRendererBase = ({ step, onContinue, theme = defaultTheme }: Co
   };
 
   return (
+    <SafeAreaView style={{ flex: 1 }} edges={["top", "bottom"]}>
     <OnboardingTemplate
       step={step}
       onContinue={onContinue}
@@ -126,6 +128,7 @@ const MediaContentRendererBase = ({ step, onContinue, theme = defaultTheme }: Co
     >
       {renderContent()}
     </OnboardingTemplate>
+    </SafeAreaView>
   );
 };
 

package/src/UI/Pages/Picker/Renderer.tsx

@@ -1,4 +1,5 @@
 import { OnboardingTemplate } from "../../Templates/OnboardingTemplate";
+import { SafeAreaView } from "react-native-safe-area-context";
 import { PickerStepType, PickerStepTypeSchema, WeightUnit, HeightUnit } from "./types";
 import { View, Text, StyleSheet, TextInput, KeyboardAvoidingView, Platform, TouchableWithoutFeedback, Keyboard } from "react-native";
 import { useState } from "react";
@@ -86,6 +87,7 @@ const PickerRendererBase = ({ step, onContinue, theme = defaultTheme }: ContentP
 
   // Fallback for other picker types (to be implemented)
   return (
+    <SafeAreaView style={{ flex: 1 }} edges={["top", "bottom", "left", "right"]}>
     <OnboardingTemplate
       step={step}
       onContinue={() => onContinue()}
@@ -102,6 +104,7 @@ const PickerRendererBase = ({ step, onContinue, theme = defaultTheme }: ContentP
         </View>
       </View>
     </OnboardingTemplate>
+    </SafeAreaView>
   );
 };
 
@@ -145,6 +148,7 @@ const WeightPicker = ({
   };
 
   return (
+    <SafeAreaView style={{ flex: 1 }} edges={["top", "bottom", "left", "right"]}>
     <OnboardingTemplate
       step={step}
       onContinue={handleContinue}
@@ -189,6 +193,7 @@ const WeightPicker = ({
         </View>
       </View>
     </OnboardingTemplate>
+    </SafeAreaView>
   );
 };
 
@@ -261,6 +266,7 @@ const HeightPicker = ({
   };
 
   return (
+    <SafeAreaView style={{ flex: 1 }} edges={["top", "bottom", "left", "right"]}>
     <OnboardingTemplate
       step={step}
       onContinue={handleContinue}
@@ -330,6 +336,7 @@ const HeightPicker = ({
         </View>
       </View>
     </OnboardingTemplate>
+    </SafeAreaView>
   );
 };
 
@@ -361,6 +368,7 @@ const NamePicker = ({
   };
 
   return (
+    <SafeAreaView style={{ flex: 1 }} edges={["top", "bottom", "left", "right"]}>
     <KeyboardAvoidingView
       behavior={Platform.OS === "ios" ? "padding" : "height"}
       style={{ flex: 1 }}
@@ -412,6 +420,7 @@ const NamePicker = ({
         </View>
       </TouchableWithoutFeedback>
     </KeyboardAvoidingView>
+    </SafeAreaView>
   );
 };
 
@@ -476,6 +485,7 @@ const DatePicker = ({
   };
 
   return (
+    <SafeAreaView style={{ flex: 1 }} edges={["top", "bottom", "left", "right"]}>
     <OnboardingTemplate
       step={step}
       onContinue={handleContinue}
@@ -531,6 +541,7 @@ const DatePicker = ({
         </View>
       </View>
     </OnboardingTemplate>
+    </SafeAreaView>
   );
 };
 

package/src/UI/Pages/Question/Renderer.tsx

@@ -8,6 +8,7 @@ import {
   StyleSheet,
 } from "react-native";
 import { OnboardingTemplate } from "../../Templates/OnboardingTemplate";
+import { SafeAreaView } from "react-native-safe-area-context";
 import { getTextStyle } from "../../Theme/helpers";
 import { Theme } from "../../Theme/types";
 import { defaultTheme } from "../../Theme/defaultTheme";
@@ -86,6 +87,7 @@ const QuestionRendererBase = ({ step, onContinue, theme = defaultTheme, customCo
     customComponents?.QuestionAnswerButton || DefaultQuestionAnswerButton;
 
   return (
+    <SafeAreaView style={{ flex: 1 }} edges={["top", "bottom"]}>
     <OnboardingTemplate
       step={step}
       onContinue={handleContinue || (() => { })}
@@ -127,6 +129,7 @@ const QuestionRendererBase = ({ step, onContinue, theme = defaultTheme, customCo
             style={styles.scrollView}
             contentContainerStyle={styles.scrollContent}
             showsVerticalScrollIndicator={false}
+            alwaysBounceVertical={false}
           >
             <AnswersList
               answers={answers}
@@ -139,6 +142,7 @@ const QuestionRendererBase = ({ step, onContinue, theme = defaultTheme, customCo
         </View>
       </View>
     </OnboardingTemplate>
+    </SafeAreaView>
   );
 };
 

package/src/UI/Pages/Ratings/Renderer.tsx

@@ -1,6 +1,7 @@
 import { Image, ScrollView, StyleSheet, Text, View } from "react-native";
 import Svg, { Path } from "react-native-svg";
 import { OnboardingTemplate } from "../../Templates/OnboardingTemplate";
+import { SafeAreaView } from "react-native-safe-area-context";
 import { RatingsStepType, RatingsStepTypeSchema } from "./types";
 import { useState } from "react";
 import { Theme } from "../../Theme/types";
@@ -76,6 +77,7 @@ const RatingsRendererBase = ({ step, onContinue, theme = defaultTheme }: Ratings
   };
 
   return (
+    <SafeAreaView style={{ flex: 1 }} edges={["top", "bottom"]}>
     <OnboardingTemplate
       step={step}
       onContinue={handlePress}
@@ -92,6 +94,7 @@ const RatingsRendererBase = ({ step, onContinue, theme = defaultTheme }: Ratings
         <ScrollView
           contentContainerStyle={styles.scrollContent}
           showsVerticalScrollIndicator={false}
+          alwaysBounceVertical={false}
         >
           {/* Award Section */}
           <View style={styles.awardSection}>
@@ -168,6 +171,7 @@ const RatingsRendererBase = ({ step, onContinue, theme = defaultTheme }: Ratings
         </ScrollView>
       </View>
     </OnboardingTemplate>
+    </SafeAreaView>
   );
 };
 

package/src/UI/Templates/OnboardingTemplate.tsx

@@ -1,6 +1,5 @@
 import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
 import { OnboardingStepType } from "../types";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { getTextStyle } from "../Theme/helpers";
 import { Theme } from "../Theme/types";
 import { defaultTheme } from "../Theme/defaultTheme";
@@ -60,16 +59,13 @@ export const OnboardingTemplate = ({
   button,
   theme = defaultTheme,
 }: OnboardingTemplateProps) => {
-  const { top, bottom } = useSafeAreaInsets();
-
   return (
     <View
       style={[
         styles.container,
         {
           backgroundColor: theme.colors.neutral.lowest,
-          paddingTop: step.displayProgressHeader ? top + 40 : top,
-          paddingBottom: bottom
+          paddingTop: step.displayProgressHeader ? 40 : 0,
         },
       ]}
     >