@rdicons/react-native 0.6.0 → 0.7.0

package/dist/runtime.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentType } from 'react'
+import type { ForwardRefExoticComponent, RefAttributes } from 'react'
 import type { SvgProps } from 'react-native-svg'
 
 export interface RdIconProps extends Omit<SvgProps, 'width' | 'height' | 'color' | 'viewBox'> {
@@ -10,10 +10,29 @@ export interface RdIconProps extends Omit<SvgProps, 'width' | 'height' | 'color'
   strokeWidth?: number | string
   /** Accessible name. Without it the icon is hidden from screen readers (decorative) */
   title?: string
+  /**
+   * Plays the icon's animation (only the rd icons have one; the rest ignore this). Off by default.
+   * `true` or `"play"`: once, when the icon appears and again each time `animate` turns on. `"loop"`: continuously, for loading states.
+   * Call `ref.current.play()` to replay it, for example from onPress. Nothing moves when the device asks for reduced motion.
+   */
+  animate?: boolean | 'play' | 'loop'
+  /** Animation speed: 2 is twice as fast, 0.5 twice as slow. Default 1 */
+  speed?: number
+  /** Fills the closed shapes of an outline icon with a soft second tone. `true`, a strength (0.05 to 0.6), another color, or `{ color, opacity }`. */
+  duotone?: boolean | number | string | { color?: string | null; opacity?: number }
+  /** The line runs from one color to another: `['#ec4899', '#4f46e5']`, with an angle as a third item, or `{ from, to, angle }`. Replaces `color`. */
+  gradient?: [string, string] | [string, string, number] | { from: string; to: string; angle?: number }
 }
 
-export type RdIcon = ComponentType<RdIconProps>
+/** What `ref` gives you on an icon that can animate: play it again on demand. */
+export interface RdIconHandle {
+  /** Plays the animation once more (only icons that have one) */
+  play(): void
+  stop(): void
+}
+
+export type RdIcon = ForwardRefExoticComponent<RdIconProps & RefAttributes<RdIconHandle>>
 
-export declare function createIcon(id: string, body: string, width?: number, height?: number): RdIcon
+export declare function createIcon(id: string, body: string, width?: number, height?: number, anim?: { b: string; m: unknown }): RdIcon
 /** The inner markup of an icon as a tree (what createIcon draws). */
 export declare function parseBody(body: string): { tag: string; props: Record<string, string>; children: unknown[] }[]

package/dist/runtime.js

@@ -1,5 +1,13 @@
-import { createElement } from 'react'
+import * as React from 'react'
+import { AccessibilityInfo, Animated } from 'react-native'
 import Svg, { ClipPath, Circle, Defs, Ellipse, G, Line, LinearGradient, Mask, Path, Polygon, Polyline, RadialGradient, Rect, Stop, Use } from 'react-native-svg'
