react-native-magnetkit 0.0.0-stage → 0.1.0

package/ios/MagnetKit/MagnetTap.swift

@@ -0,0 +1,53 @@
+import Foundation
+import simd
+
+/// The air tap: a magnet hovering over the glass, dipped quickly toward the
+/// screen (2–3 cm) and brought back.
+///
+/// The size of the field alone cannot tell a tap from a sweep across the
+/// sensor or a flick of the magnet — all of them make it jump and fall. The
+/// direction can: in a dip it barely turns, in a sweep it swings round, in a
+/// flick it turns without the distance changing. This small network
+/// (257 → 256 → 256 → 128 → 1, ~165k weights, trained only on simulated
+/// sequences) reads the last 1.28 s of the field and answers how likely it
+/// is that a tap has just finished. The distance itself is never known (2×
+/// farther with an 8× stronger magnet reads the same), so the dip is judged
+/// relative to the height: it has to bring the magnet a good part of the way
+/// to the glass.
+///
+/// `MagnetSource` runs it when `config.tapModel` is on and fires
+/// `.tap(at:)` once per tap, at the located point.
+public final class MagnetTap {
+    private let net: MFXLNet
+    /// Input layout (must match training): `window` samples at `hz`.
+    public let hz: Double
+    public let window: Int
+
+    public init?(data: Data) {
+        guard let net = MFXLNet(data: data, kind: "tap") else { return nil }
+        hz = net.header["hz"] as? Double ?? 50
+        window = net.header["window"] as? Int ?? 64
+        guard net.inputs == window * 4 + 1, net.outputs == 1 else { return nil }
+        self.net = net
+    }
+
+    /// - Parameter history: the field change (µT, device axes, against the
+    ///   current zero) sampled at `hz`, oldest first, ending now; the last
+    ///   `window` samples are used.
+    /// - Returns: the probability that a tap has just finished (0–1).
+    public func evaluate(history h: [SIMD3<Double>]) -> Double {
+        guard h.count >= window else { return 0 }
+        let w = h.suffix(window)
+        let mags = w.map { simd_length($0) }
+        let S = max(10, mags.sorted()[(window - 1) / 2])   // the lower median, as torch's
+        var x = [Float](); x.reserveCapacity(window * 4 + 1)
+        for v in w {
+            let s = v / S
+            x.append(Float(min(8, max(-8, s.x)))); x.append(Float(min(8, max(-8, s.y)))); x.append(Float(min(8, max(-8, s.z))))
+        }
+        for m in mags { x.append(Float(min(4, max(-4, log(max(m, 1) / S))))) }
+        x.append(Float(log1p(S / 10) / 6))
+        let o = net.forward(x)
+        return 1 / (1 + exp(-Double(o[0])))
+    }
+}

package/ios/MagnetKitModule.swift

