@blazejkustra/react-native-onboarding 0.1.1

package/src/spill-onboarding/components/OnboardingImageContainer.tsx

@@ -0,0 +1,166 @@
+import { useMemo, type ReactNode } from 'react';
+import {
+  Image,
+  type ImageSourcePropType,
+  Platform,
+  StyleSheet,
+  useWindowDimensions,
+} from 'react-native';
+import Animated, {
+  interpolate,
+  useDerivedValue,
+  useAnimatedStyle,
+  withTiming,
+  Easing,
+  type SharedValue,
+  useSharedValue,
+} from 'react-native-reanimated';
+import { useTheme } from '../../utils/ThemeContext';
+import useMeasureHeight from '../hooks/useMeasureHeight';
+import type { Theme } from '../../utils/theme';
+import type { OnboardingStep } from '../types';
+
+interface OnboardingImageContainerProps {
+  currentStep: OnboardingStep | undefined;
+  currentStepImage: ImageSourcePropType | undefined;
+  position: 'top' | 'bottom';
+  animationDuration: number;
+  backgroundSpillProgress: SharedValue<number>;
+  introPanel: any;
+  stepPanel: any;
+  screenHeight: number;
+  background?: () => ReactNode;
+}
+
+function OnboardingImageContainer({
+  currentStep,
+  currentStepImage,
+  position,
+  animationDuration,
+  backgroundSpillProgress,
+  introPanel,
+  stepPanel,
+  screenHeight,
+  background,
+}: OnboardingImageContainerProps) {
+  const { theme } = useTheme();
+  const image = useMeasureHeight();
+  const styles = useMemo(() => createStyles(theme), [theme]);
+  const extraPadding = Platform.OS === 'web' ? 16 : 0;
+  const { width: screenWidth } = useWindowDimensions();
+
+  // bottom panel height (intro or step)
+  const bottomPanelHeight = (currentStep ? stepPanel : introPanel).height || 0;
+
+  /**
+   * When 0 -> no spill; when 1 -> fully spilled by bottomPanelHeight
+   */
+  const backgroundSpillDistance = useDerivedValue(() =>
+    interpolate(backgroundSpillProgress.value, [0, 1], [0, bottomPanelHeight])
+  );
+
+  const imageWrapperHeight = useDerivedValue(
+    () => screenHeight - bottomPanelHeight + backgroundSpillDistance.value
+  );
+
+  const imageWrapperAnimation = useAnimatedStyle(() => ({
+    height: imageWrapperHeight.value,
+  }));
+
+  const imageTargetY = useDerivedValue(() => {
+    const topSafe = theme.insets.top + extraPadding + 16;
+
+    if (position === 'top') {
+      return topSafe;
+    }
+
+    const imageH = image.height || 0;
+    const modalTop = screenHeight - bottomPanelHeight - 16;
+    const yBottom = modalTop - imageH;
+
+    const shouldClampTop = !currentStep;
+    return shouldClampTop ? Math.max(yBottom, topSafe) : yBottom;
+  });
+
+  const hasMounted = useSharedValue(false);
+
+  const imageAnimation = useAnimatedStyle(() => {
+    const translateY = withTiming(
+      imageTargetY.value,
+      {
+        duration: hasMounted.value ? animationDuration : 0,
+        easing: Easing.out(Easing.cubic),
+      },
+      () => (hasMounted.value = true)
+    );
+    const sideEdges = Math.max(32 + 24 - backgroundSpillDistance.value, 0);
+
+    return {
+      transform: [{ translateY }],
+      maxWidth: screenWidth - sideEdges,
+    };
+  }, [animationDuration]);
+
+  const backgroundAnimation = useAnimatedStyle(() => {
+    const topEdge = Math.max(
+      theme.insets.top + extraPadding - backgroundSpillDistance.value,
+      0
+    );
+    const sideEdge = Math.max(16 - backgroundSpillDistance.value, 0);
+
+    return {
+      position: 'absolute',
+      top: topEdge,
+      left: sideEdge,
+      right: sideEdge,
+      bottom: screenHeight - imageWrapperHeight.value,
+      borderRadius: Math.max(12 - backgroundSpillDistance.value, 0),
+    };
+  });
+
+  return (
+    <>
+      {background ? (
+        <Animated.View style={backgroundAnimation}>
+          {background()}
+        </Animated.View>
+      ) : (
+        <Animated.View style={[styles.colorBg, backgroundAnimation]} />
+      )}
+
+      {currentStepImage && (
+        <Animated.View style={[styles.imageWrapper, imageWrapperAnimation]}>
+          <Animated.View style={[styles.image, imageAnimation]} ref={image.ref}>
+            <Image
+              source={currentStepImage}
+              resizeMode="contain"
+              fadeDuration={0}
+            />
+          </Animated.View>
+        </Animated.View>
+      )}
+    </>
+  );
+}
+
+export default OnboardingImageContainer;
+
+const createStyles = (theme: Theme) =>
+  StyleSheet.create({
+    colorBg: {
+      backgroundColor: theme.bg.primary,
+      overflow: 'hidden',
+    },
+    imageWrapper: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      overflow: 'hidden',
+    },
+    image: {
+      alignSelf: 'center',
+      alignItems: 'center',
+      overflow: 'hidden',
+    },
+  });

