feat: add IterableInboxIcon and IterableInboxSmartIcon components for enhanced icon support

Author: lposen

.eslintrc.js

@@ -1,5 +1,6 @@
 module.exports = {
   root: true,
+  ignorePatterns: ['coverage/**/*'],
   extends: [
     '@react-native',
     'plugin:react/recommended',

README.md

@@ -17,6 +17,11 @@ Iterable. It supports JavaScript and TypeScript.
 
 - [Iterable's React Native SDK](#iterables-react-native-sdk)
   - [Requirements](#requirements)
+    - [React Native](#react-native)
+      - [UI Components require additional peer dependencies](#ui-components-require-additional-peer-dependencies)
+      - [Optional peer dependencies for enhanced UI](#optional-peer-dependencies-for-enhanced-ui)
+    - [iOS](#ios)
+    - [Android](#android)
   - [Architecture Support](#architecture-support)
   - [Installation](#installation)
   - [Features](#features)
@@ -34,22 +39,24 @@ Iterable. It supports JavaScript and TypeScript.
 
 Iterable's React Native SDK relies on:
 
-- **React Native**
-    - [React Native 0.75+](https://github.com/facebook/react-native)
-    - [React 18.1+](https://github.com/facebook/react)
+### React Native
+  - [React Native 0.75+](https://github.com/facebook/react-native)
+  - [React 18.1+](https://github.com/facebook/react)
 
-    _UI Components require additional peer dependencies_
-    - [React Navigation 6+](https://github.com/react-navigation/react-navigation)
-    - [React Native Safe Area Context 4+](https://github.com/th3rdwave/react-native-safe-area-context)
-    - [React Native Vector Icons 10+](https://github.com/oblador/react-native-vector-icons)
-    - [React Native WebView 13+](https://github.com/react-native-webview/react-native-webview)
+#### UI Components require additional peer dependencies
+  - [React Navigation 6+](https://github.com/react-navigation/react-navigation)
+  - [React Native Safe Area Context 4+](https://github.com/th3rdwave/react-native-safe-area-context)
+  - [React Native WebView 13+](https://github.com/react-native-webview/react-native-webview)
 
-- **iOS**
+#### Optional peer dependencies for enhanced UI
+  - [React Native Vector Icons 10+](https://github.com/oblador/react-native-vector-icons) - Provides enhanced icons for the inbox component. If not installed, the SDK will use fallback Unicode symbols.
+
+### iOS
     - Xcode 12+
     - [Deployment target 13.4+](https://help.apple.com/xcode/mac/current/#/deve69552ee5)
     - [Iterable's iOS SDK](https://github.com/Iterable/iterable-swift-sdk)
-
-- **Android**
+    - Swift 5
+### Android
     - [`minSdkVersion` 21+, `compileSdkVersion` 31+](https://medium.com/androiddevelopers/picking-your-compilesdkversion-minsdkversion-targetsdkversion-a098a0341ebd)
     - [Iterable's Android SDK](https://github.com/Iterable/iterable-android-sdk)
 

package.json

@@ -113,12 +113,14 @@
     "react": "*",
     "react-native": "*",
     "react-native-safe-area-context": "*",
-    "react-native-vector-icons": "*",
     "react-native-webview": "*"
   },
   "peerDependenciesMeta": {
     "expo": {
       "optional": true
+    },
+    "react-native-vector-icons": {
+      "optional": true
     }
   },
   "sideEffects": false,

src/inbox/components/IterableInboxIcon.tsx

@@ -0,0 +1,41 @@
+import { Text, StyleSheet, type TextStyle } from 'react-native';
+
+/**
+ * Props for the IterableInboxIcon component.
+ */
+export interface IterableInboxIconProps {
+  /**
+   * The name of the icon to display.
+   */
+  name: string;
+  /**
+   * The style to apply to the icon.
+   */
+  style?: TextStyle;
+}
+
+/**
+ * A fallback icon component that uses Unicode symbols instead of vector icons.
+ * This allows the inbox to work without requiring react-native-vector-icons.
+ */
+export const IterableInboxIcon = ({ name, style }: IterableInboxIconProps) => {
+  // Map of common icon names to Unicode symbols
+  const iconMap: Record<string, string> = {
+    'chevron-back-outline': '‹',
+    'chevron-back': '‹',
+    'arrow-back': '←',
+    'back': '←',
+  };
+
+  const iconSymbol = iconMap[name] || '?';
+
+  return <Text style={[styles.icon, style]}>{iconSymbol}</Text>;
+};
+
+const styles = StyleSheet.create({
+  icon: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+});

src/inbox/components/IterableInboxIconUtils.ts

@@ -0,0 +1,20 @@
+/* eslint-disable @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires */
+import { type TextStyle } from 'react-native';
+
+// Type for the vector icon component
+type VectorIconComponent = React.ComponentType<{
+  name: string;
+  style?: TextStyle;
+}>;
+
+/**
+ * Attempts to load the react-native-vector-icons module.
+ * Returns null if the module is not available.
+ */
+export function tryLoadVectorIcons(): VectorIconComponent | null {
+  try {
+    return require('react-native-vector-icons/Ionicons').default;
+  } catch {
+    return null;
+  }
+}

src/inbox/components/IterableInboxMessageDisplay.tsx

@@ -7,7 +7,7 @@ import {
   TouchableWithoutFeedback,
   View,
 } from 'react-native';
-import Icon from 'react-native-vector-icons/Ionicons';
+import { IterableInboxSmartIcon } from './IterableInboxSmartIcon';
 import { WebView, type WebViewMessageEvent } from 'react-native-webview';
 
 import {
@@ -233,7 +233,7 @@ export const IterableInboxMessageDisplay = ({
             }}
           >
             <View style={styles.returnButton}>
-              <Icon
+              <IterableInboxSmartIcon
                 name="chevron-back-outline"
                 style={styles.returnButtonIcon}
               />

src/inbox/components/IterableInboxSmartIcon.tsx

@@ -0,0 +1,36 @@
+import { type TextStyle } from 'react-native';
+
+import { IterableInboxIcon } from './IterableInboxIcon';
+import { tryLoadVectorIcons } from './IterableInboxIconUtils';
+
+/**
+ * Props for the IterableInboxSmartIcon component.
+ */
+export interface IterableInboxSmartIconProps {
+  /**
+   * The name of the icon to display.
+   */
+  name: string;
+  /**
+   * The style to apply to the icon.
+   */
+  style?: TextStyle;
+}
+
+/**
+ * A smart icon component that attempts to use react-native-vector-icons if available,
+ * otherwise falls back to Unicode symbols.
+ */
+export const IterableInboxSmartIcon = ({
+  name,
+  style,
+}: IterableInboxSmartIconProps) => {
+  const VectorIcon = tryLoadVectorIcons();
+
+  if (VectorIcon) {
+    return <VectorIcon name={name} style={style} />;
+  }
+
+  // Fallback to Unicode symbols
+  return <IterableInboxIcon name={name} style={style} />;
+};

src/inbox/components/index.ts

@@ -1,5 +1,7 @@
 export * from './IterableInbox';
 export * from './IterableInboxEmptyState';
+export * from './IterableInboxIcon';
+export * from './IterableInboxSmartIcon';
 export * from './IterableInboxMessageCell';
 export * from './IterableInboxMessageDisplay';
 export * from './IterableInboxMessageList';

src/index.tsx

@@ -44,11 +44,15 @@ export {
   IterableInbox,
   IterableInboxDataModel,
   IterableInboxEmptyState,
+  IterableInboxIcon,
   IterableInboxMessageCell,
+  IterableInboxSmartIcon,
   type IterableInboxCustomizations,
   type IterableInboxEmptyStateProps,
+  type IterableInboxIconProps,
   type IterableInboxImpressionRowInfo,
   type IterableInboxMessageCellProps,
   type IterableInboxProps,
   type IterableInboxRowViewModel,
+  type IterableInboxSmartIconProps,
 } from './inbox';