react-native-toast-message-library 0.0.0-stage → 0.1.0

package/src/components/ToastContainer.js

@@ -0,0 +1,109 @@
+import React, { useEffect, useMemo, useRef, useSyncExternalStore } from 'react';
+import { StyleSheet, View, useWindowDimensions } from 'react-native';
+import useReducedMotion from '../hooks/useReducedMotion';
+import { POSITIONS } from '../utils/constants';
+import createAnnouncer from '../utils/createAnnouncer';
+import useToastInsets from '../utils/safeArea';
+import ToastItem from './ToastItem';
+
+const SIDE_MARGIN = 16;
+const MAX_WIDTH = 480;
+
+function groupStyle(position, insets, offset) {
+  const horizontal = {
+    paddingLeft: SIDE_MARGIN + insets.left + offset.x,
+    paddingRight: SIDE_MARGIN + insets.right + offset.x,
+  };
+  const alignItems = position.endsWith('left')
+    ? 'flex-start'
+    : position.endsWith('right')
+    ? 'flex-end'
+    : 'center';
+  const base = {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    alignItems,
+    ...horizontal,
+  };
+  if (position.startsWith('top')) {
+    return { ...base, top: insets.top + offset.y };
+  }
+  if (position.startsWith('bottom')) {
+    return { ...base, bottom: insets.bottom + offset.y };
+  }
+  return { ...base, top: 0, bottom: 0, justifyContent: 'center' };
+}
+
+export default function ToastContainer({
+  manager,
+  theme,
+  spacing,
+  offset,
+  insets: insetsProp,
+}) {
+  const snapshot = useSyncExternalStore(
+    manager.subscribe,
+    manager.getSnapshot,
+    manager.getSnapshot,
+  );
+  const reducedMotion = useReducedMotion();
+  const insets = useToastInsets(insetsProp);
+  const { width: windowWidth } = useWindowDimensions();
+  const announcer = useRef(null);
+  if (!announcer.current) {
+    announcer.current = createAnnouncer();
+  }
+  useEffect(() => () => announcer.current.cancel(), []);
+
+  const toastWidth = Math.min(
+    MAX_WIDTH,
+    windowWidth - 2 * SIDE_MARGIN - insets.left - insets.right - 2 * offset.x,
+  );
+
+  const groups = useMemo(() => {
+    const map = {};
+    snapshot.toasts.forEach(entry => {
+      const key = entry.options.position;
+      (map[key] = map[key] || []).push(entry);
+    });
+    return map;
+  }, [snapshot]);
+
+  return (
+    <View pointerEvents="box-none" style={styles.overlay}>
+      {POSITIONS.filter(position => groups[position]).map(position => (
+        <View
+          key={position}
+          pointerEvents="box-none"
+          style={groupStyle(position, insets, offset)}
+        >
+          {groups[position].map((entry, index) => (
+            <View
+              key={entry.id}
+              pointerEvents="box-none"
+              style={index === 0 ? null : { marginTop: spacing }}
+            >
+              <ToastItem
+                entry={entry}
+                manager={manager}
+                theme={theme}
+                reducedMotion={reducedMotion}
+                announce={announcer.current.announce}
+                width={toastWidth}
+              />
+            </View>
+          ))}
+        </View>
+      ))}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  overlay: {
+    ...StyleSheet.absoluteFillObject,
+    zIndex: 9999,
+    elevation: 9999,
+  },
+});