package/src/spill-onboarding/components/OnboardingIntroPanel.tsx

@@ -0,0 +1,105 @@
+import { useMemo } from 'react';
+import { Image, StyleSheet, Text, View } from 'react-native';
+import { useTheme } from '../../utils/ThemeContext';
+import type { Theme } from '../../utils/theme';
+import PrimaryButton from '../buttons/PrimaryButton';
+import { fontSizes, lineHeights } from '../../utils/fontStyles';
+import type { OnboardingIntroPanelProps } from '../types';
+
+function OnboardingIntroPanel({
+  onPressStart,
+  title,
+  subtitle,
+  button,
+  image,
+}: OnboardingIntroPanelProps) {
+  const { theme } = useTheme();
+  const styles = useMemo(() => createStyles(theme), [theme]);
+
+  const renderTitle = () => {
+    if (!title) {
+      return undefined;
+    }
+
+    if (typeof title === 'string') {
+      return (
+        <Text style={[styles.text, styles.line1, styles.titleText]}>
+          {title}
+        </Text>
+      );
+    }
+
+    return title;
+  };
+
+  const renderSubtitle = () => {
+    if (!subtitle) {
+      return undefined;
+    }
+
+    if (typeof subtitle === 'string') {
+      return (
+        <Text style={[styles.text, styles.line2, styles.subtitleText]}>
+          {subtitle}
+        </Text>
+      );
+    }
+
+    return subtitle;
+  };
+
+  const renderButton = () => {
+    if (typeof button === 'string') {
+      return <PrimaryButton text={button} onPress={onPressStart} />;
+    }
+
+    return button({ onPressStart });
+  };
+
+  return (
+    <View style={styles.container}>
+      {typeof image === 'function'
+        ? image()
+        : image && <Image source={image} style={styles.image} />}
+      <View style={styles.textContainer}>
+        {renderTitle()}
+        {renderSubtitle()}
+      </View>
+      {renderButton()}
+    </View>
+  );
+}
+
+export default OnboardingIntroPanel;
+
+const createStyles = (theme: Theme) =>
+  StyleSheet.create({
+    container: {
+      marginTop: 16,
+    },
+    image: {
+      alignSelf: 'center',
+    },
+    textContainer: {
+      alignItems: 'center',
+      marginBottom: 48,
+    },
+    text: {
+      fontSize: fontSizes.xxl,
+      lineHeight: lineHeights.xxl,
+      textAlign: 'center',
+    },
+    line1: {
+      marginTop: 20,
+      color: theme.text.primary,
+    },
+    line2: {
+      color: theme.bg.primary,
+    },
+    titleText: {
+      fontFamily: theme.fonts.introTitle,
+    },
+    subtitleText: {
+      fontFamily: theme.fonts.introSubtitle,
+    },
+  });

package/src/spill-onboarding/components/OnboardingModal.tsx

