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

package/package.json

@@ -1,6 +1,84 @@
 {
   "name": "react-native-toast-message-library",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.0.0",
+  "description": "Lightweight, customizable toast notifications for React Native: queue, themes, animations, actions, swipe-to-dismiss and accessibility. Pure JavaScript, no native modules.",
+  "main": "src/index.js",
+  "react-native": "src/index.js",
+  "types": "types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./types/index.d.ts",
+      "react-native": "./src/index.js",
+      "default": "./src/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "files": [
+    "src",
+    "types/index.d.ts",
+    "README.md",
+    "CHANGELOG.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "android": "react-native run-android",
+    "ios": "react-native run-ios",
+    "start": "react-native start",
+    "test": "jest",
+    "test:coverage": "jest --coverage",
+    "lint": "eslint src demo __tests__ App.js index.js --ext .js",
+    "typecheck": "tsc --noEmit -p types/tsconfig.json",
+    "validate": "npm run lint && npm run typecheck && npm test && npm pack --dry-run",
+    "prepublishOnly": "npm run lint && npm run typecheck && npm test"
+  },
+  "keywords": [
+    "react-native",
+    "toast",
+    "notification",
+    "snackbar",
+    "ios",
+    "android",
+    "toast-notification"
+  ],
+  "license": "MIT",
+  "author": "Denish Dabhi <dabhidenish57@gmail.com>",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-native": ">=0.72.0",
+    "react-native-safe-area-context": ">=4.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react-native-safe-area-context": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@babel/core": "^7.25.2",
+    "@babel/preset-env": "^7.25.3",
+    "@babel/runtime": "^7.25.0",
+    "@react-native-community/cli": "20.2.0",
+    "@react-native-community/cli-platform-android": "20.2.0",
+    "@react-native-community/cli-platform-ios": "20.2.0",
+    "@react-native/babel-preset": "0.88.0",
+    "@react-native/eslint-config": "0.88.0",
+    "@react-native/jest-preset": "0.88.0",
+    "@react-native/metro-config": "0.88.0",
+    "@testing-library/react-native": "^14.1.0",
+    "@types/react": "^19.2.0",
+    "eslint": "^8.19.0",
+    "jest": "^29.6.3",
+    "prettier": "2.8.8",
+    "react": "19.3.0",
+    "react-native": "0.88.0",
+    "react-native-safe-area-context": "^5.5.2",
+    "test-renderer": "^1.0.0",
+    "typescript": "^6.0.3"
+  },
+  "engines": {
+    "node": ">= 22.11.0"
+  }
+}

package/src/animations/toastAnimations.js

@@ -0,0 +1,85 @@
+import { Animated, Easing } from 'react-native';
+
+const SLIDE_DISTANCE = 64;
+
+/**
+ * Every animation is driven by a single Animated.Value `progress` that goes
+ * 0 (hidden) -> 1 (shown). Only opacity and transforms are animated, so the
+ * native driver can be used and no layout pass is needed per frame.
+ */
+
+export function resolveAnimation(animation, reducedMotion) {
+  if (reducedMotion && (animation === 'slide' || animation === 'zoom')) {
+    // Movement and scaling are replaced by a plain cross-fade.
+    return 'fade';
+  }
+  return animation;
+}
+
+function slideOffset(position) {
+  if (position.startsWith('top')) {
+    return -SLIDE_DISTANCE;
+  }
+  if (position.startsWith('bottom')) {
+    return SLIDE_DISTANCE;
+  }
+  return SLIDE_DISTANCE / 2;
+}
+
+export function getAnimatedStyle(animation, progress, position) {
+  switch (animation) {
+    case 'fade':
+      return { opacity: progress };
+    case 'slide':
+      return {
+        opacity: progress,
+        transform: [
+          {
+            translateY: progress.interpolate({
+              inputRange: [0, 1],
+              outputRange: [slideOffset(position), 0],
+            }),
+          },
+        ],
+      };
+    case 'zoom':
+      return {
+        opacity: progress,
+        transform: [
+          {
+            scale: progress.interpolate({
+              inputRange: [0, 1],
+              outputRange: [0.85, 1],
+            }),
+          },
+        ],
+      };
+    default:
+      return {};
+  }
+}
+
+/**
+ * Starts an enter (toValue 1) or exit (toValue 0) animation and returns the
+ * Animated handle so the caller can stop it. With animation 'none' or a zero
+ * duration the value is set immediately and `onEnd({ finished: true })` is
+ * called synchronously.
+ */
+export function runToastAnimation(progress, toValue, options, onEnd) {
+  const { animation, duration } = options;
+  if (animation === 'none' || !(duration > 0)) {
+    progress.setValue(toValue);
+    if (onEnd) {
+      onEnd({ finished: true });
+    }
+    return null;
+  }
+  const handle = Animated.timing(progress, {
+    toValue,
+    duration,
+    easing: toValue === 1 ? Easing.out(Easing.cubic) : Easing.in(Easing.cubic),
+    useNativeDriver: true,
+  });
+  handle.start(onEnd);
+  return handle;
+}

package/src/components/ToastAction.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Pressable, StyleSheet, Text } from 'react-native';
+
+export default function ToastAction({
+  label,
+  accessibilityLabel,
+  color,
+  onPress,
+  fontFamily,
+}) {
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel || label}
+      hitSlop={{ top: 6, bottom: 6, left: 6, right: 6 }}
+      onPress={onPress}
+      style={({ pressed }) => [styles.button, { opacity: pressed ? 0.6 : 1 }]}
+    >
+      <Text
+        maxFontSizeMultiplier={1.4}
+        style={[styles.label, { color }, fontFamily && { fontFamily }]}
+      >
+        {label}
+      </Text>
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  button: {
+    minHeight: 36,
+    minWidth: 44,
+    paddingHorizontal: 10,
+    marginLeft: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  label: { fontSize: 14, fontWeight: '700', textTransform: 'none' },
+});

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