+import { applyEffects, parseEffectProps } from './effects.js'
+import { delayOf, trackOf } from './motion.js'
+
+const { createElement } = React
+let legacyIds = 0
+// useId needs React 18; on older React a counter kept in a ref gives every icon its own gradient id
+const useUid = React.useId || function useLegacyUid() { const ref = React.useRef(null); if (ref.current === null) ref.current = ':l' + ++legacyIds; return ref.current }
 
 // SVG tags that appear in the icons, and the react-native-svg component that draws each
 const TAGS = {
@@ -22,7 +30,7 @@ const TAGS = {
 
 const camel = (name) => (name === 'xlink:href' ? 'href' : name.replace(/-([a-z])/g, (_m, c) => c.toUpperCase()))
 
-/** Reads the inner markup of an icon into a small tree: [{ tag, props, children }]. Done once per icon. */
+/** Reads the inner markup of an icon into a small tree: [{ tag, props, cls, vars, children }]. Done once per icon. */
 export function parseBody(body) {
   const root = { children: [] }
   const stack = [root]
@@ -34,11 +42,14 @@ export function parseBody(body) {
       continue
     }
     const props = {}
-    for (const a of rawAttrs.matchAll(/([a-zA-Z:-]+)\s*=\s*"([^"]*)"/g)) {
-      if (a[1] === 'class' || a[1] === 'style') continue // CSS does not exist in React Native
-      props[camel(a[1])] = a[2]
+    const node = { tag, props, cls: undefined, vars: {}, children: [] }
+    for (const a of rawAttrs.matchAll(/([a-zA-Z][a-zA-Z0-9:-]*)\s*=\s*"([^"]*)"/g)) {
+      if (a[1] === 'class') node.cls = a[2]
+      else if (a[1] === 'style') {
+        // CSS does not exist in React Native; only the custom properties the animations read (--k: stagger index, --s: direction) are kept
+        for (const v of a[2].matchAll(/--([ks]):\s*(-?[\d.]+)/g)) node.vars[v[1]] = parseFloat(v[2])
+      } else props[camel(a[1])] = a[2]
     }
-    const node = { tag, props, children: [] }
     stack[stack.length - 1].children.push(node)
     if (!selfClosing) stack.push(node)
   }
@@ -48,30 +59,169 @@ export function parseBody(body) {
 const draw = (node, key, strokeWidth) => {
   const Comp = TAGS[node.tag]
   if (!Comp) return null
-  const props = { ...node.props, key }
+  const { len, ...rest } = node.props // `len` is the real path length, only used by animations
+  void len
+  const props = { ...rest, key }
   if (strokeWidth != null && props.strokeWidth != null) props.strokeWidth = String(strokeWidth)
   return createElement(Comp, props, ...node.children.map((c, i) => draw(c, i, strokeWidth)))
 }
 
+// ---------------------------------------------------------------- animation (rd icons)
+const animatedTags = {}
+const animatedTag = (tag) => (animatedTags[tag] ??= Animated.createAnimatedComponent(TAGS[tag]))
+
+const linear = (t) => t
+
+/** One Animated.Value per animation of every animated element, and the props each one drives. Built once per speed. */
+function planOf(tree, motion, centerX, centerY) {
+  const items = []
+  const walk = (nodes) => {
+    for (const node of nodes) {
+      const part = node.cls ? motion.p[node.cls] : undefined
+      if (part && (part.a.length || part.da)) items.push({ node, part })
+      walk(node.children)
+    }
+  }
+  walk(tree)
+  return items.map((it) => ({ ...it, origin: it.part.o ?? [centerX, centerY], values: it.part.a.map(() => new Animated.Value(0)) }))
+}
+
+/** Props that make a node follow its animations: transform props on every element, dash props on the shapes (the real length scales the dash). */
+function animatedProps(item, ctxDash) {
+  const { part, node, values, origin } = item
+  const vars = node.vars
+  const props = { originX: origin[0], originY: origin[1] }
+  const own = {}
+  part.a.forEach((spec, i) => {
+    const track = (key) => {
+      const t = trackOf(spec.f, key, spec.e, vars)
+      return t ? { v: values[i], t } : null
+    }
+    for (const [key, name] of [['tx', 'translateX'], ['ty', 'translateY'], ['r', 'rotation'], ['sx', 'scaleX'], ['sy', 'scaleY'], ['o', 'opacity']]) {
+      const t = track(key)
+      if (t) props[name] = t.v.interpolate({ inputRange: t.t.inputRange, outputRange: t.t.outputRange })
+    }
+    const d = track('d')
+    if (d) own.dash = d
+  })
+  const dash = own.dash ? { da: part.da, track: own.dash } : part.da ? { da: part.da, track: null, rest: part.ds ?? 0 } : ctxDash
+  return { props, dash: dash ?? ctxDash }
+}
+
+function drawAnimated(node, key, plan, ctx) {
+  const Base = TAGS[node.tag]
+  if (!Base) return null
+  const { len, ...rest } = node.props
+  const item = plan.get(node)
+  let props = { ...rest, key }
+  if (ctx.strokeWidth != null && props.strokeWidth != null) props.strokeWidth = String(ctx.strokeWidth)
+  let dash = ctx.dash
+  if (item) {
+    const a = animatedProps(item, ctx.dash)
+    props = { ...props, ...a.props }
+    dash = a.dash
+  }
+  if (len && dash) {
+    const L = parseFloat(len)
+    const [d0, d1] = dash.da ?? [1, 2]
+    props.strokeDasharray = `${d0 * L} ${d1 * L}`
+    if (dash.track) props.strokeDashoffset = dash.track.v.interpolate({ inputRange: dash.track.t.inputRange, outputRange: dash.track.t.outputRange.map((x) => x * L) })
+    else props.strokeDashoffset = (dash.rest ?? 0) * L
+  }
+  const Comp = item || (props.strokeDashoffset !== undefined && typeof props.strokeDashoffset === 'object') ? animatedTag(node.tag) : Base
+  return createElement(Comp, props, ...node.children.map((c, i) => drawAnimated(c, i, plan, { dash, strokeWidth: ctx.strokeWidth })))
+}
+
+/** Starts every animation of the plan; returns a function that stops them. */
+function run(items, mode, speed) {
+  const anims = []
+  for (const item of items) {
+    item.part.a.forEach((spec, i) => {
+      const v = item.values[i]
+      v.setValue(0)
+      const timing = Animated.timing(v, { toValue: 1, duration: (spec.d * 1000) / speed, easing: linear, useNativeDriver: false })
+      const delay = (delayOf(spec, item.node.vars) * 1000) / speed
+      const body = mode === 'loop' ? Animated.loop(timing) : timing
+      anims.push(delay > 0 ? Animated.sequence([Animated.delay(delay), body]) : body)
+    })
+  }
+  const all = Animated.parallel(anims)
+  all.start()
+  return () => {
+    all.stop()
+    for (const item of items) for (const v of item.values) v.setValue(0)
+  }
+}
+
+function useReducedMotion() {
+  // null until the device has answered, so an icon never starts to move before it is known that motion is wanted
+  const [reduced, setReduced] = React.useState(null)
+  React.useEffect(() => {
+    let live = true
+    if (!AccessibilityInfo.isReduceMotionEnabled) setReduced(false)
+    else AccessibilityInfo.isReduceMotionEnabled().then((v) => live && setReduced(!!v)).catch(() => live && setReduced(false))
+    const sub = AccessibilityInfo.addEventListener?.('reduceMotionChanged', (v) => setReduced(!!v))
+    return () => {
+      live = false
+      sub?.remove?.()
+    }
+  }, [])
+  return reduced
+}
+
 /**
  * Turns an icon (SVG inner markup + viewBox size) into a React Native component drawn with react-native-svg.
- * Every generated icon in this package is created with this function.
+ * Every generated icon in this package is created with this function. `anim` = { b: animated drawing, m: motion } for icons that move.
  */
-export function createIcon(id, body, width = 24, height = 24) {
+export function createIcon(id, body, width = 24, height = 24, anim) {
   let tree = null
-  const Icon = ({ size = 24, color = '#000000', strokeWidth, title, ...rest }) => {
-    tree ??= parseBody(body)
+  const cache = new Map() // the drawing of an effect combination, so a re-render does not parse again
+  const Icon = React.forwardRef(function RdIcon({ size = 24, color = '#000000', strokeWidth, title, duotone, gradient, animate, speed = 1, ...rest }, ref) {
+    const uid = useUid()
+    const reduced = useReducedMotion()
+    const mode = anim && animate ? (animate === 'loop' ? 'loop' : 'play') : null
+    const [runs, setRuns] = React.useState(0)
+    const fx = duotone || gradient ? parseEffectProps({ duotone, gradient }, 'rdg' + uid) : null
+    const fxKey = fx ? JSON.stringify([fx.duotone, fx.gradient, fx.gradientId]) : ''
+
+    // the animated drawing: one Animated.Value per animation, kept while the icon is mounted
+    const plan = React.useMemo(() => {
+      if (!mode) return null
+      const drawing = fx ? applyEffects(anim.b, width, height, 'currentColor', fx) : anim.b
+      const animTree = parseBody(drawing)
+      const items = planOf(animTree, anim.m, width / 2, height / 2)
+      return { animTree, items, byNode: new Map(items.map((it) => [it.node, it])) }
+    }, [mode, fxKey])
+    React.useImperativeHandle(ref, () => ({ play: () => setRuns((n) => n + 1), stop: () => {} }), [])
+    React.useEffect(() => {
+      if (!plan || reduced !== false) return undefined
+      return run(plan.items, mode, speed > 0 ? speed : 1)
+    }, [plan, mode, speed, reduced, runs])
+
+    let nodes = null
+    if (!plan) {
+      if (fx) {
+        if (!cache.has(fxKey)) { if (cache.size > 20) cache.clear(); cache.set(fxKey, parseBody(applyEffects(body, width, height, 'currentColor', fx))) }
+        nodes = cache.get(fxKey)
+      } else {
+        tree ??= parseBody(body)
+        nodes = tree
+      }
+    }
     // fit the longest side into the `size` box, like the rdicons website does
     const n = typeof size === 'number' ? size : Number.parseFloat(size)
     const long = Math.max(width, height)
     const w = width !== height ? (n * width) / long : size
     const h = width !== height ? (n * height) / long : size
+    const children = plan
+      ? plan.animTree.map((node, i) => drawAnimated(node, i, plan.byNode, { dash: null, strokeWidth }))
+      : nodes.map((node, i) => draw(node, i, strokeWidth))
     return createElement(
       Svg,
       { width: w, height: h, viewBox: '0 0 ' + width + ' ' + height, color, accessibilityRole: title ? 'image' : undefined, accessibilityLabel: title, accessible: title ? true : undefined, ...rest },
-      ...tree.map((node, i) => draw(node, i, strokeWidth)),
+      ...children,
     )
-  }
+  })
   Icon.displayName = id
   return Icon
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rdicons/react-native",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "79,000+ open-source icons as React Native components, from 19 libraries, drawn with react-native-svg. Import one library at a time, e.g. import { House } from '@rdicons/react-native/lucide'.",
   "keywords": ["icons", "react-native", "expo", "svg", "react-native-svg", "lucide", "tabler", "phosphor", "heroicons", "material-icons", "rdicons"],
   "license": "MIT AND ISC AND Apache-2.0 AND CC-BY-4.0",