munim-metalkit

Metal compute, runtime shaders, textures, and an MTKView for Expo and React Native on iOS.

iOS

Overview

munim-metalkit exposes a small, working slice of Apple's Metal to React Native and Expo apps: compile Metal Shading Language at runtime, run compute kernels on your own buffers and textures, and host an MTKView you can screenshot. It is iOS-only. Since 2.0, everything that is not implemented (meshes, animations, scenes, and the 2D canvas API) rejects with ERR_NOT_IMPLEMENTED instead of silently succeeding, and on Android and web every async method rejects with ERR_METAL_UNAVAILABLE.

Installation

Terminal

npx expo install munim-metalkit

For bare React Native without Expo: npm install munim-metalkit

Usage

Basic usage

import React from 'react'
import { View } from 'react-native'
import MunimMetalkit, { MunimMetalkitView } from 'munim-metalkit'

export default function App() {
  return (
    <View style={{ flex: 1 }}>
      <MunimMetalkitView
        style={{ flex: 1 }}
        preferredFramesPerSecond={60}
        clearColor={{ red: 0.2, green: 0.3, blue: 0.8, alpha: 1.0 }}
        onLoad={() => console.log('MetalKit View Loaded')}
        onRender={({ nativeEvent }) => {
          console.log(`Frame time: ${nativeEvent.frameTime}ms`)
        }}
        onError={({ nativeEvent }) => {
          console.error(`MetalKit Error: ${nativeEvent.error}`)
        }}
      />
    </View>
  )
}

Requirements

Expo SDK 57 (React Native 0.86, New Architecture) and iOS 16.4+, in a development build. Expo Go does not include this module. Android and web render an empty view and reject every async method.

Platform notes

iOS

iOS only. Supported on iOS 16.4+ with Expo SDK 57: runtime shaders, compute, buffers, textures, the MTKView, view control, screenshots, and performance info.

Features

•Runtime shaders - Compile Metal Shading Language source at runtime, with compiler errors reported
•Compute - Create compute pipelines and dispatch kernels on your own buffers and textures
•Buffers - Create, fill, update, and read back buffers in Shared or Private storage
•Textures - Create, update, read, load from URL or data, and mipmap 2D and 2D-array textures
•MTKView - MunimMetalkitView with frame rate, clear color, pixel formats, and onLoad, onRender, and onError events
•View control - Start, stop, pause, resume, and redraw every mounted view from the module
•Screenshots - Capture real drawable pixels as a base64 PNG or a file:// PNG
•Performance - GPU times, frame times, and device memory from getPerformanceInfo
•Clear errors - Unimplemented APIs reject with ERR_NOT_IMPLEMENTED instead of returning fake ids
•TypeScript support - Full TypeScript definitions included

For the latest API reference, usage examples, and troubleshooting, visit the GitHub repository and npm package page.