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

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/Provider/OnboardingProgressProvider.tsx

@@ -1,8 +1,11 @@
 import { createContext, useState, useCallback } from "react";
 import { SafeAreaProvider } from "react-native-safe-area-context";
+import type { ComposableVariableEntry } from "@rocapine/react-native-onboarding";
 import { ThemeProvider } from "../Theme/ThemeProvider";
 import { ColorScheme } from "../Theme/types";
 
+export type { ComposableVariableEntry };
+
 export const OnboardingProgressProvider = ({
   children,
   initialColorScheme = "light",
@@ -35,8 +38,6 @@ export const OnboardingProgressProvider = ({
   );
 };
 
-export type ComposableVariableEntry = { value: string; label?: string };
-
 export const OnboardingProgressContext = createContext({
   activeStep: { number: 0, displayProgressHeader: false },
   setActiveStep: (_step: {

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,
         },
       ]}
     >

package/src/index.ts

@@ -4,6 +4,11 @@ export type {
   Onboarding,
   OnboardingMetadata,
   OnboardingStudioClientOptions,
+  CustomActionHandler,
+  CustomActions,
+  ButtonAction,
+  CustomButtonAction,
+  ComposableVariableEntry,
 } from "@rocapine/react-native-onboarding";
 
 // UI Components and Router