@@ -0,0 +1,147 @@
+import ExpoModulesCore
+import UIKit
+
+/// MagnetKit for React Native: runs `MagnetSource` (the magnet model) every
+/// display frame while JavaScript listens, and sends each reading and each
+/// gesture as an event. Positions are window points, as React Native lays
+/// out. The model (Magnet.mfxl) comes from the app bundle.
+public class MagnetKitModule: Module {
+  private var ticker: FrameTicker?
+  private var gestureId: UUID?
+  private static let magnetKey = "MagnetKitRN.magnet"
+
+  public func definition() -> ModuleDefinition {
+    Name("MagnetKit")
+
+    Events("onFrame", "onGesture")
+
+    Function("isAvailable") { MagnetSource.shared.isSensorAvailable }
+
+    Function("hasModel") { MagnetModel.bundled != nil }
+
+    AsyncFunction("start") { self.start() }.runOnQueue(.main)
+
+    AsyncFunction("stop") { self.stop() }.runOnQueue(.main)
+
+    AsyncFunction("zero") { MagnetSource.shared.calibrate() }.runOnQueue(.main)
+
+    AsyncFunction("setMagnet") { (face: Int, strength: Double, x: Double, y: Double) in
+      UserDefaults.standard.set([Double(face), strength, x, y], forKey: Self.magnetKey)
+      self.applyMagnet()
+    }.runOnQueue(.main)
+
+    AsyncFunction("clearMagnet") {
+      UserDefaults.standard.removeObject(forKey: Self.magnetKey)
+      self.applyMagnet()
+    }.runOnQueue(.main)
+
+    Function("getMagnet") { () -> [String: Any]? in
+      guard let m = Self.storedMagnet() else { return nil }
+      return ["face": m.face, "strength": m.strength, "sensor": ["x": m.sensor.x, "y": m.sensor.y]]
+    }
+
+    Function("screen") { () -> [String: Any] in
+      let b = UIScreen.main.bounds
+      return ["width": b.width, "height": b.height, "pointsPerCm": MagnetSource.shared.config.pointsPerCm]
+    }
+
+    OnDestroy {
+      DispatchQueue.main.async { self.stop() }
+    }
+  }
+
+  private static func storedMagnet() -> (face: Int, strength: Double, sensor: CGPoint)? {
+    guard let a = UserDefaults.standard.array(forKey: magnetKey) as? [Double], a.count == 4 else { return nil }
+    return (a[0] < 0 ? -1 : 1, a[1], CGPoint(x: a[2], y: a[3]))
+  }
+
+  /// The calibrated magnet, or a guess (sensor near the top centre, face and
+  /// strength unknown) so the locator still answers before a calibration.
+  private func applyMagnet() {
+    let s = MagnetSource.shared
+    if let m = Self.storedMagnet() {
+      s.config.magnetFace = m.face
+      s.config.magnetStrength = m.strength
+      s.config.sensorPosition = m.sensor
+    } else {
+      s.config.magnetFace = nil
+      s.config.magnetStrength = nil
+      s.config.sensorPosition = CGPoint(x: UIScreen.main.bounds.midX, y: 1.1 * s.config.pointsPerCm)
+    }
+    s.config.locatorEnabled = true
+  }
+
+  private func start() {
+    guard ticker == nil else { return }
+    let s = MagnetSource.shared
+    applyMagnet()
+    s.attach()
+    gestureId = s.addGestureHandler { [weak self] g in self?.sendEvent("onGesture", Self.gesture(g)) }
+    ticker = FrameTicker { [weak self] now in self?.tick(now) }
+  }
+
+  private func stop() {
+    guard let t = ticker else { return }
+    t.invalidate()
+    ticker = nil
+    if let id = gestureId { MagnetSource.shared.removeGestureHandler(id) }
+    gestureId = nil
+    MagnetSource.shared.detach()
+  }
+
+  private func tick(_ now: TimeInterval) {
+    let s = MagnetSource.shared
+    if let scene = UIApplication.shared.connectedScenes.first(where: { $0.activationState == .foregroundActive }) as? UIWindowScene {
+      s.orientation = scene.interfaceOrientation
+    }
+    let r = s.reading(now: now)
+    sendEvent("onFrame", [
+      "t": now * 1000,
+      "pos": r.screenPosition.map { ["x": $0.x, "y": $0.y] },
+      "spread": r.screenSpread,
+      "height": r.height,
+      "presence": r.presence,
+      "pull": r.pull,
+      "strength": r.strength,
+      "delta": [r.delta.x, r.delta.y, r.delta.z],
+      "toward": ["x": r.toward.dx, "y": r.toward.dy],
+      "polarity": r.polarity,
+      "distance": r.distance.isFinite ? r.distance : nil,
+      "approachSpeed": r.approachSpeed,
+      "tooClose": r.tooClose,
+      "calibrating": r.calibrating,
+      "zeroed": r.calibrated,
+    ])
+  }
+
+  private static func gesture(_ g: MagnetGesture) -> [String: Any?] {
+    switch g {
+    case .tap(let at): return ["g": "tap", "at": at.map { ["x": $0.x, "y": $0.y] }]
+    case .push(let speed): return ["g": "push", "speed": speed]
+    case .pullAway(let speed): return ["g": "pullAway", "speed": speed]
+    case .swipe(let d, let speed): return ["g": "swipe", "dir": ["x": d.dx, "y": d.dy], "speed": speed]
+    }
+  }
+}
+
+/// A display link with a closure (CADisplayLink needs an NSObject target).
+private final class FrameTicker: NSObject {
+  private var link: CADisplayLink?
+  private let onFrame: (TimeInterval) -> Void
+
+  init(_ onFrame: @escaping (TimeInterval) -> Void) {
+    self.onFrame = onFrame
+    super.init()
+    let l = CADisplayLink(target: self, selector: #selector(step))
+    l.preferredFrameRateRange = CAFrameRateRange(minimum: 30, maximum: 60, preferred: 60)
+    l.add(to: .main, forMode: .common)
+    link = l
+  }
+
+  @objc private func step(_ l: CADisplayLink) { onFrame(l.timestamp) }
+
+  func invalidate() {
+    link?.invalidate()
+    link = nil
+  }
+}

package/ios/MagnetKitRN.podspec

@@ -0,0 +1,26 @@
+require 'json'
+
+package = JSON.parse(File.read(File.join(__dir__, '..', 'package.json')))
+
+Pod::Spec.new do |s|
+  s.name           = 'MagnetKitRN'
+  s.version        = package['version']
+  s.summary        = package['description']
+  s.license        = package['license']
+  s.author         = package['author']
+  s.homepage       = package['homepage']
+  s.platforms      = { :ios => '15.1' }
+  s.swift_version  = '5.9'
+  s.source         = { git: 'https://github.com/Jakubantalik/Libraries.dev.git' }
+  s.static_framework = true
+
+  s.dependency 'ExpoModulesCore'
+
+  s.pod_target_xcconfig = {
+    'DEFINES_MODULE' => 'YES',
+  }
+
+  # MagnetKit's Swift sources (copied in by scripts/sync.mjs) and the module.
+  # The model, Magnet.mfxl, is the app's: see the config plugin.
+  s.source_files = '*.swift', 'MagnetKit/*.swift'
+end

package/package.json

@@ -1,6 +1,56 @@
 {
   "name": "react-native-magnetkit",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "Magnetic UI for React Native: a real magnet beside the phone pulls your interface. MagnetKit (the on-device magnet model) as an Expo module for iOS and Android.",
+  "main": "build/index.js",
+  "types": "build/index.d.ts",
+  "files": [
+    "build",
+    "src",
+    "ios",
+    "android/build.gradle",
+    "android/src",
+    "plugin",
+    "app.plugin.js",
+    "expo-module.config.json",
+    "LICENSE",
+    "README.md"
+  ],
+  "scripts": {
+    "sync": "node scripts/sync.mjs",
+    "build": "node scripts/sync.mjs && tsc",
+    "typecheck": "node scripts/sync.mjs && tsc --noEmit",
+    "prepare": "node scripts/sync.mjs",
+    "prepack": "npm run build"
+  },
+  "peerDependencies": {
+    "expo": ">=52.0.0",
+    "react": ">=18.0.0",
+    "react-native": ">=0.76.0"
+  },
+  "devDependencies": {
+    "@types/react": "~19.3.0",
+    "expo": "~58.0.19",
+    "react": "19.3.0",
+    "react-native": "0.88.0",
+    "typescript": "~6.0.3"
+  },
+  "keywords": [
+    "react-native",
+    "expo",
+    "magnet",
+    "magnetometer",
+    "magnetic ui",
+    "ios",
+    "android",
+    "gesture"
+  ],
+  "author": "Jakub Antalik",
+  "license": "MIT",
+  "homepage": "https://libraries.dev/magnetic",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Jakubantalik/Libraries.dev.git",
+    "directory": "packages/metal-fx/ports/react-native/magnetkit-native"
+  }
+}

