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

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

@@ -13,6 +13,8 @@ import { type RadioGroupElementProps, RadioGroupElementPropsSchema } from "./ele
 import { type CheckboxGroupElementProps, CheckboxGroupElementPropsSchema } from "./elements/CheckboxGroupElement";
 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";
@@ -29,6 +31,8 @@ export type { RadioGroupElementProps } from "./elements/RadioGroupElement";
 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.
@@ -112,6 +116,20 @@ export type UIElement =
       type: "Carousel";
       props: CarouselElementProps;
       children: UIElement[];
+    }
+  | {
+      id: string;
+      name?: string;
+      type: "ZStack";
+      props: ZStackElementProps;
+      children: UIElement[];
+    }
+  | {
+      id: string;
+      name?: string;
+      type: "SafeAreaView";
+      props: SafeAreaViewElementProps;
+      children: UIElement[];
     };
 
 export const UIElementSchema: z.ZodType<UIElement> = z.lazy(() =>
@@ -196,6 +214,20 @@ export const UIElementSchema: z.ZodType<UIElement> = z.lazy(() =>
       props: CarouselElementPropsSchema,
       children: z.array(UIElementSchema),
     }),
+    z.object({
+      id: z.string(),
+      name: z.string().optional(),
+      type: z.literal("ZStack"),
+      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,
         },
       ]}
     >