@@ -0,0 +1,75 @@
+import React, { useMemo } from 'react';
+import {
+  View,
+  StyleSheet,
+  Modal,
+  TouchableOpacity,
+  useWindowDimensions,
+} from 'react-native';
+import { useTheme } from '../../utils/ThemeContext';
+import type { Theme } from '../../utils/theme';
+
+interface OnboardingModalProps {
+  onSkip?: () => void;
+  children: React.ReactNode;
+}
+
+export default function OnboardingModal({
+  onSkip,
+  children,
+}: OnboardingModalProps) {
+  const { theme } = useTheme();
+  const { height, width } = useWindowDimensions();
+  const styles = useMemo(
+    () => createStyles(theme, height, width),
+    [height, width, theme]
+  );
+
+  return (
+    <Modal visible transparent onRequestClose={onSkip}>
+      <View style={styles.webOverlay}>
+        <TouchableOpacity
+          style={styles.webBackdrop}
+          activeOpacity={1}
+          onPress={onSkip}
+        />
+        <View style={styles.webModal}>{children}</View>
+      </View>
+    </Modal>
+  );
+}
+
+const createStyles = (theme: Theme, height: number, width: number) =>
+  StyleSheet.create({
+    webOverlay: {
+      flex: 1,
+      backgroundColor: 'rgba(0, 0, 0, 0.5)',
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    webBackdrop: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+    },
+    webModal: {
+      width: Math.min(width - 32, 500),
+      height: Math.min(height - 32, 800),
+      borderRadius: 28,
+      shadowColor: '#000',
+      shadowOffset: {
+        width: 0,
+        height: 10,
+      },
+      shadowOpacity: 0.25,
+      shadowRadius: 20,
+      overflow: 'hidden',
+      backgroundColor: theme.bg.secondary,
+    },
+    webContent: {
+      flex: 1,
+      paddingTop: 16,
+    },
+  });

package/src/spill-onboarding/components/OnboardingStepContainer.tsx

@@ -0,0 +1,85 @@
+import React, { useMemo, type ReactNode } from 'react';
+import { StyleSheet } from 'react-native';
+import Reanimated, {
+  FadeIn,
+  FadeInDown,
+  FadeOut,
+  FadeOutDown,
+} from 'react-native-reanimated';
+import SkipButton from '../buttons/SkipButton';
+import { useTheme } from '../../utils/ThemeContext';
+import type { Theme } from '../../utils/theme';
+import type { OnboardingStep } from '../types';
+
+interface OnboardingStepContainerProps {
+  currentStep: OnboardingStep | undefined;
+  showCloseButton?: boolean;
+  animationDuration: number;
+  onSkip?: () => void;
+  ref: React.RefObject<any>;
+  renderStepContent: () => React.ReactNode;
+  skipButton?: ({ onPress }: { onPress: () => void }) => ReactNode;
+}
+
+function OnboardingStepContainer({
+  currentStep,
+  showCloseButton,
+  animationDuration,
+  onSkip,
+  ref,
+  renderStepContent,
+  skipButton,
+}: OnboardingStepContainerProps) {
+  const { theme } = useTheme();
+  const styles = useMemo(() => createStyles(theme), [theme]);
+
+  if (!currentStep) {
+    return null;
+  }
+
+  return (
+    <>
+      {showCloseButton && onSkip && (
+        <Reanimated.View
+          entering={FadeIn.duration(animationDuration)}
+          exiting={FadeOut.duration(animationDuration)}
+          style={styles.close}
+        >
+          {skipButton ? (
+            skipButton({ onPress: onSkip })
+          ) : (
+            <SkipButton onPress={onSkip} />
+          )}
+        </Reanimated.View>
+      )}
+
+      <Reanimated.View
+        ref={ref}
+        entering={FadeInDown.duration(animationDuration)}
+        exiting={FadeOutDown.duration(animationDuration)}
+        style={styles.bottomPanel}
+      >
+        {renderStepContent()}
+      </Reanimated.View>
+    </>
+  );
+}
+
+export default OnboardingStepContainer;
+
+const createStyles = (theme: Theme) =>
+  StyleSheet.create({
+    bottomPanel: {
+      paddingHorizontal: 16,
+      paddingBottom: 16 + theme.insets.bottom,
+      position: 'absolute',
+      bottom: 0,
+      left: 0,
+      right: 0,
+    },
+    close: {
+      position: 'absolute',
+      top: theme.insets.top + 16,
+      right: 16,
+    },
+  });

