Skip to content
react-native-midi-api

Getting Started

react-native-midi-api is a native Web MIDI API polyfill for React Native. It implements the standard requestMIDIAccess surface on iOS (CoreMIDI), Android (android.media.midi), and Web (browser passthrough) so your app talks to USB MIDI hardware with one portable API.

It is a drop-in replacement for @motiz88/react-native-midi.

Install

Section titled “Install”
Terminal window
npx expo install react-native-midi-api

This is an Expo module. In a managed or prebuild app it autolinks with no extra steps. In a bare React Native project, run installing Expo modules once, then npx pod-install for iOS.

Peer dependencies — expo, react, react-native must be present in the consuming app.

Quickstart

Section titled “Quickstart”
import { requestMIDIAccess } from "react-native-midi-api";
import type { MIDIMessageEvent, MIDIConnectionEvent } from "react-native-midi-api";


async function main() {
  // 1. Request MIDI access (no SysEx by default).
  const midi = await requestMIDIAccess({ sysex: false });


  // 2. Enumerate connected inputs.
  for (const input of midi.inputs.values()) {
    console.log("Input:", input.name);
    input.onmidimessage = (event: MIDIMessageEvent) => {
      const [status, note, velocity] = event.data;
      console.log("MIDI in:", status.toString(16), note, velocity);
    };
  }


  // 3. Send a Note On (channel 1, note 64, velocity 127) to the first output.
  const output = [...midi.outputs.values()][0];
  output?.send([0x90, 0x40, 0x7f]);


  // 4. Hot-plug detection.
  midi.onstatechange = (event: MIDIConnectionEvent) => {
    console.log(event.port?.name, "→", event.port?.state);
  };
}


main();

Next steps

Section titled “Next steps”