@rocapine/react-native-onboarding-ui 1.0.0

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

@@ -0,0 +1,208 @@
+import { useState } from "react";
+import { QuestionStepTypeSchema, QuestionStepType } from "./types";
+import {
+  View,
+  Text,
+  ScrollView,
+  TouchableOpacity,
+  StyleSheet,
+} from "react-native";
+import { OnboardingTemplate } from "../../Templates/OnboardingTemplate";
+import { getTextStyle } from "../../Theme/helpers";
+import { Theme } from "../../Theme/types";
+import { defaultTheme } from "../../Theme/defaultTheme";
+import {
+  DefaultQuestionAnswerButton,
+  DefaultQuestionAnswersList,
+  QuestionAnswerButtonProps,
+  QuestionAnswersListProps,
+} from "./components";
+
+interface QuestionRendererProps {
+  step: QuestionStepType;
+  onContinue?: (...args: any[]) => void;
+  theme?: Theme;
+  customComponents?: {
+    QuestionAnswerButton?: React.ComponentType<QuestionAnswerButtonProps>;
+    QuestionAnswersList?: React.ComponentType<QuestionAnswersListProps>;
+  };
+}
+
+const QuestionRendererBase = ({ step, onContinue, theme = defaultTheme, customComponents }: QuestionRendererProps) => {
+
+  // Validate the schema
+  const validatedData = QuestionStepTypeSchema.parse(step);
+  const { title, subtitle, answers, multipleAnswer } = validatedData.payload;
+
+  const [selected, setSelected] = useState<Record<string, boolean>>({});
+
+  const handleContinue = () => {
+    if (!onContinue) return;
+    const selectedAnswers = Object.keys(selected).filter(
+      (key) => selected[key]
+    );
+    onContinue(multipleAnswer ? selectedAnswers : selectedAnswers[0]);
+  };
+
+  const onAnswerSelected = (answer: string) => {
+    if (!onContinue) return;
+    if (multipleAnswer) {
+      toggleSelected(answer);
+    } else {
+      onContinue(answer);
+    }
+  };
+
+  const toggleSelected = (answer: string) => {
+    const isNoneOfTheAbove = answer === "None of the above";
+
+    setSelected((prev) => {
+      if (multipleAnswer) {
+        let newSelected: Record<string, boolean>;
+
+        if (isNoneOfTheAbove) {
+          return { [answer]: true };
+        }
+
+        newSelected = { ...prev, [answer]: !prev[answer] };
+
+        if (newSelected["None of the above"]) {
+          newSelected["None of the above"] = false;
+        }
+
+        return newSelected;
+      } else {
+        return { [answer]: true };
+      }
+    });
+  };
+
+  const isAnySelected = Object.values(selected).some((value) => value);
+
+  // Priority: Custom full list > Custom button (via DefaultList) > Default implementation
+  const AnswersList =
+    customComponents?.QuestionAnswersList || DefaultQuestionAnswersList;
+  const AnswerButton =
+    customComponents?.QuestionAnswerButton || DefaultQuestionAnswerButton;
+
+  return (
+    <OnboardingTemplate
+      step={step}
+      onContinue={handleContinue || (() => { })}
+      theme={theme}
+      button={multipleAnswer && isAnySelected ? { text: "Continue" } : undefined}
+    >
+      <View style={styles.container}>
+        {/* Main Content */}
+        <View style={styles.contentContainer}>
+          {/* Header */}
+          <View style={styles.headerSection}>
+            <Text
+              style={[
+                getTextStyle(theme, "heading1"),
+                styles.title,
+                { color: theme.colors.text.primary },
+              ]}
+            >
+              {title}
+            </Text>
+            {Boolean(subtitle?.length) ? (
+              <Text
+                style={[
+                  getTextStyle(theme, "body"),
+                  styles.subtitle,
+                  { color: theme.colors.text.secondary },
+                ]}
+              >
+                {subtitle}
+              </Text>
+            ) : null}
+          </View>
+
+          {/* Answers */}
+          <ScrollView
+            style={styles.scrollView}
+            contentContainerStyle={styles.scrollContent}
+            showsVerticalScrollIndicator={false}
+          >
+            <AnswersList
+              answers={answers}
+              selected={selected}
+              onAnswerPress={onAnswerSelected}
+              multipleAnswer={multipleAnswer}
+              theme={theme}
+            />
+          </ScrollView>
+        </View>
+      </View>
+    </OnboardingTemplate>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  contentContainer: {
+    flex: 1,
+    paddingHorizontal: 24,
+    paddingTop: 16,
+    gap: 40,
+  },
+  headerSection: {
+    gap: 8,
+  },
+  title: {
+    textAlign: "center",
+  },
+  subtitle: {
+    textAlign: "center",
+  },
+  scrollView: {
+    flex: 1,
+  },
+  scrollContent: {
+    flexGrow: 1,
+  },
+  answersContainer: {
+    gap: 10,
+  },
+  bottomSection: {
+    paddingHorizontal: 32,
+    paddingBottom: 8,
+    gap: 24,
+    alignItems: "center",
+  },
+  continueButton: {
+    backgroundColor: "#262626",
+    borderRadius: 90,
+    paddingVertical: 18,
+    paddingHorizontal: 24,
+    minWidth: 234,
+    alignItems: "center",
+  },
+  continueButtonDisabled: {
+    backgroundColor: "#d1d1d6",
+  },
+  continueButtonText: {
+    fontFamily: "System",
+    fontSize: 16,
+    fontWeight: "500",
+    color: "#ffffff",
+    textAlign: "center",
+  },
+  homeIndicator: {
+    width: 148,
+    height: 5,
+    backgroundColor: "#000000",
+    borderRadius: 100,
+    opacity: 0.3,
+  },
+});
+
+import { withErrorBoundary } from "../../ErrorBoundary";
+
+export const QuestionRenderer = withErrorBoundary(
+  QuestionRendererBase,
+  "Question"
+);

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

