react-native-nano-icons 0.1.2 → 0.1.4

package/src/createNanoIconsSet.shared.tsx

@@ -0,0 +1,121 @@
+import { memo, useMemo } from 'react';
+import { PixelRatio, Platform, Text, View, type TextProps } from 'react-native';
+import type { NanoGlyphMapInput, GlyphEntry } from './core/types';
+import type { IconComponent, IconProps } from './types';
+import { shallowEqualColor } from './utils/shallowEqualColor';
+
+export type { IconComponent, IconProps };
+export { shallowEqualColor };
+
+const DEFAULT_ICON_SIZE = 12;
+
+/**
+ * JS implementation using <View> + <Text> layers.
+ * Used on web and as a fallback when native component is unavailable (e.g. Expo Go).
+ */
+export function createJSIconSet<GM extends NanoGlyphMapInput>(
+  glyphMap: GM
+): IconComponent<GM> {
+  const fontBasename = glyphMap.m.f;
+
+  const fontReference = Platform.select({
+    windows: `/Assets/${fontBasename}`,
+    default: fontBasename,
+  });
+
+  const styleOverrides: TextProps['style'] = {
+    fontFamily: fontReference,
+    fontWeight: 'normal',
+    fontStyle: 'normal',
+    position: 'absolute',
+    includeFontPadding: false,
+    bottom: 0,
+  };
+
+  const unitsPerEm = glyphMap.m.u;
+
+  const resolveEntry = (name: keyof GM['i']): GlyphEntry => {
+    return (glyphMap.i[name as string] ?? [
+      unitsPerEm,
+      [[63, 'black']],
+    ]) as GlyphEntry;
+  };
+
+  const codepointCache = new Map<number, string>();
+  const getChar = (codepoint: number): string => {
+    let ch = codepointCache.get(codepoint);
+    if (ch === undefined) {
+      ch = String.fromCodePoint(codepoint);
+      codepointCache.set(codepoint, ch);
+    }
+    return ch;
+  };
+
+  const Icon = memo(
+    ({
+      name,
+      size = DEFAULT_ICON_SIZE,
+      color,
+      style,
+      allowFontScaling = true,
+      accessible,
+      accessibilityLabel,
+      accessibilityRole = 'image',
+      testID,
+      ref,
+    }: IconProps<keyof GM['i']>) => {
+      const fontScale = allowFontScaling ? PixelRatio.getFontScale() : 1;
+      const [adv, layers] = resolveEntry(name);
+      const scaledSize = size * fontScale;
+      const width = (adv / unitsPerEm) * scaledSize;
+
+      const colorArray = Array.isArray(color) ? color : [color];
+      const lastPaletteColor = colorArray?.length
+        ? colorArray[colorArray.length - 1]
+        : undefined;
+
+      const containerStyle = useMemo(
+        () => [{ height: scaledSize, width, bottom: 0 as const }, style],
+        [scaledSize, width, style]
+      );
+
+      const sizeStyle = useMemo(() => ({ fontSize: size }), [size]);
+
+      return (
+        <View
+          ref={ref}
+          style={containerStyle}
+          accessible={accessible}
+          accessibilityRole={accessibilityRole}
+          accessibilityLabel={accessibilityLabel ?? (name as string)}
+          testID={testID}>
+          {layers.map(([codepoint, srcColor], i) => {
+            const layerColor =
+              colorArray?.[i] ?? lastPaletteColor ?? srcColor ?? 'black';
+
+            return (
+              <Text
+                key={i}
+                selectable={false}
+                accessible={false}
+                allowFontScaling={allowFontScaling}
+                style={[styleOverrides, sizeStyle, { color: layerColor }]}>
+                {getChar(codepoint)}
+              </Text>
+            );
+          })}
+        </View>
+      );
+    },
+    (prev, next) =>
+      prev.name === next.name &&
+      prev.size === next.size &&
+      prev.allowFontScaling === next.allowFontScaling &&
+      prev.style === next.style &&
+      shallowEqualColor(prev.color, next.color)
+  );
+
+  Icon.displayName = `NanoIcon(${fontBasename})`;
+
+  return Icon;
+}

package/src/createNanoIconsSet.tsx

@@ -1,131 +1,12 @@
-import { forwardRef, type ComponentRef, type Ref } from 'react';
-import {
-  Platform,
-  Text,
-  View,
-  type ViewProps,
-  type ColorValue,
-  type TextProps,
-  useWindowDimensions,
-} from 'react-native';
-import type { GlyphEntry, NanoGlyphMap } from './core/types';
+import type { NanoGlyphMapInput } from './core/types';
+import type { IconComponent } from './types';
+import { createJSIconSet } from './createNanoIconsSet.shared';
 
-const DEFAULT_ICON_SIZE = 12;
+export type { IconComponent, IconProps } from './types';
+export { shallowEqualColor } from './utils/shallowEqualColor';
 