package/src/components/ToastIcon.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+const GLYPHS = {
+  success: '✓',
+  error: '✕',
+  warning: '!',
+  info: 'i',
+};
+
+/**
+ * Renders the leading icon. `icon` may be:
+ *  - false             -> nothing
+ *  - a React element   -> rendered as is
+ *  - a function        -> called with { type, color, size }
+ *  - undefined         -> built-in glyph for the type (none for "custom")
+ * The glyph is decorative; the toast's accessibility label carries the type.
+ */
+export default function ToastIcon({ type, icon, color, glyphColor, size }) {
+  if (icon === false) {
+    return null;
+  }
+  if (typeof icon === 'function') {
+    return <View style={styles.wrapper}>{icon({ type, color, size })}</View>;
+  }
+  if (React.isValidElement(icon)) {
+    return <View style={styles.wrapper}>{icon}</View>;
+  }
+  const glyph = GLYPHS[type];
+  if (!glyph) {
+    return null;
+  }
+  return (
+    <View
+      accessible={false}
+      importantForAccessibility="no-hide-descendants"
+      style={[
+        styles.badge,
+        {
+          width: size,
+          height: size,
+          borderRadius: size / 2,
+          backgroundColor: color,
+        },
+      ]}
+    >
+      <Text
+        allowFontScaling={false}
+        style={[styles.glyph, { color: glyphColor, fontSize: size * 0.62 }]}
+      >
+        {glyph}
+      </Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrapper: { marginRight: 12, justifyContent: 'center' },
+  badge: {
+    marginRight: 12,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  glyph: { fontWeight: '800', textAlign: 'center', includeFontPadding: false },
+});

package/src/components/ToastItem.js

@@ -0,0 +1,357 @@
+import React, { useEffect, useMemo, useRef } from 'react';
+import {
+  Animated,
+  PanResponder,
+  Platform,
+  Pressable,
+  StyleSheet,
+  Text,
+  Vibration,
+  View,
+  useWindowDimensions,
+} from 'react-native';
+import {
+  getAnimatedStyle,
+  resolveAnimation,
+  runToastAnimation,
+} from '../animations/toastAnimations';
+import { TYPE_LABELS } from '../utils/constants';
+import ToastAction from './ToastAction';
+import ToastIcon from './ToastIcon';
+import ToastProgress from './ToastProgress';
+
+const SWIPE_THRESHOLD = 80;
+
+function buildShadow(theme, shadow) {
+  if (shadow === false) {
+    return { elevation: 0 };
+  }
+  const s = { ...theme.shadow, ...(shadow || {}) };
+  return {
+    shadowColor: s.color,
+    shadowOpacity: s.opacity,
+    shadowRadius: s.radius,
+    shadowOffset: { width: 0, height: s.offsetY },
+    elevation: s.elevation,
+  };
+}
+
+function vibrate(type) {
+  try {
+    Vibration.vibrate(type === 'error' ? [0, 30, 60, 30] : 20);
+  } catch (error) {
+    // Missing VIBRATE permission on Android must never break the toast.
+  }
+}
+
+function ToastItem({ entry, manager, theme, reducedMotion, announce, width }) {
+  const { options, status, paused, remaining } = entry;
+  const { id, type, position } = options;
+  const { width: windowWidth } = useWindowDimensions();
+
+  const animation = resolveAnimation(options.animation, reducedMotion);
+  const animationRef = useRef({
+    animation,
+    duration: options.animationDuration,
+  });
+  animationRef.current = { animation, duration: options.animationDuration };
+
+  const initial = animation === 'none' ? 1 : 0;
+  const progress = useRef(new Animated.Value(initial)).current;
+  const swipeX = useRef(new Animated.Value(0)).current;
+
+  const palette = theme.colors[type] || theme.colors.custom;
+  const colors = {
+    background: options.backgroundColor || palette.background,
+    text: options.textColor || palette.text,
+    border: options.borderColor || palette.border,
+    icon: options.iconColor || palette.icon,
+  };
+  const typography = theme.typography;
+  const fontFamily = typography.fontFamily;
+
+  const title = options.title === undefined ? TYPE_LABELS[type] : options.title;
+  const showTitle = title !== null && title !== '' && title !== undefined;
+  const label =
+    options.accessibilityLabel ||
+    [
+      TYPE_LABELS[type],
+      showTitle && title !== TYPE_LABELS[type] ? title : '',
+      options.message,
+    ]
+      .filter(Boolean)
+      .join('. ');
+
+  // Latest values for the long-lived PanResponder and callbacks.
+  const live = useRef({});
+  live.current = { options, status, windowWidth };
+
+  // Enter / exit lifecycle.
+  useEffect(() => {
+    let handle = null;
+    if (status === 'visible') {
+      handle = runToastAnimation(progress, 1, animationRef.current);
+    } else {
+      handle = runToastAnimation(progress, 0, animationRef.current, result => {
+        if (result.finished) {
+          manager.remove(id);
+        }
+      });
+    }
+    return () => {
+      if (handle) {
+        handle.stop();
+      }
+    };
+  }, [status, id, manager, progress]);
+
+  // Mount-only side effects: haptics and iOS announcement.
+  useEffect(() => {
+    if (options.haptics) {
+      vibrate(type);
+    }
+    if (Platform.OS === 'ios' && label) {
+      announce(label);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const info = { id, type, hide: () => manager.hide(id) };
+  const actionFired = useRef(false);
+  useEffect(() => {
+    actionFired.current = false;
+  }, [status]);
+
+  const handlePress = () => {
+    if (live.current.status !== 'visible') {
+      return;
+    }
+    if (live.current.options.onPress) {
+      live.current.options.onPress(info);
+    }
+    if (live.current.options.dismissOnPress) {
+      manager.hide(id, 'press');
+    }
+  };
+
+  const handleAction = () => {
+    const current = live.current;
+    if (current.status !== 'visible' || actionFired.current) {
+      return;
+    }
+    if (current.options.dismissOnAction) {
+      actionFired.current = true;
+    }
+    if (current.options.onAction) {
+      current.options.onAction(info);
+    }
+    if (current.options.dismissOnAction) {
+      manager.hide(id, 'action');
+    }
+  };
+
+  const panResponder = useMemo(
+    () =>
+      PanResponder.create({
+        onMoveShouldSetPanResponder: (_, g) =>
+          live.current.options.swipeToDismiss &&
+          live.current.status === 'visible' &&
+          Math.abs(g.dx) > 8 &&
+          Math.abs(g.dx) > Math.abs(g.dy) * 1.5,
+        onPanResponderGrant: () => manager.pause(id),
+        onPanResponderMove: (_, g) => swipeX.setValue(g.dx),
+        onPanResponderTerminationRequest: () => true,
+        onPanResponderRelease: (_, g) => {
+          if (Math.abs(g.dx) > SWIPE_THRESHOLD || Math.abs(g.vx) > 0.9) {
+            const direction = g.dx >= 0 ? 1 : -1;
+            manager.hide(id, 'swipe');
+            Animated.timing(swipeX, {
+              toValue: direction * live.current.windowWidth,
+              duration: 180,
+              useNativeDriver: true,
+            }).start();
+          } else {
+            Animated.spring(swipeX, {
+              toValue: 0,
+              useNativeDriver: true,
+            }).start();
+            manager.resume(id);
+          }
+        },
+        onPanResponderTerminate: () => {
+          Animated.spring(swipeX, {
+            toValue: 0,
+            useNativeDriver: true,
+          }).start();
+          manager.resume(id);
+        },
+      }),
+    [id, manager, swipeX],
+  );
+
+  const innerRadius = Math.max(
+    0,
+    (options.borderRadius != null ? options.borderRadius : theme.borderRadius) -
+      theme.borderWidth,
+  );
+  const padding = options.padding != null ? options.padding : theme.padding;
+
+  const outerStyle = [
+    styles.container,
+    {
+      width,
+      backgroundColor: colors.background,
+      borderColor: colors.border,
+      borderWidth: theme.borderWidth,
+      borderRadius:
+        options.borderRadius != null
+          ? options.borderRadius
+          : theme.borderRadius,
+    },
+    buildShadow(theme, options.shadow),
+    getAnimatedStyle(animation, progress, position),
+    {
+      transform: [
+        ...(getAnimatedStyle(animation, progress, position).transform || []),
+        { translateX: swipeX },
+      ],
+    },
+    options.containerStyle,
+  ];
+
+  const textFont = fontFamily ? { fontFamily } : null;
+
+  const body = options.render ? (
+    options.render({ ...info, colors, theme })
+  ) : (
+    <>
+      <ToastIcon
+        type={type}
+        icon={options.icon}
+        color={colors.icon}
+        glyphColor={palette.iconText}
+        size={theme.iconSize}
+      />
+      <View style={styles.texts}>
+        {showTitle ? (
+          <Text
+            maxFontSizeMultiplier={1.6}
+            style={[
+              textFont,
+              {
+                color: colors.text,
+                fontSize: typography.titleSize,
+                fontWeight: typography.titleWeight,
+              },
+              options.titleStyle,
+            ]}
+          >
+            {title}
+          </Text>
+        ) : null}
+        {options.message ? (
+          <Text
+            maxFontSizeMultiplier={1.6}
+            style={[
+              textFont,
+              {
+                color: colors.text,
+                fontSize: typography.messageSize,
+                fontWeight: typography.messageWeight,
+              },
+              showTitle && styles.messageGap,
+              options.messageStyle,
+            ]}
+          >
+            {options.message}
+          </Text>
+        ) : null}
+      </View>
+    </>
+  );
+
+  return (
+    <Animated.View
+      {...panResponder.panHandlers}
+      pointerEvents={status === 'visible' ? 'auto' : 'none'}
+      style={outerStyle}
+      testID={`toast-${id}`}
+    >
+      <View style={[styles.clip, { borderRadius: innerRadius }]}>
+        <View style={[styles.row, { padding }]}>
+          <Pressable
+            accessibilityRole={options.onPress ? 'button' : 'alert'}
+            accessibilityLabel={
+              options.render ? options.accessibilityLabel : label
+            }
+            accessibilityLiveRegion="polite"
+            onPress={handlePress}
+            onPressIn={() => manager.pause(id)}
+            onPressOut={() => manager.resume(id)}
+            style={styles.body}
+          >
+            {body}
+          </Pressable>
+          {options.action ? (
+            <ToastAction
+              label={options.action.label}
+              accessibilityLabel={options.action.accessibilityLabel}
+              color={theme.actionColor || colors.icon}
+              fontFamily={fontFamily}
+              onPress={handleAction}
+            />
+          ) : null}
+          {options.closeButton ? (
+            <Pressable
+              accessibilityRole="button"
+              accessibilityLabel={
+                options.closeAccessibilityLabel || 'Dismiss notification'
+              }
+              hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+              onPress={() => manager.hide(id, 'close')}
+              style={styles.close}
+            >
+              <Text
+                allowFontScaling={false}
+                style={[
+                  styles.closeGlyph,
+                  { color: theme.closeColor || colors.text },
+                ]}
+              >
+                ✕
+              </Text>
+            </Pressable>
+          ) : null}
+        </View>
+        {options.progress && options.duration > 0 ? (
+          <ToastProgress
+            duration={options.duration}
+            remaining={remaining}
+            paused={paused || status !== 'visible'}
+            color={colors.icon}
+            trackColor={theme.progressTrack}
+          />
+        ) : null}
+      </View>
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { alignSelf: 'auto' },
+  clip: { overflow: 'hidden' },
+  row: { flexDirection: 'row', alignItems: 'center' },
+  body: { flex: 1, flexDirection: 'row', alignItems: 'center' },
+  texts: { flex: 1 },
+  messageGap: { marginTop: 2 },
+  close: {
+    width: 32,
+    height: 32,
+    marginLeft: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  closeGlyph: { fontSize: 16, fontWeight: '600' },
+});
+
+export default React.memo(ToastItem);

package/src/components/ToastProgress.js

@@ -0,0 +1,69 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, Easing, StyleSheet, View } from 'react-native';
+
+/**
+ * Bar that drains from full to empty over the toast's duration.
+ * It pauses while `paused` is true and continues from where it stopped.
+ *
+ * Trade-off: the bar animates `width`, a layout property, so it cannot use the
+ * native driver. It is a thin absolutely-positioned element, so the cost is small.
+ */
+export default function ToastProgress({
+  duration,
+  remaining,
+  paused,
+  color,
+  trackColor,
+}) {
+  const value = useRef(new Animated.Value(remaining / duration)).current;
+  const current = useRef(remaining / duration);
+
+  useEffect(() => {
+    const id = value.addListener(({ value: v }) => {
+      current.current = v;
+    });
+    return () => value.removeListener(id);
+  }, [value]);
+
+  useEffect(() => {
+    if (paused || current.current <= 0) {
+      return undefined;
+    }
+    const animation = Animated.timing(value, {
+      toValue: 0,
+      duration: current.current * duration,
+      easing: Easing.linear,
+      useNativeDriver: false,
+    });
+    animation.start();
+    return () => animation.stop();
+  }, [paused, duration, value]);
+
+  return (
+    <View
+      testID="toast-progress"
+      accessible={false}
+      importantForAccessibility="no-hide-descendants"
+      style={[styles.track, { backgroundColor: trackColor }]}
+    >
+      <Animated.View
+        style={[
+          styles.bar,
+          {
+            backgroundColor: color,
+            width: value.interpolate({
+              inputRange: [0, 1],
+              outputRange: ['0%', '100%'],
+              extrapolate: 'clamp',
+            }),
+          },
+        ]}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  track: { position: 'absolute', left: 0, right: 0, bottom: 0, height: 3 },
+  bar: { height: 3 },
+});

package/src/components/ToastProvider.js

@@ -0,0 +1,107 @@
+import React, { useEffect, useMemo, useRef } from 'react';
+import { StyleSheet, View, useColorScheme } from 'react-native';
+import ToastContext from '../context/ToastContext';
+import { registerGlobalToast } from '../global';
+import createToastApi from '../manager/createToastApi';
+import ToastManager from '../manager/ToastManager';
+import { resolveTheme } from '../themes';
+import { DEFAULT_CONFIG } from '../utils/constants';
+import ToastContainer from './ToastContainer';
+
+const NO_OFFSET = { x: 0, y: 0 };
+
+export default function ToastProvider({
+  children,
+  theme = 'light',
+  position = DEFAULT_CONFIG.position,
+  duration = DEFAULT_CONFIG.duration,
+  animation = DEFAULT_CONFIG.animation,
+  animationDuration = DEFAULT_CONFIG.animationDuration,
+  maxVisible = DEFAULT_CONFIG.maxVisible,
+  closeButton = DEFAULT_CONFIG.closeButton,
+  swipeToDismiss = DEFAULT_CONFIG.swipeToDismiss,
+  progress = DEFAULT_CONFIG.progress,
+  haptics = DEFAULT_CONFIG.haptics,
+  spacing,
+  offset,
+  insets,
+  global = false,
+  style,
+}) {
+  const config = {
+    position,
+    duration,
+    animation,
+    animationDuration,
+    maxVisible,
+    closeButton,
+    swipeToDismiss,
+    progress,
+    haptics,
+  };
+
+  const managerRef = useRef(null);
+  if (!managerRef.current) {
+    managerRef.current = new ToastManager(config);
+  }
+  const manager = managerRef.current;
+
+  useEffect(() => {
+    manager.configure(config);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    manager,
+    position,
+    duration,
+    animation,
+    animationDuration,
+    maxVisible,
+    closeButton,
+    swipeToDismiss,
+    progress,
+    haptics,
+  ]);
+
+  // Clear every timer on unmount. `revive` makes this safe under React
+  // StrictMode, which runs effect cleanup and setup once more in development.
+  useEffect(() => {
+    manager.revive();
+    return () => manager.destroy();
+  }, [manager]);
+
+  const api = useMemo(() => createToastApi(manager), [manager]);
+
+  useEffect(() => {
+    if (!global) {
+      return undefined;
+    }
+    return registerGlobalToast(api);
+  }, [global, api]);
+
+  const colorScheme = useColorScheme();
+  const resolvedTheme = useMemo(
+    () => resolveTheme(theme, colorScheme === 'dark' ? 'dark' : 'light'),
+    [theme, colorScheme],
+  );
+
+  const resolvedOffset = useMemo(() => ({ ...NO_OFFSET, ...offset }), [offset]);
+
+  return (
+    <ToastContext.Provider value={api}>
+      <View style={[styles.root, style]}>
+        {children}
+        <ToastContainer
+          manager={manager}
+          theme={resolvedTheme}
+          spacing={spacing != null ? spacing : resolvedTheme.spacing}
+          offset={resolvedOffset}
+          insets={insets}
+        />
+      </View>
+    </ToastContext.Provider>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: { flex: 1 },
+});

package/src/context/ToastContext.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+/** null means "no ToastProvider above": useToast() turns that into an error. */
+const ToastContext = createContext(null);
+export default ToastContext;