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

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;

package/src/global.js

@@ -0,0 +1,38 @@
+let active = null;
+
+/**
+ * Called by <ToastProvider global>. Returns an unregister function. If several
+ * global providers are mounted, the most recently mounted one wins and the
+ * previous one is restored when it unmounts.
+ */
+export function registerGlobalToast(api) {
+  const previous = active;
+  active = api;
+  return () => {
+    if (active === api) {
+      active = previous;
+    }
+  };
+}
+
+function current() {
+  if (!active) {
+    throw new Error(
+      '[react-native-toast-message-library] Toast.* was called but no <ToastProvider global> is mounted. ' +
+        'Render <ToastProvider global> near the root of your app, or use the useToast() hook.',
+    );
+  }
+  return active;
+}
+
+/** Imperative API. Requires <ToastProvider global>. Throws if none is mounted. */
+export const Toast = {
+  show: input => current().show(input),
+  success: (message, options) => current().success(message, options),
+  error: (message, options) => current().error(message, options),
+  warning: (message, options) => current().warning(message, options),
+  info: (message, options) => current().info(message, options),
+  hide: id => current().hide(id),
+  hideAll: () => current().hideAll(),
+  isVisible: id => current().isVisible(id),
+};

package/src/hooks/useReducedMotion.js

@@ -0,0 +1,28 @@
+import { useEffect, useState } from 'react';
+import { AccessibilityInfo } from 'react-native';
+
+/** Tracks the system "reduce motion" accessibility setting. */
+export default function useReducedMotion() {
+  const [reduced, setReduced] = useState(false);
+
+  useEffect(() => {
+    let mounted = true;
+    AccessibilityInfo.isReduceMotionEnabled()
+      .then(value => {
+        if (mounted) {
+          setReduced(Boolean(value));
+        }
+      })
+      .catch(() => {});
+    const subscription = AccessibilityInfo.addEventListener(
+      'reduceMotionChanged',
+      value => setReduced(Boolean(value)),
+    );
+    return () => {
+      mounted = false;
+      subscription.remove();
+    };
+  }, []);
+
+  return reduced;
+}

package/src/hooks/useToast.js

@@ -0,0 +1,13 @@
+import { useContext } from 'react';
+import ToastContext from '../context/ToastContext';
+
+export default function useToast() {
+  const api = useContext(ToastContext);
+  if (!api) {
+    throw new Error(
+      '[react-native-toast-message-library] useToast() was called outside of a <ToastProvider>. ' +
+        'Wrap your app (usually in App.js) with <ToastProvider>...</ToastProvider>.',
+    );
+  }
+  return api;
+}

package/src/index.js

@@ -0,0 +1,4 @@
+export { default as ToastProvider } from './components/ToastProvider';
+export { default as useToast } from './hooks/useToast';
+export { Toast } from './global';
+export { createTheme, light as lightTheme, dark as darkTheme } from './themes';