package/plugin/withMagnetKit.js

@@ -0,0 +1,60 @@
+// Expo config plugin: puts the magnet model (Magnet.mfxl, downloaded from
+// libraries.dev under the Libraries.dev Model License) into the app: the iOS
+// app target's resources and Android's assets, where MagnetKit loads it.
+//
+//   "plugins": [["react-native-magnetkit", { "model": "./assets/Magnet.mfxl" }]]
+
+const fs = require("fs");
+const path = require("path");
+const { withDangerousMod, withXcodeProject, IOSConfig } = require("expo/config-plugins");
+
+const FILE = "Magnet.mfxl";
+
+function modelPath(config, props) {
+  const p = path.resolve(config._internal?.projectRoot ?? process.cwd(), props?.model ?? `./assets/${FILE}`);
+  if (!fs.existsSync(p)) {
+    throw new Error(
+      `react-native-magnetkit: no model at ${p}. Download Magnet.mfxl from https://libraries.dev/magnetic ` +
+        `and point the plugin at it: ["react-native-magnetkit", { "model": "./assets/Magnet.mfxl" }].`,
+    );
+  }
+  return p;
+}
+
+function withMagnetModelAndroid(config, props) {
+  return withDangerousMod(config, [
+    "android",
+    (c) => {
+      const dir = path.join(c.modRequest.platformProjectRoot, "app", "src", "main", "assets");
+      fs.mkdirSync(dir, { recursive: true });
+      fs.copyFileSync(modelPath(c, props), path.join(dir, FILE));
+      return c;
+    },
+  ]);
+}
+
+function withMagnetModelIos(config, props) {
+  config = withDangerousMod(config, [
+    "ios",
+    (c) => {
+      const name = IOSConfig.XcodeUtils.getProjectName(c.modRequest.projectRoot);
+      fs.copyFileSync(modelPath(c, props), path.join(c.modRequest.platformProjectRoot, name, FILE));
+      return c;
+    },
+  ]);
+  return withXcodeProject(config, (c) => {
+    const project = c.modResults;
+    const name = IOSConfig.XcodeUtils.getProjectName(c.modRequest.projectRoot);
+    const filepath = path.join(name, FILE);
+    if (!project.hasFile(filepath)) {
+      IOSConfig.XcodeUtils.addResourceFileToGroup({ filepath, groupName: name, project, isBuildFile: true, verbose: false });
+    }
+    return c;
+  });
+}
+
+module.exports = function withMagnetKit(config, props = {}) {
+  config = withMagnetModelAndroid(config, props);
+  config = withMagnetModelIos(config, props);
+  return config;
+};