package/src/spill-onboarding/components/OnboardingStepPanel.tsx

@@ -0,0 +1,118 @@
+import { useMemo } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { useTheme } from '../../utils/ThemeContext';
+import { type Theme } from '../../utils/theme';
+import { fontSizes, lineHeights } from '../../utils/fontStyles';
+import PrimaryButton from '../buttons/PrimaryButton';
+import SecondaryButton from '../buttons/SecondaryButton';
+import ArrowLeftIcon from '../icons/ArrowLeftIcon';
+import type { OnboardingStepPanelProps } from '../types';
+
+function OnboardingStepPanel({
+  label,
+  title,
+  description,
+  buttonLabel,
+  onBackPress,
+  onNextPress,
+  buttonPrimary,
+  showBackButton = true,
+}: OnboardingStepPanelProps) {
+  const { theme } = useTheme();
+  const styles = useMemo(() => createStyles(theme), [theme]);
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.textContainer}>
+        {label && (
+          <View style={styles.labelBadge}>
+            <Text style={styles.labelText}>{label}</Text>
+          </View>
+        )}
+        <Text style={styles.title}>{title}</Text>
+        <Text style={styles.description}>{description}</Text>
+      </View>
+      <View style={styles.buttonRow}>
+        {onBackPress && showBackButton && (
+          <View style={styles.backButton}>
+            <SecondaryButton
+              text=""
+              onPress={onBackPress}
+              icon={<ArrowLeftIcon color={theme.text.primary} />}
+            />
+          </View>
+        )}
+        <View style={styles.nextButton}>
+          {buttonPrimary ? (
+            <PrimaryButton text={buttonLabel} onPress={onNextPress} />
+          ) : (
+            <SecondaryButton
+              text={buttonLabel}
+              onPress={onNextPress}
+              textStyle={styles.nextButtonText}
+            />
+          )}
+        </View>
+      </View>
+    </View>
+  );
+}
+
+export default OnboardingStepPanel;
+
+const createStyles = (theme: Theme) =>
+  StyleSheet.create({
+    container: {
+      backgroundColor: theme.bg.secondary,
+      padding: 16,
+      borderRadius: 18,
+      gap: 24,
+    },
+    textContainer: {
+      alignItems: 'center',
+      gap: 16,
+    },
+    labelBadge: {
+      backgroundColor: theme.bg.label,
+      paddingHorizontal: 8,
+      paddingVertical: 4,
+      borderRadius: 999,
+    },
+    labelText: {
+      fontFamily: theme.fonts.stepLabel,
+      fontSize: fontSizes.xs,
+      lineHeight: lineHeights.xs,
+      textAlign: 'center',
+      color: theme.text.primary,
+    },
+    title: {
+      fontFamily: theme.fonts.stepTitle,
+      fontSize: fontSizes.lg,
+      lineHeight: lineHeights.lg,
+      textAlign: 'center',
+      color: theme.text.primary,
+    },
+    description: {
+      fontFamily: theme.fonts.stepDescription,
+      fontSize: fontSizes.md,
+      lineHeight: lineHeights.md,
+      textAlign: 'center',
+      color: theme.text.secondary,
+    },
+
+    buttonRow: {
+      flexDirection: 'row',
+      gap: 8,
+    },
+    backButton: {
+      width: 48,
+    },
+    nextButton: {
+      flex: 1,
+    },
+    nextButtonText: {
+      fontFamily: theme.fonts.stepButton,
+      fontSize: fontSizes.md,
+      lineHeight: lineHeights.md,
+    },
+  });

package/src/spill-onboarding/hooks/useMeasureHeight.ts