-type ViewRef = ComponentRef<typeof View>;
-
-export type IconProps<Name> = TextProps & {
-  name: Name;
-  size?: number;
-  colorPalette?: ColorValue[];
-  innerRef?: Ref<ViewRef>;
-};
-
-export type IconComponent<GM extends NanoGlyphMap> = React.FC<
-  TextProps & {
-    name: keyof GM['icons'];
-    size?: number;
-    colorPalette?: ColorValue[];
-    innerRef?: Ref<ViewRef>;
-  } & React.RefAttributes<ViewRef>
->;
-
-export function createIconSet<GM extends NanoGlyphMap>(
+export function createIconSet<GM extends NanoGlyphMapInput>(
   glyphMap: GM
 ): IconComponent<GM> {
-  const fontBasename = glyphMap.meta.fontFamily;
-
-  const fontReference = Platform.select({
-    windows: `/Assets/${fontBasename}`,
-    android: fontBasename,
-    default: fontBasename,
-  });
-
-  const styleOverrides: TextProps['style'] = {
-    fontFamily: fontReference,
-    fontWeight: 'normal',
-    fontStyle: 'normal',
-    position: 'absolute',
-    includeFontPadding: false,
-    bottom: 0,
-  };
-
-  const resolveEntry = (name: keyof GM['icons']): GlyphEntry => {
-    return (
-      glyphMap.icons[name as string] ?? {
-        adv: glyphMap.meta.upm,
-        layers: [{ codepoint: 63, color: 'black' }], // "?"
-      }
-    );
-  };
-
-  const Icon = ({
-    name,
-    size = DEFAULT_ICON_SIZE,
-    colorPalette,
-    style,
-    allowFontScaling = true,
-    innerRef,
-    ...props
-  }: IconProps<keyof GM['icons']>) => {
-    const { fontScale } = useWindowDimensions();
-
-    const entry = resolveEntry(name);
-    const layers = entry.layers ?? [];
-
-    const scaledSize = allowFontScaling ? size * fontScale : size;
-    const width = (entry.adv / glyphMap.meta.upm) * scaledSize;
-
-    const containerProps: ViewProps = {
-      style: {
-        height: scaledSize,
-        width,
-        bottom: 0,
-      },
-    };
-
-    const lastPaletteColor = colorPalette?.length
-      ? colorPalette[colorPalette.length - 1]
-      : undefined;
-
-    return (
-      <View
-        nativeID={`nano-icon-container-${String(name)}`}
-        ref={innerRef}
-        {...containerProps}
-      >
-        {layers.map(({ codepoint, color: srcColor }, i) => {
-          const layerColor =
-            colorPalette?.[i] ?? lastPaletteColor ?? srcColor ?? 'black';
-
-          return (
-            <Text
-              key={`${codepoint}-${i}`}
-              selectable={false}
-              {...props}
-              allowFontScaling={allowFontScaling}
-              style={[
-                style,
-                styleOverrides,
-                {
-                  fontSize: size,
-                  color: layerColor,
-                },
-              ]}
-            >
-              {String.fromCodePoint(codepoint)}
-            </Text>
-          );
-        })}
-      </View>
-    );
-  };
-
-  const WrappedIcon = forwardRef<ViewRef, IconProps<keyof GM['icons']>>(
-    (props, ref) => <Icon innerRef={ref} {...props} />
-  );
-
-  WrappedIcon.displayName = `NanoIcon(${fontBasename})`;
-
-  return WrappedIcon;
+  return createJSIconSet(glyphMap);
 }

package/src/index.ts

@@ -1,7 +1,6 @@
-// Extension-less so Metro can resolve when example uses path alias to ../src
 export {
   createIconSet as createNanoIconSet,
   type IconComponent,
   type IconProps,
 } from './createNanoIconsSet';
-export type { ColorValue } from 'react-native';
+export type { ColorValue } from 'react-native';

package/src/specs/NanoIconViewNativeComponent.ts

@@ -0,0 +1,15 @@
+import { codegenNativeComponent } from 'react-native';
+import type { CodegenTypes as CT, ViewProps } from 'react-native';
+
+export interface NativeProps extends ViewProps {
+  fontFamily: string;
+  codepoints: ReadonlyArray<CT.Int32>;
+  colors: ReadonlyArray<CT.Int32>;
+  fontSize: CT.Float;
+  advanceWidth: CT.Int32;
+  unitsPerEm: CT.Int32;
+  iconWidth: CT.Float;
+  iconHeight: CT.Float;
+}
+
+export default codegenNativeComponent<NativeProps>('NanoIconView');

package/src/types.ts

@@ -0,0 +1,27 @@
+import type { ComponentRef, Ref } from 'react';
+import type {
+  AccessibilityRole,
+  ColorValue,
+  View,
+  ViewStyle,
+} from 'react-native';
+import type { NanoGlyphMapInput } from './core/types';
+
+type ViewRef = ComponentRef<typeof View>;
+
+export type IconProps<Name> = {
+  name: Name;
+  size?: number;
+  color?: ColorValue | ColorValue[];
+  allowFontScaling?: boolean;
+  style?: ViewStyle;
+  accessible?: boolean;
+  accessibilityLabel?: string;
+  accessibilityRole?: AccessibilityRole;
+  ref?: Ref<ViewRef>;
+  testID?: string;
+};
+
+export type IconComponent<GM extends NanoGlyphMapInput> = React.FC<
+  IconProps<keyof GM['i']>
+>;

package/src/utils/shallowEqualColor.ts

@@ -0,0 +1,17 @@
+import type { ColorValue } from 'react-native';
+
+/** Shallow-compare two color props (single value or array) instead of arr ref for memo equality. */
+export function shallowEqualColor(
+  a: ColorValue | ColorValue[] | undefined,
+  b: ColorValue | ColorValue[] | undefined
+): boolean {
+  if (a === b) return true;
+  if (Array.isArray(a) && Array.isArray(b)) {
+    if (a.length !== b.length) return false;
+    for (let i = 0; i < a.length; i++) {
+      if (a[i] !== b[i]) return false;
+    }
+    return true;
+  }
+  return false;
+}