package/src/MagnetCalibration.tsx

@@ -0,0 +1,87 @@
+/* Calibration: the magnet held still over five rings, fitted to its face,
+   strength and where the sensor sits, kept on the phone across launches.
+   `calibrate()` runs it headless; <MagnetCalibration> is a ready-made
+   full-screen version. */
+
+import { useEffect, useRef, useState } from "react";
+import { Dimensions, Modal, Pressable, StyleSheet, Text, View } from "react-native";
+import { runCalibration, type CalibrationOptions, type CalibrationState } from "./core/calibration-core";
+import { Magnet } from "./magnet";
+
+/** Runs a calibration; resolves with the fit (already kept by the phone), or null. */
+export function calibrate(opts: CalibrationOptions = {}) {
+  const screen = Magnet.screen();
+  return runCalibration(
+    {
+      zero: () => { Magnet.zero(); },
+      addFrameListener: (l) => Magnet.addFrameListener(l),
+      setMagnet: (fit) => { Magnet.setMagnet(fit); },
+      viewport: () => {
+        const w = Dimensions.get("window");
+        return { x: w.width, y: w.height };
+      },
+      // The window is the screen (edge to edge), as the readings measure it.
+      toScreen: (p) => p,
+      screenSize: () => ({ x: screen.width, y: screen.height }),
+      pointsPerCm: screen.pointsPerCm,
+    },
+    opts,
+  );
+}
+
+export type MagnetCalibrationProps = {
+  visible: boolean;
+  /** true when a calibration was kept. */
+  onClose?: (ok: boolean) => void;
+};
+
+/** A ready-made calibration screen: five rings, full screen, cancel button. */
+export function MagnetCalibration({ visible, onClose }: MagnetCalibrationProps) {
+  const [s, setS] = useState<CalibrationState | null>(null);
+  const closeRef = useRef(onClose);
+  closeRef.current = onClose;
+  const cancelRef = useRef<() => void>(() => {});
+
+  useEffect(() => {
+    if (!visible) return;
+    const run = calibrate({ onUpdate: setS });
+    cancelRef.current = run.cancel;
+    run.promise.then((fit) => closeRef.current?.(!!fit));
+    return () => run.cancel();
+  }, [visible]);
+
+  const open = visible && !!s && s.phase !== "done" && s.phase !== "cancelled";
+  const spot = s?.spot ?? null;
+  const win = Dimensions.get("window");
+  const msg = !s ? "" : s.phase === "zeroing" ? "Keep the magnet away for a moment…"
+    : s.phase === "failed" ? "That didn't fit. Try again, holding the magnet still over each ring."
+    : `Ring ${s.index + 1} of ${s.total}: hold the magnet 1–2 cm above it and keep it still.`;
+  const diag = !s ? "" : s.field == null ? "No readings yet." : `${s.field.toFixed(0)} µT${s.zeroing ? " · zeroing" : ""}`;
+
+  return (
+    <Modal visible={open} transparent animationType="fade" statusBarTranslucent navigationBarTranslucent onRequestClose={() => cancelRef.current()}>
+      <View style={styles.root}>
+        {spot && (
+          <View style={[styles.ring, { left: spot.x - 36, top: spot.y - 36 }]}>
+            <View style={[styles.fill, { transform: [{ scale: s?.progress ?? 0 }] }]} />
+          </View>
+        )}
+        <Text style={[styles.msg, { top: spot ? (spot.y < win.height / 2 ? spot.y + 64 : spot.y - 120) : win.height * 0.4 }]}>{msg}</Text>
+        <Text style={styles.diag}>{diag}</Text>
+        <Pressable onPress={() => cancelRef.current()} style={styles.cancel} accessibilityRole="button">
+          <Text style={styles.cancelText}>Cancel</Text>
+        </Pressable>
+      </View>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: { flex: 1, backgroundColor: "rgba(0,0,0,0.94)" },
+  ring: { position: "absolute", width: 72, height: 72, borderRadius: 36, borderWidth: 3, borderColor: "#fff" },
+  fill: { position: "absolute", left: 7, top: 7, right: 7, bottom: 7, borderRadius: 30, backgroundColor: "#4f9cff" },
+  msg: { position: "absolute", left: 16, right: 16, color: "#fff", fontSize: 16, lineHeight: 24, fontWeight: "500", textAlign: "center" },
+  diag: { position: "absolute", left: 16, right: 16, bottom: 88, color: "#9a9a9a", fontSize: 13, lineHeight: 18, textAlign: "center" },
+  cancel: { position: "absolute", alignSelf: "center", bottom: 32, height: 40, paddingHorizontal: 18, borderRadius: 999, backgroundColor: "#2a2a2a", justifyContent: "center" },
+  cancelText: { color: "#fff", fontSize: 14, fontWeight: "500" },
+});