@@ -0,0 +1,130 @@
+import React from "react";
+import {
+  TouchableOpacity,
+  Text,
+  View,
+  StyleSheet,
+  ViewStyle,
+} from "react-native";
+import { Theme } from "../../Theme/types";
+import { getTextStyle } from "../../Theme/helpers";
+
+/**
+ * Props for custom Question answer button component.
+ * Individual button in the answers list.
+ */
+export interface QuestionAnswerButtonProps {
+  /** The answer data (label and value) */
+  answer: { label: string; value: string };
+  /** Whether this answer is currently selected */
+  selected: boolean;
+  /** Callback when button is pressed */
+  onPress: () => void;
+  /** Current theme */
+  theme: Theme;
+  /** Index in the list (0-based) */
+  index: number;
+  /** True if this is the first answer */
+  isFirst: boolean;
+  /** True if this is the last answer */
+  isLast: boolean;
+}
+
+/**
+ * Props for custom Question answers list component.
+ * Full control over the entire answers list rendering.
+ */
+export interface QuestionAnswersListProps {
+  /** All available answers */
+  answers: Array<{ label: string; value: string }>;
+  /** Record of which answers are selected (value -> boolean) */
+  selected: Record<string, boolean>;
+  /** Callback when an answer is pressed */
+  onAnswerPress: (value: string) => void;
+  /** Whether multiple answers can be selected */
+  multipleAnswer: boolean;
+  /** Current theme */
+  theme: Theme;
+}
+
+/**
+ * Default answer button component.
+ * Can be used standalone or wrapped in custom implementations.
+ */
+export const DefaultQuestionAnswerButton: React.FC<
+  QuestionAnswerButtonProps
+> = ({ answer, selected, onPress, theme }) => (
+  <TouchableOpacity
+    style={[
+      styles.answerButton,
+      { backgroundColor: theme.colors.neutral.lowest, borderColor: theme.colors.neutral.lower },
+      selected && [
+        styles.answerButtonSelected,
+        {
+          backgroundColor: theme.colors.primary,
+          borderColor: theme.colors.primary,
+        },
+      ],
+    ]}
+    onPress={onPress}
+    activeOpacity={0.7}
+  >
+    <Text
+      style={[
+        getTextStyle(theme, "body"),
+        styles.answerText,
+        { color: theme.colors.text.primary },
+        selected && [
+          styles.answerTextSelected,
+          { color: theme.colors.text.opposite },
+        ],
+      ]}
+    >
+      {answer.label}
+    </Text>
+  </TouchableOpacity>
+);
+
+/**
+ * Default answers list component.
+ * Renders all answers using DefaultQuestionAnswerButton or custom button if provided via context.
+ * Note: This component needs to be wrapped with custom components context provider to work properly.
+ * It will be imported dynamically in the renderer to avoid circular dependencies.
+ */
+export const DefaultQuestionAnswersList: React.FC<
+  QuestionAnswersListProps
+> = ({ answers, selected, onAnswerPress, theme }) => {
+  return (
+    <View style={styles.answersContainer}>
+      {answers.map((answer, index) => (
+        <DefaultQuestionAnswerButton
+          key={answer.value}
+          answer={answer}
+          selected={selected[answer.value]}
+          onPress={() => onAnswerPress(answer.value)}
+          theme={theme}
+          index={index}
+          isFirst={index === 0}
+          isLast={index === answers.length - 1}
+        />
+      ))}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  answerButton: {
+    borderRadius: 16,
+    paddingVertical: 20,
+    paddingHorizontal: 24,
+    borderWidth: 1,
+  },
+  answerButtonSelected: {},
+  answerText: {
+    textAlign: "center",
+  },
+  answerTextSelected: {},
+  answersContainer: {
+    gap: 10,
+  },
+});

