react-native-app-onboard 0.2.0 → 0.3.0

package/src/components/OnboardingPages.tsx

@@ -1,7 +1,8 @@
 import React, { useMemo } from 'react';
-import tinycolor from 'tinycolor2';
+import { getBrightness, lighten, darken } from '../utils/color';
 import {
   Animated,
+  View,
   StyleSheet,
   Dimensions,
   FlatList,
@@ -25,6 +26,7 @@ type Props = OnboardingProps & {
   onScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
   onScrollBeginDrag: () => void;
   nextPage: () => void;
+  scrollTo: (index: number, animated?: boolean) => void;
   mirror?: boolean;
 };
 
@@ -36,14 +38,30 @@ export const OnboardingPages = ({
   const pageWidth = props.width || width;
   const currentPage_ = props.pages[props.currentPage];
   const currentBackgroundColor = currentPage_?.backgroundColor ?? 'white';
-  const isLight = tinycolor(currentBackgroundColor).getBrightness() > 180;
+  const isLight = getBrightness(currentBackgroundColor) > 180;
   const footerBackgroundColor = isLight
-    ? tinycolor(currentBackgroundColor).darken(30).toString()
-    : tinycolor(currentBackgroundColor).lighten(30).toString();
+    ? darken(currentBackgroundColor, 30)
+    : lighten(currentBackgroundColor, 30);
   const color =
-    tinycolor(footerBackgroundColor).getBrightness() > 180
-      ? tinycolor(footerBackgroundColor).darken(60).toString()
-      : tinycolor(footerBackgroundColor).lighten(60).toString();
+    getBrightness(footerBackgroundColor) > 180
+      ? darken(footerBackgroundColor, 60)
+      : lighten(footerBackgroundColor, 60);
+
+  // Per-page label overrides fall back to the top-level labels.
+  const nextLabel = currentPage_?.nextLabel ?? props.nextLabel;
+  const skipLabel = currentPage_?.skipLabel ?? props.skipLabel;
+  const doneLabel = currentPage_?.doneLabel ?? props.doneLabel;
+
+  // Per-page navigation gating (default allowed).
+  const canGoForward = currentPage_?.canSwipeForward !== false;
+  const canGoBackward = currentPage_?.canSwipeBackward !== false;
+  // Disable the gesture entirely when the current page gates either direction
+  // (FlatList can't block a single direction), so there's no swipe-then-snap
+  // bounce. The Next/Back buttons still navigate programmatically. Also honors
+  // a consumer-level `scrollEnabled={false}`.
+  const swipeEnabled =
+    props.scrollEnabled !== false && canGoForward && canGoBackward;
+  const hasCustomBackground = props.pages.some((p) => p.background != null);
 
   const interpolatedBackgroundColor = useMemo(() => {
     const pages = props.pages;
@@ -72,11 +90,13 @@ export const OnboardingPages = ({
     animatedValue: props.dotsAnimatedValue,
     showSkip: props.showSkip,
     numberOfScreens: props.pages.length,
-    skipLabel: props.skipLabel,
-    nextLabel: props.nextLabel,
+    skipLabel,
+    nextLabel,
     previousLabel: props.previousLabel,
     hasSkipPosition: !!props.skipButtonPosition,
-    doneLabel: props.doneLabel,
+    doneLabel,
+    nextDisabled: !canGoForward,
+    previousDisabled: !canGoBackward,
     paginationStyle: props.paginationStyle,
     progressBarStyle: props.progressBarStyle,
     progressBarFillStyle: props.progressBarFillStyle,
@@ -103,12 +123,39 @@ export const OnboardingPages = ({
         { backgroundColor: interpolatedBackgroundColor },
       ]}
     >
+      {hasCustomBackground && (
+        <View style={StyleSheet.absoluteFill} pointerEvents="none">
+          {props.pages.map((page, index) =>
+            page.background == null ? null : (
+              <Animated.View
+                key={index}
+                style={[
+                  StyleSheet.absoluteFill,
+                  {
+                    opacity: props.scrollX.interpolate({
+                      inputRange: [
+                        (index - 1) * pageWidth,
+                        index * pageWidth,
+                        (index + 1) * pageWidth,
+                      ],
+                      outputRange: [0, 1, 0],
+                      extrapolate: 'clamp',
+                    }),
+                  },
+                ]}
+              >
+                {page.background}
+              </Animated.View>
+            )
+          )}
+        </View>
+      )}
       {props.skipButtonPosition && props.showSkip && (
         <SkipButton
           buttonTextStyle={props.skipLabelStyle}
           buttonStyle={props.skipButtonContainerStyle}
           position={props.skipButtonPosition}
-          label={props.skipLabel}
+          label={skipLabel}
           onPress={props.onSkip}
         />
       )}
@@ -128,7 +175,7 @@ export const OnboardingPages = ({
         horizontal
         pagingEnabled
         showsHorizontalScrollIndicator={false}
-        scrollEnabled={props.scrollEnabled}
+        scrollEnabled={swipeEnabled}
         style={props.mirror ? styles.mirror : undefined}
         keyExtractor={(_, index) => index.toString()}
         renderItem={({ item, index }) => (
@@ -148,6 +195,15 @@ export const OnboardingPages = ({
           const pageIndex = Math.round(
             event.nativeEvent.contentOffset.x / pageWidth
           );
+          const current = props.currentPage;
+          // Honor per-page swipe gating by snapping back to the current page.
+          if (
+            (pageIndex > current && !canGoForward) ||
+            (pageIndex < current && !canGoBackward)
+          ) {
+            props.scrollTo(current);
+            return;
+          }
           props.setPage(pageIndex || 0);
         }}
       />

package/src/components/Page.tsx

@@ -14,6 +14,12 @@ export type Page = {
   subtitle: string;
   image: React.ReactNode;
   backgroundColor: string;
+  /**
+   * Optional custom background element (e.g. a `LinearGradient`) rendered behind
+   * the page content and cross-faded as the user swipes. Falls back to
+   * `backgroundColor` when omitted.
+   */
+  background?: React.ReactNode;
   color?: string;
   width?: number;
   containerStyle?: StyleProp<ViewStyle>;
@@ -22,6 +28,16 @@ export type Page = {
   titleStyle?: StyleProp<TextStyle>;
   subtitleStyle?: StyleProp<TextStyle>;
   swap?: boolean;
+  /** Per-page override for the "Next" button label. */
+  nextLabel?: string | React.ReactNode;
+  /** Per-page override for the "Skip" button label. */
+  skipLabel?: string | React.ReactNode;
+  /** Per-page override for the "Done" button label. */
+  doneLabel?: string | React.ReactNode;
+  /** When `false`, blocks advancing past this page (swipe snaps back, Next disabled). */
+  canSwipeForward?: boolean;
+  /** When `false`, blocks returning from this page (swipe snaps back). */
+  canSwipeBackward?: boolean;
   /** Internal: counter-flips page content when the slider is mirrored for RTL. */
   mirror?: boolean;
 };

package/src/components/Pagination.tsx

@@ -8,7 +8,7 @@ import {
   type TextStyle,
 } from 'react-native';
 import React from 'react';
-import tinycolor from 'tinycolor2';
+import { setAlpha } from '../utils/color';
 import { useOnboarding } from '../hooks/useOnboarding';
 import { Button } from './button';
 
@@ -45,6 +45,8 @@ type FooterProps = {
   progressBarFillStyle?: StyleProp<ViewStyle>;
   dotsAreTappable?: boolean;
   mirror?: boolean;
+  nextDisabled?: boolean;
+  previousDisabled?: boolean;
   onDone?: () => void;
   onSkip?: () => void;
   onNext?: () => void;
@@ -77,6 +79,7 @@ export function Pagination(props: FooterProps) {
         {showPrevious && (
           <Button
             onPress={() => previousPage()}
+            disabled={props.previousDisabled}
             buttonTextStyle={props.previousLabelStyle}
             buttonStyle={props.previousButtonContainerStyle}
             label={props.previousLabel || 'Back'}
@@ -101,11 +104,7 @@ export function Pagination(props: FooterProps) {
             styles.progressTrack,
             // Derive a faint track from the (background-aware) fill color so it
             // stays visible on both light and dark pages.
-            {
-              backgroundColor: tinycolor(props.color)
-                .setAlpha(0.25)
-                .toRgbString(),
-            },
+            { backgroundColor: setAlpha(props.color, 0.25) },
             // Mirror the fill direction so it grows from the trailing edge.
             props.mirror && styles.mirror,
             props.progressBarStyle,
@@ -181,6 +180,7 @@ export function Pagination(props: FooterProps) {
         {!isDone && props.showNext && (
           <Button
             onPress={props.onNext}
+            disabled={props.nextDisabled}
             label={props.nextLabel || 'Next'}
             buttonTextStyle={props.nextLabelStyle}
             buttonStyle={props.nextButtonContainerStyle}

package/src/components/Swiper.tsx

@@ -34,10 +34,22 @@ export const Swiper: React.FC<OnboardingProps> = (props) => {
     currentPage,
     numberOfScreens,
     nextPage,
+    scrollTo,
     scrollEnabled,
     pauseAutoPlay,
   } = useOnboarding();
 
+  // When `skipToPage` is set, "Skip" navigates within the flow instead of
+  // exiting it (so `onSkip` is not called in that case).
+  const { skipToPage, onSkip } = props;
+  const handleSkip = React.useCallback(() => {
+    if (skipToPage != null) {
+      scrollTo(skipToPage);
+    } else {
+      onSkip?.();
+    }
+  }, [skipToPage, scrollTo, onSkip]);
+
   const onScroll = React.useMemo(
     () =>
       nativeDriverEnabled
@@ -71,8 +83,10 @@ export const Swiper: React.FC<OnboardingProps> = (props) => {
     currentPage,
     numberOfScreens,
     nextPage,
+    scrollTo,
     scrollEnabled,
     mirror,
+    onSkip: handleSkip,
   };
 
   if (props.children) {

package/src/components/button.tsx

@@ -12,6 +12,7 @@ type ButtonProps = {
   onPress?: () => void;
   label?: string | React.ReactNode;
   color?: string;
+  disabled?: boolean;
   buttonStyle?: StyleProp<ViewStyle>;
   buttonTextStyle?: StyleProp<TextStyle>;
 };
@@ -19,10 +20,12 @@ type ButtonProps = {
 export const Button = (props: ButtonProps) => {
   return typeof props.label === 'string' ? (
     <TouchableOpacity
-      onPress={props.onPress}
-      style={props.buttonStyle}
+      onPress={props.disabled ? undefined : props.onPress}
+      disabled={props.disabled}
+      style={[props.buttonStyle, props.disabled && styles.disabled]}
       accessibilityRole="button"
       accessibilityLabel={props.label}
+      accessibilityState={{ disabled: !!props.disabled }}
     >
       <Text
         style={[
@@ -102,4 +105,7 @@ const styles = StyleSheet.create({
     position: 'absolute',
     zIndex: 10,
   },
+  disabled: {
+    opacity: 0.4,
+  },
 });

package/src/types/index.ts

@@ -14,6 +14,11 @@ export type OnboardingProps = {
   onDone?: () => void;
   onSkip?: () => void;
   onPageChange?: (index: number) => void;
+  /**
+   * When set, pressing "Skip" navigates to this page index instead of firing
+   * `onSkip` (e.g. skip intro slides but land on a sign-up slide in the flow).
+   */
+  skipToPage?: number;
   showPagination?: boolean;
   scrollEnabled?: boolean;
   autoPlay?: boolean;

package/src/utils/color.ts

@@ -0,0 +1,284 @@
+/**
+ * Minimal color helpers — a tiny, dependency-free replacement for the subset of
+ * tinycolor2 this library used: perceived brightness, HSL-based lighten/darken,
+ * and producing an `rgba()` string with a custom alpha.
+ *
+ * Accepts hex (`#rgb`, `#rgba`, `#rrggbb`, `#rrggbbaa`), `rgb()`/`rgba()`, and
+ * CSS named colors. Invalid input resolves to black, matching tinycolor's
+ * behavior of treating unparseable colors as having zero brightness.
+ */
+
+type RGBA = { r: number; g: number; b: number; a: number };
+
+// CSS extended color keywords (same set tinycolor recognizes).
+const NAMED_COLORS: Record<string, string> = {
+  aliceblue: '#f0f8ff',
+  antiquewhite: '#faebd7',
+  aqua: '#00ffff',
+  aquamarine: '#7fffd4',
+  azure: '#f0ffff',
+  beige: '#f5f5dc',
+  bisque: '#ffe4c4',
+  black: '#000000',
+  blanchedalmond: '#ffebcd',
+  blue: '#0000ff',
+  blueviolet: '#8a2be2',
+  brown: '#a52a2a',
+  burlywood: '#deb887',
+  cadetblue: '#5f9ea0',
+  chartreuse: '#7fff00',
+  chocolate: '#d2691e',
+  coral: '#ff7f50',
+  cornflowerblue: '#6495ed',
+  cornsilk: '#fff8dc',
+  crimson: '#dc143c',
+  cyan: '#00ffff',
+  darkblue: '#00008b',
+  darkcyan: '#008b8b',
+  darkgoldenrod: '#b8860b',
+  darkgray: '#a9a9a9',
+  darkgreen: '#006400',
+  darkgrey: '#a9a9a9',
+  darkkhaki: '#bdb76b',
+  darkmagenta: '#8b008b',
+  darkolivegreen: '#556b2f',
+  darkorange: '#ff8c00',
+  darkorchid: '#9932cc',
+  darkred: '#8b0000',
+  darksalmon: '#e9967a',
+  darkseagreen: '#8fbc8f',
+  darkslateblue: '#483d8b',
+  darkslategray: '#2f4f4f',
+  darkslategrey: '#2f4f4f',
+  darkturquoise: '#00ced1',
+  darkviolet: '#9400d3',
+  deeppink: '#ff1493',
+  deepskyblue: '#00bfff',
+  dimgray: '#696969',
+  dimgrey: '#696969',
+  dodgerblue: '#1e90ff',
+  firebrick: '#b22222',
+  floralwhite: '#fffaf0',
+  forestgreen: '#228b22',
+  fuchsia: '#ff00ff',
+  gainsboro: '#dcdcdc',
+  ghostwhite: '#f8f8ff',
+  gold: '#ffd700',
+  goldenrod: '#daa520',
+  gray: '#808080',
+  green: '#008000',
+  greenyellow: '#adff2f',
+  grey: '#808080',
+  honeydew: '#f0fff0',
+  hotpink: '#ff69b4',
+  indianred: '#cd5c5c',
+  indigo: '#4b0082',
+  ivory: '#fffff0',
+  khaki: '#f0e68c',
+  lavender: '#e6e6fa',
+  lavenderblush: '#fff0f5',
+  lawngreen: '#7cfc00',
+  lemonchiffon: '#fffacd',
+  lightblue: '#add8e6',
+  lightcoral: '#f08080',
+  lightcyan: '#e0ffff',
+  lightgoldenrodyellow: '#fafad2',
+  lightgray: '#d3d3d3',
+  lightgreen: '#90ee90',
+  lightgrey: '#d3d3d3',
+  lightpink: '#ffb6c1',
+  lightsalmon: '#ffa07a',
+  lightseagreen: '#20b2aa',
+  lightskyblue: '#87cefa',
+  lightslategray: '#778899',
+  lightslategrey: '#778899',
+  lightsteelblue: '#b0c4de',
+  lightyellow: '#ffffe0',
+  lime: '#00ff00',
+  limegreen: '#32cd32',
+  linen: '#faf0e6',
+  magenta: '#ff00ff',
+  maroon: '#800000',
+  mediumaquamarine: '#66cdaa',
+  mediumblue: '#0000cd',
+  mediumorchid: '#ba55d3',
+  mediumpurple: '#9370db',
+  mediumseagreen: '#3cb371',
+  mediumslateblue: '#7b68ee',
+  mediumspringgreen: '#00fa9a',
+  mediumturquoise: '#48d1cc',
+  mediumvioletred: '#c71585',
+  midnightblue: '#191970',
+  mintcream: '#f5fffa',
+  mistyrose: '#ffe4e1',
+  moccasin: '#ffe4b5',
+  navajowhite: '#ffdead',
+  navy: '#000080',
+  oldlace: '#fdf5e6',
+  olive: '#808000',
+  olivedrab: '#6b8e23',
+  orange: '#ffa500',
+  orangered: '#ff4500',
+  orchid: '#da70d6',
+  palegoldenrod: '#eee8aa',
+  palegreen: '#98fb98',
+  paleturquoise: '#afeeee',
+  palevioletred: '#db7093',
+  papayawhip: '#ffefd5',
+  peachpuff: '#ffdab9',
+  peru: '#cd853f',
+  pink: '#ffc0cb',
+  plum: '#dda0dd',
+  powderblue: '#b0e0e6',
+  purple: '#800080',
+  rebeccapurple: '#663399',
+  red: '#ff0000',
+  rosybrown: '#bc8f8f',
+  royalblue: '#4169e1',
+  saddlebrown: '#8b4513',
+  salmon: '#fa8072',
+  sandybrown: '#f4a460',
+  seagreen: '#2e8b57',
+  seashell: '#fff5ee',
+  sienna: '#a0522d',
+  silver: '#c0c0c0',
+  skyblue: '#87ceeb',
+  slateblue: '#6a5acd',
+  slategray: '#708090',
+  slategrey: '#708090',
+  snow: '#fffafa',
+  springgreen: '#00ff7f',
+  steelblue: '#4682b4',
+  tan: '#d2b48c',
+  teal: '#008080',
+  thistle: '#d8bfd8',
+  tomato: '#ff6347',
+  turquoise: '#40e0d0',
+  violet: '#ee82ee',
+  wheat: '#f5deb3',
+  white: '#ffffff',
+  whitesmoke: '#f5f5f5',
+  yellow: '#ffff00',
+  yellowgreen: '#9acd32',
+};
+
+const clamp = (value: number, min: number, max: number) =>
+  Math.min(max, Math.max(min, value));
+
+function parse(input: string): RGBA {
+  let color = (input || '').trim().toLowerCase();
+  const named = NAMED_COLORS[color];
+  if (named) color = named;
+
+  if (color[0] === '#') {
+    let hex = color.slice(1);
+    if (hex.length === 3 || hex.length === 4) {
+      hex = hex
+        .split('')
+        .map((c) => c + c)
+        .join('');
+    }
+    const r = parseInt(hex.slice(0, 2), 16);
+    const g = parseInt(hex.slice(2, 4), 16);
+    const b = parseInt(hex.slice(4, 6), 16);
+    const a = hex.length === 8 ? parseInt(hex.slice(6, 8), 16) / 255 : 1;
+    if (![r, g, b].some(Number.isNaN)) return { r, g, b, a };
+  }
+
+  const rgb = color.match(
+    /^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*(?:,\s*([\d.]+)\s*)?\)$/
+  );
+  if (rgb) {
+    return {
+      r: Number(rgb[1]),
+      g: Number(rgb[2]),
+      b: Number(rgb[3]),
+      a: rgb[4] !== undefined ? Number(rgb[4]) : 1,
+    };
+  }
+
+  return { r: 0, g: 0, b: 0, a: 1 };
+}
+
+function rgbToHsl({ r, g, b }: RGBA) {
+  const rn = r / 255;
+  const gn = g / 255;
+  const bn = b / 255;
+  const max = Math.max(rn, gn, bn);
+  const min = Math.min(rn, gn, bn);
+  const l = (max + min) / 2;
+  let h = 0;
+  let s = 0;
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case rn:
+        h = (gn - bn) / d + (gn < bn ? 6 : 0);
+        break;
+      case gn:
+        h = (bn - rn) / d + 2;
+        break;
+      default:
+        h = (rn - gn) / d + 4;
+    }
+    h /= 6;
+  }
+  return { h, s, l };
+}
+
+function hslToRgb(h: number, s: number, l: number) {
+  if (s === 0) {
+    const v = l * 255;
+    return { r: v, g: v, b: v };
+  }
+  const hue2rgb = (p: number, q: number, t: number) => {
+    let tt = t;
+    if (tt < 0) tt += 1;
+    if (tt > 1) tt -= 1;
+    if (tt < 1 / 6) return p + (q - p) * 6 * tt;
+    if (tt < 1 / 2) return q;
+    if (tt < 2 / 3) return p + (q - p) * (2 / 3 - tt) * 6;
+    return p;
+  };
+  const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+  const p = 2 * l - q;
+  return {
+    r: hue2rgb(p, q, h + 1 / 3) * 255,
+    g: hue2rgb(p, q, h) * 255,
+    b: hue2rgb(p, q, h - 1 / 3) * 255,
+  };
+}
+
+const toHex = (n: number) =>
+  Math.round(clamp(n, 0, 255))
+    .toString(16)
+    .padStart(2, '0');
+
+/** Perceived brightness on a 0–255 scale (W3C formula, as tinycolor uses). */
+export function getBrightness(input: string): number {
+  const { r, g, b } = parse(input);
+  return (r * 299 + g * 587 + b * 114) / 1000;
+}
+
+function adjustLightness(input: string, delta: number): string {
+  const hsl = rgbToHsl(parse(input));
+  const { r, g, b } = hslToRgb(hsl.h, hsl.s, clamp(hsl.l + delta, 0, 1));
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+
+/** Lighten by `amount` percent (HSL lightness), returning a hex string. */
+export function lighten(input: string, amount = 10): string {
+  return adjustLightness(input, amount / 100);
+}
+
+/** Darken by `amount` percent (HSL lightness), returning a hex string. */
+export function darken(input: string, amount = 10): string {
+  return adjustLightness(input, -amount / 100);
+}
+
+/** Return an `rgba()` string for `input` with the given alpha. */
+export function setAlpha(input: string, alpha: number): string {
+  const { r, g, b } = parse(input);
+  return `rgba(${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)}, ${alpha})`;
+}