package/src/MagnetKitModule.ts

@@ -0,0 +1,42 @@
+import { NativeModule, requireNativeModule } from "expo";
+import type { MagnetFrame, Pt } from "./core/types";
+
+/** A reading as the native side sends it: the web kit's frame and a little more. */
+export type NativeMagnetFrame = MagnetFrame & {
+  /** Unit vector, screen axes, toward the magnet (the bearing without the locator). */
+  toward: Pt;
+  /** +1 attracts, −1 repels. */
+  polarity: number;
+  /** Rough distance to the magnet, cm; null when none is near. */
+  distance: number | null;
+  /** How fast the magnet comes toward the phone, cm/s (negative: away). */
+  approachSpeed: number;
+  /** The phone has a zero to measure from. */
+  zeroed: boolean;
+};
+
+export type NativeMagnetGesture =
+  | { g: "tap"; at: Pt | null }
+  | { g: "push" | "pullAway"; speed: number }
+  | { g: "swipe"; dir: Pt; speed: number };
+
+export type StoredMagnet = { face: 1 | -1; strength: number; sensor: Pt };
+
+type Events = {
+  onFrame(f: NativeMagnetFrame): void;
+  onGesture(g: NativeMagnetGesture): void;
+};
+
+declare class MagnetKitNative extends NativeModule<Events> {
+  isAvailable(): boolean;
+  hasModel(): boolean;
+  start(): Promise<void>;
+  stop(): Promise<void>;
+  zero(): Promise<void>;
+  setMagnet(face: number, strength: number, x: number, y: number): Promise<void>;
+  clearMagnet(): Promise<void>;
+  getMagnet(): StoredMagnet | null;
+  screen(): { width: number; height: number; pointsPerCm: number };
+}
+
+export default requireNativeModule<MagnetKitNative>("MagnetKit");