package/src/UI/Pages/Question/index.ts

@@ -0,0 +1,3 @@
+export * from "./Renderer";
+export * from "./types";
+export * from "./components";

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

@@ -0,0 +1,29 @@
+import { z } from "zod";
+import { CustomPayloadSchema, InfoBoxSchema } from "../types";
+
+export const AnswerSchema = z.object({
+  label: z.string(),
+  value: z.string(),
+  icon: z.string().nullish(),
+  description: z.string().nullish(),
+});
+
+export const QuestionStepPayloadSchema = z.object({
+  answers: z.array(AnswerSchema),
+  title: z.string(),
+  subtitle: z.string().nullish(),
+  multipleAnswer: z.boolean(),
+  infoBox: InfoBoxSchema.nullish(),
+});
+
+export const QuestionStepTypeSchema = z.object({
+  id: z.string(),
+  type: z.literal("Question"),
+  name: z.string(),
+  displayProgressHeader: z.boolean(),
+  payload: QuestionStepPayloadSchema,
+  customPayload: CustomPayloadSchema,
+  figmaUrl: z.string().nullish(),
+});
+
+export type QuestionStepType = z.infer<typeof QuestionStepTypeSchema>;

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

@@ -0,0 +1,282 @@
+import { Image, ScrollView, StyleSheet, Text, View } from "react-native";
+import Svg, { Path } from "react-native-svg";
+import { OnboardingTemplate } from "../../Templates/OnboardingTemplate";
+import { RatingsStepType, RatingsStepTypeSchema } from "./types";
+import { useState } from "react";
+import { Theme } from "../../Theme/types";
+import { defaultTheme } from "../../Theme/defaultTheme";
+import { getTextStyle } from "../../Theme/helpers";
+
+// Lazy load StoreReview - only needed for ratings screens
+let StoreReview: any;
+try {
+  StoreReview = require("expo-store-review");
+} catch (e) {
+  // StoreReview not installed - will show error when ratings screen is used
+  StoreReview = null;
+}
+
+interface RatingsRendererProps {
+  step: RatingsStepType;
+  onContinue?: () => void;
+  theme?: Theme;
+}
+
+const StarIcon = ({ size, filled }: { size: number; filled: boolean }) => (
+  <Svg width={size} height={size} viewBox="0 0 32 32" fill="none">
+    <Path
+      d="M16 2L20.12 11.76L31 13.24L23.5 20.48L25.24 31.24L16 26.76L6.76 31.24L8.5 20.48L1 13.24L11.88 11.76L16 2Z"
+      fill={filled ? "#FED64B" : "none"}
+      stroke={filled ? "#FED64B" : "#D1D1D6"}
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+const RatingsRendererBase = ({ step, onContinue, theme = defaultTheme }: RatingsRendererProps) => {
+  const [hasOpenedRequestReview, setHasOpenedRequestReview] = useState(false);
+
+  // Check if StoreReview is available
+  if (!StoreReview) {
+    throw new Error(
+      "Ratings screens require expo-store-review. Install it with: npx expo install expo-store-review"
+    );
+  }
+
+  const handlePress = async () => {
+    if (!hasOpenedRequestReview) {
+      setHasOpenedRequestReview(true);
+      if (await StoreReview.hasAction()) {
+        // you can call StoreReview.requestReview()
+        await StoreReview.requestReview();
+      }
+    } else {
+      onContinue?.();
+    }
+  };
+  // Validate the schema
+  const validatedData = RatingsStepTypeSchema.parse(step);
+  const { title, subtitle, socialProofs, rateTheAppButtonLabel } =
+    validatedData.payload;
+
+  // Get the first social proof to display (as shown in design)
+  const mainReview = socialProofs[0];
+  const otherUsersCount = socialProofs.length > 1 ? socialProofs.length - 1 : 0;
+
+  const renderStars = (numberOfStar: number, size: number = 20) => {
+    return (
+      <View style={styles.starsContainer}>
+        {Array.from({ length: 5 }).map((_, index) => (
+          <StarIcon key={index} size={size} filled={index < numberOfStar} />
+        ))}
+      </View>
+    );
+  };
+
+  return (
+    <OnboardingTemplate
+      step={step}
+      onContinue={handlePress}
+      theme={theme}
+      button={{
+        text: !hasOpenedRequestReview
+          ? rateTheAppButtonLabel
+          : validatedData.continueButtonLabel,
+      }}
+    >
+      <View style={styles.container}>
+        {/* Main Content */}
+        <ScrollView
+          contentContainerStyle={styles.scrollContent}
+          showsVerticalScrollIndicator={false}
+        >
+          {/* Award Section */}
+          <View style={styles.awardSection}>
+            <View style={styles.awardContainer}>
+              <Image
+                source={require("../../../assets/laurel-left.png")}
+                style={styles.laurelImage}
+                resizeMode="contain"
+              />
+              <View style={styles.awardTextContainer}>
+                {renderStars(5, 32)}
+                <Text style={[getTextStyle(theme, "heading2"), styles.awardTitle, { color: theme.colors.text.secondary }]}>Users Choice</Text>
+              </View>
+              <Image
+                source={require("../../../assets/laurel-right.png")}
+                style={styles.laurelImage}
+                resizeMode="contain"
+              />
+            </View>
+          </View>
+
+          {/* Review Section */}
+          <View style={styles.reviewSection}>
+            <View style={[styles.reviewCard, { backgroundColor: theme.colors.neutral.lowestest }]}>
+              <View style={styles.reviewAuthor}>
+                <View style={[styles.avatar, { backgroundColor: theme.colors.neutral.low }]}>
+                  <Text style={[styles.avatarText, { color: theme.colors.text.opposite }]}>
+                    {mainReview.authorName.charAt(0).toUpperCase()}
+                  </Text>
+                </View>
+                <Text style={[getTextStyle(theme, "label"), styles.authorName, { color: theme.colors.text.secondary }]}>{mainReview.authorName}</Text>
+              </View>
+
+              <Text style={[getTextStyle(theme, "bodyMedium"), styles.reviewContent, { color: theme.colors.text.primary }]}>{mainReview.content}</Text>
+
+              {renderStars(mainReview.numberOfStar)}
+            </View>
+
+            {/* Other Users Count */}
+            {otherUsersCount > 0 && (
+              <View style={styles.usersCount}>
+                <View style={styles.avatarGroup}>
+                  {socialProofs.slice(1, 4).map((proof, index) => (
+                    <View
+                      key={index}
+                      style={[
+                        styles.smallAvatar,
+                        {
+                          zIndex: 3 - index,
+                          marginLeft: index > 0 ? -10 : 0,
+                          borderColor: theme.colors.neutral.lowestest,
+                          backgroundColor: theme.colors.neutral.low,
+                        },
+                      ]}
+                    >
+                      <Text style={[styles.smallAvatarText, { color: theme.colors.text.opposite }]}>
+                        {proof.authorName.charAt(0).toUpperCase()}
+                      </Text>
+                    </View>
+                  ))}
+                </View>
+                <Text style={[getTextStyle(theme, "bodyMedium"), styles.usersCountText, { color: theme.colors.text.secondary }]}>
+                  +{otherUsersCount.toLocaleString()} others
+                </Text>
+              </View>
+            )}
+          </View>
+
+          {/* Title and Subtitle */}
+          <View style={styles.textSection}>
+            <Text style={[getTextStyle(theme, "heading1"), styles.title, { color: theme.colors.text.primary }]}>{title}</Text>
+            <Text style={[getTextStyle(theme, "heading3"), styles.subtitle, { color: theme.colors.text.secondary }]}>{subtitle}</Text>
+          </View>
+        </ScrollView>
+      </View>
+    </OnboardingTemplate>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  scrollContent: {
+    flexGrow: 1,
+    paddingBottom: 48,
+    paddingTop: 20,
+    justifyContent: "space-between",
+  },
+  awardSection: {
+    flex: 1,
+    alignItems: "center",
+  },
+  awardContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+  },
+  laurelImage: {
+    width: 27,
+    height: 63,
+  },
+  awardTextContainer: {
+    alignItems: "center",
+    gap: 12,
+  },
+  awardTitle: {
+    textAlign: "center",
+  },
+  starsContainer: {
+    flexDirection: "row",
+    justifyContent: "center",
+    gap: 4,
+  },
+  reviewSection: {
+    paddingHorizontal: 32,
+    gap: 24,
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  reviewCard: {
+    borderRadius: 24,
+    padding: 20,
+    width: "100%",
+    maxWidth: 326,
+    gap: 16,
+  },
+  reviewAuthor: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+  },
+  avatar: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  avatarText: {
+    fontSize: 14,
+    fontWeight: "600",
+  },
+  authorName: {},
+  reviewContent: {
+    textAlign: "center",
+  },
+  usersCount: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+  },
+  avatarGroup: {
+    flexDirection: "row",
+  },
+  smallAvatar: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    alignItems: "center",
+    justifyContent: "center",
+    borderWidth: 2,
+  },
+  smallAvatarText: {
+    fontSize: 12,
+    fontWeight: "600",
+  },
+  usersCountText: {},
+  textSection: {
+    paddingHorizontal: 32,
+    gap: 16,
+    alignItems: "center",
+    marginTop: "auto",
+  },
+  title: {
+    textAlign: "center",
+  },
+  subtitle: {
+    textAlign: "center",
+  },
+});
+
+import { withErrorBoundary } from "../../ErrorBoundary";
+
+export const RatingsRenderer = withErrorBoundary(
+  RatingsRendererBase,
+  "Ratings"
+);