@@ -0,0 +1,21 @@
+import { useLayoutEffect, useRef, useState } from 'react';
+import type { View } from 'react-native';
+import type Reanimated from 'react-native-reanimated';
+
+export type ViewRef = React.ComponentRef<typeof Reanimated.View> &
+  React.ComponentRef<typeof View>;
+
+function useMeasureHeight() {
+  const ref = useRef<ViewRef>(null);
+  const [height, setHeight] = useState(0);
+
+  useLayoutEffect(() => {
+    ref.current?.measure?.((_, __, ___, viewHeight) => {
+      setHeight(viewHeight);
+    });
+  });
+
+  return { ref, height };
+}
+
+export default useMeasureHeight;

package/src/spill-onboarding/icons/ArrowLeftIcon.tsx

@@ -0,0 +1,69 @@
+import { Text, StyleSheet } from 'react-native';
+import { ExpoImage } from '../adapters/expo-image';
+import {
+  ReactNativeSVG,
+  ReactNativeSVGPath,
+} from '../adapters/react-native-svg';
+
+interface ArrowLeftIconProps {
+  size?: number;
+  color?: string;
+}
+
+const SVG_ARROW_LEFT_STRING =
+  'M10.7071 5.29289C11.0976 5.68342 11.0976 6.31658 10.7071 6.70711L6.41421 11L20 11C20.5523 11 21 11.4477 21 12C21 12.5523 20.5523 13 20 13L6.41421 13L10.7071 17.2929C11.0976 17.6834 11.0976 18.3166 10.7071 18.7071C10.3166 19.0976 9.68342 19.0976 9.29289 18.7071L3.29289 12.7071C3.10536 12.5196 3 12.2652 3 12C3 11.7348 3.10536 11.4804 3.29289 11.2929L9.29289 5.29289C9.68342 4.90237 10.3166 4.90237 10.7071 5.29289Z';
+
+export default function ArrowLeftIcon({
+  size = 24,
+  color = '#000',
+}: ArrowLeftIconProps) {
+  // Use expo-image with dynamic SVG string (includes color)
+  if (ExpoImage) {
+    const svgString = `<svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="${SVG_ARROW_LEFT_STRING}" fill="${color}"/>
+    </svg>`;
+
+    return (
+      <ExpoImage
+        source={{ uri: `data:image/svg+xml;base64,${btoa(svgString)}` }}
+        style={{ width: size, height: size }}
+        contentFit="contain"
+      />
+    );
+  }
+
+  // Use SVG if available
+  if (ReactNativeSVG && ReactNativeSVGPath) {
+    return (
+      <ReactNativeSVG
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+      >
+        <ReactNativeSVGPath d={SVG_ARROW_LEFT_STRING} fill={color} />
+      </ReactNativeSVG>
+    );
+  }
+
+  // Fallback to text arrow
+  return (
+    <Text
+      style={[
+        styles.arrow,
+        {
+          fontSize: size,
+          color,
+        },
+      ]}
+    >
+      Go Back
+    </Text>
+  );
+}
+
+const styles = StyleSheet.create({
+  arrow: {
+    textAlign: 'center',
+  },
+});

package/src/spill-onboarding/icons/CloseIcon.tsx

@@ -0,0 +1,55 @@
+import { View, StyleSheet } from 'react-native';
+
+interface CloseIconProps {
+  size?: number;
+  color?: string;
+}
+
+export default function CloseIcon({
+  size = 24,
+  color = '#000',
+}: CloseIconProps) {
+  const lineWidth = Math.max(2, size * 0.1);
+  const lineLength = size * 0.7;
+
+  return (
+    <View style={[styles.container, { width: size, height: size }]}>
+      {/* First diagonal line */}
+      <View
+        style={[
+          styles.line,
+          {
+            width: lineLength,
+            height: lineWidth,
+            backgroundColor: color,
+            transform: [{ rotate: '45deg' }],
+          },
+        ]}
+      />
+      {/* Second diagonal line */}
+      <View
+        style={[
+          styles.line,
+          // eslint-disable-next-line react-native/no-inline-styles
+          {
+            width: lineLength,
+            height: lineWidth,
+            backgroundColor: color,
+            transform: [{ rotate: '-45deg' }],
+            position: 'absolute',
+          },
+        ]}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  line: {
+    position: 'absolute',
+  },
+});