package/src/MagneticView.tsx

@@ -0,0 +1,153 @@
+/* The Magnetic UI pull for React Native: every <MagneticView> is a small
+   rigid body on a stiff damped string to its place, pulled toward a magnet
+   held beside the phone; bodies collide, rest against the screen's rounded
+   edge, and come back when it leaves. One field for the app, run on the JS
+   thread; transforms are set through Animated values, without re-renders. */
+
+import { forwardRef, useEffect, useImperativeHandle, useRef, type ComponentRef, type ForwardRefExoticComponent, type ReactNode, type RefAttributes } from "react";
+import { AccessibilityInfo, Animated, Dimensions, StyleSheet, View, type ViewProps } from "react-native";
+import { MagneticField, type Box } from "./core/field";
+import { Magnet } from "./magnet";
+
+export type ViewRef = ComponentRef<typeof View>;
+
+type Body = {
+  view: { current: ViewRef | null };
+  x: Animated.Value;
+  y: Animated.Value;
+  r: Animated.Value;
+  corner: number;
+  box: Box | null;
+};
+
+const bodies = new Map<string, Body>();
+let field: MagneticField | null = null;
+let raf = 0;
+let offFrames: (() => void) | null = null;
+let reduceMotion = false;
+let lastMeasure = 0;
+let face = 1;
+let faceAt = -1;
+let nextId = 0;
+
+AccessibilityInfo.isReduceMotionEnabled?.().then((v) => (reduceMotion = v)).catch(() => {});
+AccessibilityInfo.addEventListener?.("reduceMotionChanged", (v) => (reduceMotion = v));
+
+/** The shared field, to tune (stiffness, damping, force, reach, screenCorner…). */
+export function getMagneticField(): MagneticField {
+  if (!field) {
+    field = new MagneticField();
+    field.screenCorner = 44;
+  }
+  return field;
+}
+
+function measure(id: string) {
+  const b = bodies.get(id);
+  const p = field?.parts.get(id);
+  // Measure only at rest: the transform would move the box.
+  if (!b?.view.current || (p && !p.resting)) return;
+  b.view.current.measureInWindow((x, y, w, h) => {
+    if (w > 0 && h > 0) b.box = { left: x, top: y, right: x + w, bottom: y + h };
+  });
+}
+
+function tick() {
+  raf = requestAnimationFrame(tick);
+  const f = getMagneticField();
+  const now = performance.now() / 1000;
+  // Layout moves without telling us (scrolling, keyboard): measure resting bodies now and then.
+  if (now - lastMeasure > 0.5 && !f.active) {
+    lastMeasure = now;
+    bodies.forEach((_, id) => measure(id));
+  }
+  if (now - faceAt > 1) {
+    faceAt = now;
+    face = Magnet.getMagnet()?.face ?? 1;
+  }
+  for (const [id, b] of bodies) if (b.box) f.setHome(id, b.box, b.corner);
+  const frame = Magnet.frame;
+  const win = Dimensions.get("window");
+  const screenBox: Box = { left: 0, top: 0, right: win.width, bottom: win.height };
+  if (frame && !reduceMotion && performance.now() - Magnet.frameAt < 500) f.step(frame, now, screenBox, face);
+  else f.relax(now);
+  for (const [id, b] of bodies) {
+    const p = f.parts.get(id);
+    if (!p) continue;
+    if (p.resting) {
+      b.x.setValue(0); b.y.setValue(0); b.r.setValue(0);
+    } else {
+      b.x.setValue(p.ox); b.y.setValue(p.oy); b.r.setValue(p.angle);
+    }
+  }
+}
+
+function register(b: Body) {
+  const id = String(nextId++);
+  bodies.set(id, b);
+  if (bodies.size === 1) {
+    offFrames = Magnet.addFrameListener(() => {});
+    raf = requestAnimationFrame(tick);
+  }
+  return {
+    id,
+    remove() {
+      bodies.delete(id);
+      field?.parts.delete(id);
+      if (bodies.size === 0) {
+        cancelAnimationFrame(raf);
+        offFrames?.();
+        offFrames = null;
+      }
+    },
+  };
+}
+
+export type MagneticViewProps = ViewProps & {
+  /** Corner radius used for collisions; defaults to the style's borderRadius. */
+  corner?: number;
+  /** Off: the view stays put. */
+  enabled?: boolean;
+  children?: ReactNode;
+};
+
+/** A View the magnet pulls. Put several on screen; they collide with each other. */
+export const MagneticView: ForwardRefExoticComponent<MagneticViewProps & RefAttributes<ViewRef>> = forwardRef<ViewRef, MagneticViewProps>(function MagneticView(
+  { corner, enabled = true, style, onLayout, children, ...rest },
+  forwarded,
+) {
+  const view = useRef<ViewRef | null>(null);
+  useImperativeHandle(forwarded, () => view.current as ViewRef);
+  const anim = useRef({ x: new Animated.Value(0), y: new Animated.Value(0), r: new Animated.Value(0) }).current;
+  const flat = StyleSheet.flatten(style) ?? {};
+  const radius = corner ?? (typeof flat.borderRadius === "number" ? flat.borderRadius : 8);
+  const reg = useRef<{ id: string; remove(): void } | null>(null);
+
+  useEffect(() => {
+    if (!enabled) return;
+    const r = register({ view, x: anim.x, y: anim.y, r: anim.r, corner: radius, box: null });
+    reg.current = r;
+    measure(r.id);
+    return () => {
+      r.remove();
+      reg.current = null;
+      anim.x.setValue(0); anim.y.setValue(0); anim.r.setValue(0);
+    };
+  }, [enabled, radius, anim]);
+
+  const rotate = anim.r.interpolate({ inputRange: [-1, 1], outputRange: ["-1rad", "1rad"] });
+  const own = Array.isArray(flat.transform) ? flat.transform : [];
+  return (
+    <Animated.View
+      ref={view}
+      {...rest}
+      style={[style, { transform: [{ translateX: anim.x }, { translateY: anim.y }, { rotate }, ...own] }]}
+      onLayout={(e) => {
+        if (reg.current) measure(reg.current.id);
+        onLayout?.(e);
+      }}
+    >
+      {children}
+    </Animated.View>
+  );
+});