package/src/UI/Pages/Ratings/index.ts

@@ -0,0 +1,2 @@
+export * from "./Renderer";
+export * from "./types";

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

@@ -0,0 +1,22 @@
+import z from "zod";
+import { CustomPayloadSchema, SocialProofSchema } from "../types";
+
+export const RatingsStepPayloadSchema = z.object({
+  title: z.string(),
+  subtitle: z.string(),
+  socialProofs: z.array(SocialProofSchema),
+  rateTheAppButtonLabel: z.string().optional().default("Rate the app"),
+});
+
+export const RatingsStepTypeSchema = z.object({
+  id: z.string(),
+  type: z.literal("Ratings"),
+  name: z.string(),
+  displayProgressHeader: z.boolean(),
+  payload: RatingsStepPayloadSchema,
+  customPayload: CustomPayloadSchema,
+  continueButtonLabel: z.string().optional().default("Continue"),
+  figmaUrl: z.string().nullish(),
+});
+
+export type RatingsStepType = z.infer<typeof RatingsStepTypeSchema>;

package/src/UI/Pages/index.ts

@@ -0,0 +1,10 @@
+export * from "./Carousel";
+export * from "./Commitment";
+export * from "./Loader";
+export * from "./MediaContent";
+export * from "./Picker";
+export * from "./Question";
+export * from "./Ratings";
+
+// common types
+export * from "./types";