react-native-app-onboard 0.1.9 → 0.2.1

package/src/types/index.ts

@@ -6,13 +6,19 @@ export type OnboardingProps = {
   nextLabel?: string | React.ReactNode;
   skipLabel?: string | React.ReactNode;
   doneLabel?: string | React.ReactNode;
+  previousLabel?: string | React.ReactNode;
   showSkip?: boolean;
   showNext?: boolean;
   showDone?: boolean;
+  showPrevious?: boolean;
   onDone?: () => void;
   onSkip?: () => void;
+  onPageChange?: (index: number) => void;
   showPagination?: boolean;
   scrollEnabled?: boolean;
+  autoPlay?: boolean;
+  autoPlayInterval?: number;
+  loop?: boolean;
   customFooter?: (props: { nextPage: () => void }) => React.ReactNode;
   paginationContainerStyle?: StyleProp<ViewStyle>;
   buttonRightContainerStyle?: StyleProp<ViewStyle>;
@@ -20,9 +26,11 @@ export type OnboardingProps = {
   dotsContainerStyle?: StyleProp<ViewStyle>;
   doneLabelStyle?: StyleProp<TextStyle>;
   skipLabelStyle?: StyleProp<TextStyle>;
+  previousLabelStyle?: StyleProp<TextStyle>;
   skipButtonContainerStyle?: StyleProp<ViewStyle>;
   nextButtonContainerStyle?: StyleProp<ViewStyle>;
   doneButtonContainerStyle?: StyleProp<ViewStyle>;
+  previousButtonContainerStyle?: StyleProp<ViewStyle>;
   skipButtonPosition?: 'top-left' | 'top-right';
   nextLabelStyle?: StyleProp<TextStyle>;
   containerStyle?: StyleProp<ViewStyle>;
@@ -31,8 +39,13 @@ export type OnboardingProps = {
   titleStyle?: StyleProp<TextStyle>;
   subtitleStyle?: StyleProp<TextStyle>;
   paginationPosition?: 'top' | 'bottom';
+  paginationStyle?: 'dots' | 'progress';
+  progressBarStyle?: StyleProp<ViewStyle>;
+  progressBarFillStyle?: StyleProp<ViewStyle>;
+  dotsAreTappable?: boolean;
   scrollAnimationDuration?: number;
   useNativeDriver?: boolean;
+  rtl?: boolean;
   width?: number;
   color?: string;
   pages?: Page[];

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})`;
+}

package/src/utils/persistence.ts

@@ -0,0 +1,58 @@
+/**
+ * Minimal AsyncStorage-compatible interface. Any storage that implements these
+ * three methods works (e.g. @react-native-async-storage/async-storage,
+ * expo-secure-store wrappers, or an in-memory mock in tests). Keeping the
+ * dependency injected means this library does not have to ship a storage peer
+ * dependency of its own.
+ */
+export type OnboardingStorageAdapter = {
+  getItem: (key: string) => Promise<string | null>;
+  setItem: (key: string, value: string) => Promise<void>;
+  removeItem: (key: string) => Promise<void>;
+};
+
+const DEFAULT_KEY = '@react-native-app-onboard/completed';
+const COMPLETED_VALUE = 'true';
+
+/**
+ * Returns whether the user has previously completed onboarding stored under
+ * `key`. Defaults to a namespaced key so callers usually only pass the storage.
+ */
+export async function hasCompletedOnboarding(
+  storage: OnboardingStorageAdapter,
+  key: string = DEFAULT_KEY
+): Promise<boolean> {
+  const value = await storage.getItem(key);
+  return value === COMPLETED_VALUE;
+}
+
+/** Marks onboarding as completed so it can be skipped on subsequent launches. */
+export async function markOnboardingComplete(
+  storage: OnboardingStorageAdapter,
+  key: string = DEFAULT_KEY
+): Promise<void> {
+  await storage.setItem(key, COMPLETED_VALUE);
+}
+
+/** Clears the stored completion flag (useful for "replay onboarding" actions). */
+export async function resetOnboarding(
+  storage: OnboardingStorageAdapter,
+  key: string = DEFAULT_KEY
+): Promise<void> {
+  await storage.removeItem(key);
+}
+
+/**
+ * Convenience factory that binds a storage adapter (and optional key) once and
+ * returns ready-to-call helpers, so app code doesn't repeat the storage arg.
+ */
+export function createOnboardingStorage(
+  storage: OnboardingStorageAdapter,
+  key: string = DEFAULT_KEY
+) {
+  return {
+    hasCompleted: () => hasCompletedOnboarding(storage, key),
+    markComplete: () => markOnboardingComplete(storage, key),
+    reset: () => resetOnboarding(storage, key),
+  };
+}