From c9ab84f1af6ee32085dfca01041cc0c93c5a60c6 Mon Sep 17 00:00:00 2001
From: Maciej Makowski <120780663+maciejmakowski2003@users.noreply.github.com>
Date: Tue, 7 Jan 2025 12:54:57 +0100
Subject: [PATCH] Fix/jsi  and ts bugs (#244)

* feat: added host functions caching

* refactor: removed unused components and moved common files to common example folders and format

* fix: fixed metronome, removed unused files and moved common files

* fix: back to previous version of hihat

* fix: fixed start/stop mechanism bug

---------

Co-authored-by: Maciej Makowski <maciej.makowski@swmansion.com>
---
 apps/common-app/src/components/Step.tsx       |  46 ------
 apps/common-app/src/components/Steps.tsx      |  56 -------
 apps/common-app/src/components/index.ts       |   2 -
 .../src/examples/DrumMachine/DrumMachine.tsx  |  10 +-
 .../src/examples/DrumMachine/Grid.tsx         |   2 +-
 .../examples/DrumMachine/NotesHighlight.tsx   |   2 +-
 .../src/examples/DrumMachine/PatternShape.tsx |   2 +-
 .../src/examples/DrumMachine/PlayButton.tsx   |   2 +-
 .../src/examples/DrumMachine/constants.ts     |   2 +-
 .../src/examples/DrumMachine/instruments.ts   |   2 +-
 .../src/examples/DrumMachine/presets.ts       |   2 +-
 .../src/examples/DrumMachine/types.ts         |  39 -----
 .../src/examples/DrumMachine/useGestures.ts   |   2 +-
 .../src/examples/Metronome/Metronome.tsx      | 155 ++++++------------
 .../src/examples/Metronome/patterns.ts        | 102 ++++++++++++
 .../src/examples/SharedUtils/Scheduler.ts     |  79 ---------
 .../src/examples/SharedUtils/index.ts         |   6 -
 apps/common-app/src/types.ts                  |  48 +++++-
 .../soundEngines/Clap.ts                      |   0
 .../soundEngines/HiHat.ts                     |   0
 .../soundEngines/Kick.ts                      |   0
 .../soundEngines/MetronomeSound.ts            |   0
 .../soundEngines/SoundEngine.ts               |   0
 .../DrumMachine => utils}/usePlayer.tsx       |  15 +-
 .../common/cpp/core/AudioBufferSourceNode.cpp |   2 +
 .../cpp/core/AudioScheduledSourceNode.cpp     |   8 +
 .../cpp/core/AudioScheduledSourceNode.h       |   5 +-
 .../common/cpp/core/OscillatorNode.cpp        |   2 +
 .../common/cpp/jsi/JsiHostObject.cpp          |  65 ++++----
 .../common/cpp/jsi/JsiHostObject.h            |  18 +-
 .../common/cpp/jsi/RuntimeAwareCache.h        |  57 +++++++
 .../cpp/jsi/RuntimeLifecycleMonitor.cpp       |  61 +++++++
 .../common/cpp/jsi/RuntimeLifecycleMonitor.h  |  32 ++++
 33 files changed, 429 insertions(+), 395 deletions(-)
 delete mode 100644 apps/common-app/src/components/Step.tsx
 delete mode 100644 apps/common-app/src/components/Steps.tsx
 delete mode 100644 apps/common-app/src/examples/DrumMachine/types.ts
 create mode 100644 apps/common-app/src/examples/Metronome/patterns.ts
 delete mode 100644 apps/common-app/src/examples/SharedUtils/Scheduler.ts
 delete mode 100644 apps/common-app/src/examples/SharedUtils/index.ts
 rename apps/common-app/src/{examples/SharedUtils => utils}/soundEngines/Clap.ts (100%)
 rename apps/common-app/src/{examples/SharedUtils => utils}/soundEngines/HiHat.ts (100%)
 rename apps/common-app/src/{examples/SharedUtils => utils}/soundEngines/Kick.ts (100%)
 rename apps/common-app/src/{examples/SharedUtils => utils}/soundEngines/MetronomeSound.ts (100%)
 rename apps/common-app/src/{examples/SharedUtils => utils}/soundEngines/SoundEngine.ts (100%)
 rename apps/common-app/src/{examples/DrumMachine => utils}/usePlayer.tsx (89%)
 create mode 100644 packages/react-native-audio-api/common/cpp/jsi/RuntimeAwareCache.h
 create mode 100644 packages/react-native-audio-api/common/cpp/jsi/RuntimeLifecycleMonitor.cpp
 create mode 100644 packages/react-native-audio-api/common/cpp/jsi/RuntimeLifecycleMonitor.h

diff --git a/apps/common-app/src/components/Step.tsx b/apps/common-app/src/components/Step.tsx
deleted file mode 100644
index 3487e90f..00000000
--- a/apps/common-app/src/components/Step.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { FC } from 'react';
-import { StyleSheet, Pressable } from 'react-native';
-
-import { colors, layout } from '../styles';
-
-interface StepProps {
-  id: number;
-  active: boolean;
-  onClick: (idx: number) => void;
-}
-
-const Step: FC<StepProps> = (props) => {
-  const { id, active, onClick } = props;
-
-  return (
-    <Pressable
-      key={id}
-      onPress={() => onClick(id)}
-      style={({ pressed }) => [
-        styles.step,
-        pressed ? styles.pressed : active ? styles.active : styles.inactive,
-      ]}
-    />
-  );
-};
-
-const size = 30;
-
-const styles = StyleSheet.create({
-  step: {
-    width: size,
-    height: size,
-    margin: layout.spacing / 2,
-  },
-  pressed: {
-    backgroundColor: `${colors.main}88`,
-  },
-  active: {
-    backgroundColor: colors.main,
-  },
-  inactive: {
-    backgroundColor: colors.white,
-  },
-});
-
-export default Step;
diff --git a/apps/common-app/src/components/Steps.tsx b/apps/common-app/src/components/Steps.tsx
deleted file mode 100644
index ed266467..00000000
--- a/apps/common-app/src/components/Steps.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { FC } from 'react';
-import { View, StyleSheet, Text } from 'react-native';
-
-import Step from './Step';
-import { layout } from '../styles';
-import { SoundName } from '../types';
-interface StepsProps {
-  name: SoundName;
-  steps: boolean[];
-  handleStepClick: (name: SoundName, idx: number) => void;
-}
-
-const Steps: FC<StepsProps> = (props) => {
-  const { name, steps, handleStepClick } = props;
-
-  const handleClick = (idx: number) => {
-    handleStepClick(name, idx);
-  };
-
-  return (
-    <View style={styles.container}>
-      <Text style={styles.text}>{name}</Text>
-      <View style={styles.steps}>
-        {steps.map((active, idx) => (
-          <Step
-            key={idx}
-            id={idx}
-            active={active}
-            onClick={() => handleClick(idx)}
-          />
-        ))}
-      </View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    display: 'flex',
-    flexDirection: 'row',
-    width: '100%',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-  },
-  steps: {
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  text: {
-    margin: layout.spacing,
-    textTransform: 'capitalize',
-  },
-});
-
-export default Steps;
diff --git a/apps/common-app/src/components/index.ts b/apps/common-app/src/components/index.ts
index 243cd2eb..4cae6427 100644
--- a/apps/common-app/src/components/index.ts
+++ b/apps/common-app/src/components/index.ts
@@ -1,6 +1,4 @@
 export { default as Icon } from './Icon';
-export { default as Step } from './Step';
-export { default as Steps } from './Steps';
 export { default as Button } from './Button';
 export { default as Slider } from './Slider';
 export { default as Spacer } from './Spacer';
diff --git a/apps/common-app/src/examples/DrumMachine/DrumMachine.tsx b/apps/common-app/src/examples/DrumMachine/DrumMachine.tsx
index e179a73f..eca80c18 100644
--- a/apps/common-app/src/examples/DrumMachine/DrumMachine.tsx
+++ b/apps/common-app/src/examples/DrumMachine/DrumMachine.tsx
@@ -6,16 +6,19 @@ import { LayoutChangeEvent, StyleSheet, View } from 'react-native';
 
 import { colors } from '../../styles';
 import { Select, Slider, Spacer, Container } from '../../components';
-import { Kick, Clap, HiHat } from '../SharedUtils';
+import Kick from '../../utils/soundEngines/Kick';
+import Clap from '../../utils/soundEngines/Clap';
+import HiHat from '../../utils/soundEngines/HiHat';
 
-import { InstrumentName, Pattern, type XYWHRect } from './types';
+import { InstrumentName, Pattern, type XYWHRect } from '../../types';
 import { size, initialBpm } from './constants';
 import NotesHighlight from './NotesHighlight';
 import PatternShape from './PatternShape';
 import useGestures from './useGestures';
 import PlayButton from './PlayButton';
-import usePlayer from './usePlayer';
+import usePlayer from '../../utils/usePlayer';
 import presets from './presets';
+import { numBeats } from './constants';
 import Grid from './Grid';
 
 const defaultPreset = 'Empty';
@@ -54,6 +57,7 @@ const DrumMachine: React.FC = () => {
     bpm,
     patterns,
     notesPerBeat: 2,
+    numBeats,
     setup: setupPlayer,
   });
 
diff --git a/apps/common-app/src/examples/DrumMachine/Grid.tsx b/apps/common-app/src/examples/DrumMachine/Grid.tsx
index 69108aec..b480d400 100644
--- a/apps/common-app/src/examples/DrumMachine/Grid.tsx
+++ b/apps/common-app/src/examples/DrumMachine/Grid.tsx
@@ -5,7 +5,7 @@ import { Line, Circle, Paint, vec } from '@shopify/react-native-skia';
 import { colors } from '../../styles';
 import { numBeats, cPoint, maxSize, buttonRadius } from './constants';
 import { getAngle, getPointCX, getPointCY } from './utils';
-import type { Instrument } from './types';
+import type { Instrument } from '../../types';
 import instruments from './instruments';
 
 const points = Array(numBeats).fill(0);
diff --git a/apps/common-app/src/examples/DrumMachine/NotesHighlight.tsx b/apps/common-app/src/examples/DrumMachine/NotesHighlight.tsx
index 960e8116..b6bfd225 100644
--- a/apps/common-app/src/examples/DrumMachine/NotesHighlight.tsx
+++ b/apps/common-app/src/examples/DrumMachine/NotesHighlight.tsx
@@ -2,7 +2,7 @@ import React, { memo } from 'react';
 import { Circle, Paint } from '@shopify/react-native-skia';
 import { SharedValue, useDerivedValue } from 'react-native-reanimated';
 
-import { Instrument, PlayingInstruments } from './types';
+import { Instrument, PlayingInstruments } from '../../types';
 import { cPoint, buttonRadius } from './constants';
 import { getPointCX, getPointCY } from './utils';
 import instruments from './instruments';
diff --git a/apps/common-app/src/examples/DrumMachine/PatternShape.tsx b/apps/common-app/src/examples/DrumMachine/PatternShape.tsx
index 2bd1f6c5..5efa9f8b 100644
--- a/apps/common-app/src/examples/DrumMachine/PatternShape.tsx
+++ b/apps/common-app/src/examples/DrumMachine/PatternShape.tsx
@@ -3,7 +3,7 @@ import { Circle, Paint, Path, vec, Skia } from '@shopify/react-native-skia';
 
 import { getAngle, getPointCX, getPointCY } from './utils';
 import instruments from './instruments';
-import type { Pattern } from './types';
+import type { Pattern } from '../../types';
 import { buttonRadius, cPoint } from './constants';
 
 interface PatternShapeProps {
diff --git a/apps/common-app/src/examples/DrumMachine/PlayButton.tsx b/apps/common-app/src/examples/DrumMachine/PlayButton.tsx
index 1bf19923..f9c1e057 100644
--- a/apps/common-app/src/examples/DrumMachine/PlayButton.tsx
+++ b/apps/common-app/src/examples/DrumMachine/PlayButton.tsx
@@ -8,7 +8,7 @@ import { Pressable, StyleSheet } from 'react-native';
 
 import { Icon } from '../../components';
 import { colors } from '../../styles';
-import type { PlayingInstruments, XYWHRect } from './types';
+import type { PlayingInstruments, XYWHRect } from '../../types';
 import { size } from './constants';
 
 interface PlayButtonProps {
diff --git a/apps/common-app/src/examples/DrumMachine/constants.ts b/apps/common-app/src/examples/DrumMachine/constants.ts
index 4e8f6be3..0b329aab 100644
--- a/apps/common-app/src/examples/DrumMachine/constants.ts
+++ b/apps/common-app/src/examples/DrumMachine/constants.ts
@@ -1,5 +1,5 @@
 import { Dimensions } from 'react-native';
-import type { InstrumentName, XYPoint } from './types';
+import type { InstrumentName, XYPoint } from '../../types';
 
 export const screenSize = Dimensions.get('screen');
 export const size = Math.min(screenSize.width, screenSize.height);
diff --git a/apps/common-app/src/examples/DrumMachine/instruments.ts b/apps/common-app/src/examples/DrumMachine/instruments.ts
index f120da39..4d222cde 100644
--- a/apps/common-app/src/examples/DrumMachine/instruments.ts
+++ b/apps/common-app/src/examples/DrumMachine/instruments.ts
@@ -1,5 +1,5 @@
 import { maxSize } from './constants';
-import type { Instrument } from './types';
+import type { Instrument } from '../../types';
 
 export const HiHat: Instrument = {
   name: 'hi-hat',
diff --git a/apps/common-app/src/examples/DrumMachine/presets.ts b/apps/common-app/src/examples/DrumMachine/presets.ts
index f93f4808..3f0c42ac 100644
--- a/apps/common-app/src/examples/DrumMachine/presets.ts
+++ b/apps/common-app/src/examples/DrumMachine/presets.ts
@@ -1,4 +1,4 @@
-import type { Preset } from './types';
+import type { Preset } from '../../types';
 import { numBeats } from './constants';
 
 const Empty: Preset = {
diff --git a/apps/common-app/src/examples/DrumMachine/types.ts b/apps/common-app/src/examples/DrumMachine/types.ts
deleted file mode 100644
index 8b3d695c..00000000
--- a/apps/common-app/src/examples/DrumMachine/types.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-export type InstrumentName = 'kick' | 'clap' | 'hi-hat';
-
-export interface Instrument {
-  color: string;
-  radius: number;
-  name: InstrumentName;
-}
-
-export interface Touché {
-  cX: number;
-  cY: number;
-  stepIdx: number;
-  patternIdx: number;
-}
-
-export interface Pattern {
-  instrumentName: InstrumentName;
-  steps: Array<boolean>;
-}
-
-export interface Preset {
-  name: string;
-  bpm: number;
-  pattern: Pattern[];
-}
-
-export interface XYWHRect {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-}
-
-export interface XYPoint {
-  x: number;
-  y: number;
-}
-
-export type PlayingInstruments = Record<InstrumentName, boolean>;
diff --git a/apps/common-app/src/examples/DrumMachine/useGestures.ts b/apps/common-app/src/examples/DrumMachine/useGestures.ts
index fe30f0ff..5154f5bd 100644
--- a/apps/common-app/src/examples/DrumMachine/useGestures.ts
+++ b/apps/common-app/src/examples/DrumMachine/useGestures.ts
@@ -8,7 +8,7 @@ import {
 
 import { getAngle, getPointCX, getPointCY, isPointInCircle } from './utils';
 import { numBeats, buttonRadius, cPoint } from './constants';
-import type { Touché, XYWHRect } from './types';
+import type { Touché, XYWHRect } from '../../types';
 import Instruments from './instruments';
 import { useMemo } from 'react';
 
diff --git a/apps/common-app/src/examples/Metronome/Metronome.tsx b/apps/common-app/src/examples/Metronome/Metronome.tsx
index 69aca1da..4613d21f 100644
--- a/apps/common-app/src/examples/Metronome/Metronome.tsx
+++ b/apps/common-app/src/examples/Metronome/Metronome.tsx
@@ -1,137 +1,78 @@
 import { AudioContext } from 'react-native-audio-api';
-import React, { useState, useEffect, useRef, FC } from 'react';
+import React, { useState, useCallback, FC } from 'react';
 
 import { Container, Slider, Spacer, Button } from '../../components';
-import { Scheduler, MetronomeSound } from '../SharedUtils';
-import { Sounds, SoundName } from '../../types';
+import MetronomeSound from '../../utils/soundEngines/MetronomeSound';
+import { InstrumentName, Pattern } from '../../types';
+import { patterns, defaultPattern } from './patterns';
+import usePlayer from '../../utils/usePlayer';
 
 const DOWN_BEAT_FREQUENCY = 1000;
 const REGULAR_BEAT_FREQUENCY = 500;
 
-const STEPS: Sounds = [
-  { name: 'downbeat', steps: [true, false, false, false] },
-  { name: 'regularbeat', steps: [false, true, true, true] },
-];
-
 const INITIAL_BPM = 120;
 const INITIAL_BEATS_PER_BAR = 4;
 
-const Metronome: FC = () => {
-  const [bpm, setBpm] = useState(INITIAL_BPM);
-  const [beatsPerBar, setBeatsPerBar] = useState(INITIAL_BEATS_PER_BAR);
-  const [isPlaying, setIsPlaying] = useState(false);
-
-  const audioContextRef = useRef<null | AudioContext>(null);
-  const downbeatSoundRef = useRef<null | MetronomeSound>(null);
-  const regularbeatSoundRef = useRef<null | MetronomeSound>(null);
-  const schedulerRef = useRef<null | Scheduler>(null);
-
-  const handlePause = () => {
-    setIsPlaying(false);
-    schedulerRef.current?.stop();
-  };
-
-  const handlePlayPause = () => {
-    if (!audioContextRef.current || !schedulerRef.current) {
-      return;
-    }
-
-    if (isPlaying) {
-      handlePause();
-      return;
-    }
-
-    setIsPlaying(true);
-    schedulerRef.current.start();
-  };
-
-  const handleBpmChange = (newBpm: number) => {
-    handlePause();
-    setBpm(newBpm);
-    if (schedulerRef.current) {
-      schedulerRef.current.bpm = newBpm;
-    }
-  };
-
-  const handleBeatsPerBarChange = (newBeatsPerBar: number) => {
-    handlePause();
-    setBeatsPerBar(newBeatsPerBar);
-    if (schedulerRef.current) {
-      schedulerRef.current.beatsPerBar = newBeatsPerBar;
-      const steps = new Array(newBeatsPerBar).fill(false);
-      steps[0] = true;
-
-      schedulerRef.current.steps = [
-        { name: 'downbeat', steps },
-        { name: 'regularbeat', steps: steps.map((value) => !value) },
-      ];
-    }
-  };
-
-  const playSound = (name: SoundName, time: number) => {
-    if (!audioContextRef.current || !schedulerRef.current) {
-      return;
-    }
-
-    if (!downbeatSoundRef.current) {
-      downbeatSoundRef.current = new MetronomeSound(
-        audioContextRef.current,
-        DOWN_BEAT_FREQUENCY
-      );
-    }
-
-    if (!regularbeatSoundRef.current) {
-      regularbeatSoundRef.current = new MetronomeSound(
-        audioContextRef.current,
-        REGULAR_BEAT_FREQUENCY
-      );
-    }
+function setupPlayer(audioCtx: AudioContext) {
+  const downbeat = new MetronomeSound(audioCtx, DOWN_BEAT_FREQUENCY);
+  const regularbeat = new MetronomeSound(audioCtx, REGULAR_BEAT_FREQUENCY);
 
+  const playNote = (name: InstrumentName, time: number) => {
     switch (name) {
       case 'downbeat':
-        downbeatSoundRef.current.play(time);
+        downbeat.play(time);
         break;
       case 'regularbeat':
-        regularbeatSoundRef.current.play(time);
-        break;
-      default:
+        regularbeat.play(time);
         break;
     }
   };
 
-  useEffect(() => {
-    if (!audioContextRef.current || !schedulerRef.current) {
-      audioContextRef.current = new AudioContext();
-    }
+  return { playNote };
+}
 
-    if (!schedulerRef.current) {
-      schedulerRef.current = new Scheduler(
-        INITIAL_BPM,
-        INITIAL_BEATS_PER_BAR,
-        audioContextRef.current,
-        STEPS,
-        1,
-        playSound
-      );
-    }
-    return () => {
-      schedulerRef.current?.stop();
-      audioContextRef.current?.close();
-    };
+const Metronome: FC = () => {
+  const [bpm, setBpm] = useState(INITIAL_BPM);
+  const [beatsPerBar, setBeatsPerBar] = useState(INITIAL_BEATS_PER_BAR);
+  const [pattern, setPattern] = useState<Pattern[]>([
+    ...patterns[defaultPattern],
+  ]);
+
+  const player = usePlayer({
+    bpm,
+    patterns: pattern,
+    notesPerBeat: 1,
+    numBeats: beatsPerBar,
+    setup: setupPlayer,
+  });
+
+  const onBeatsPerBarChange = useCallback((newBeatsPerBar: number) => {
+    setBeatsPerBar(newBeatsPerBar);
+    setPattern([...patterns[newBeatsPerBar]]);
   }, []);
 
+  const onPlayPress = useCallback(() => {
+    if (player.isPlaying) {
+      player.stop();
+    } else {
+      player.play();
+    }
+  }, [player]);
+
   return (
     <Container centered>
-      <Button onPress={handlePlayPause} title={isPlaying ? 'Pause' : 'Play'} />
+      <Button
+        title={player.isPlaying ? 'Stop' : 'Play'}
+        onPress={onPlayPress}
+      />
       <Spacer.Vertical size={20} />
       <Slider
+        label="BPM"
         step={1}
-        min={30}
-        max={240}
+        min={24}
+        max={320}
         value={bpm}
-        label="BPM"
-        minLabelWidth={50}
-        onValueChange={handleBpmChange}
+        onValueChange={setBpm}
       />
       <Spacer.Vertical size={20} />
       <Slider
@@ -140,7 +81,7 @@ const Metronome: FC = () => {
         step={1}
         value={beatsPerBar}
         label="Beats"
-        onValueChange={handleBeatsPerBarChange}
+        onValueChange={onBeatsPerBarChange}
         minLabelWidth={50}
       />
     </Container>
diff --git a/apps/common-app/src/examples/Metronome/patterns.ts b/apps/common-app/src/examples/Metronome/patterns.ts
new file mode 100644
index 00000000..326d664a
--- /dev/null
+++ b/apps/common-app/src/examples/Metronome/patterns.ts
@@ -0,0 +1,102 @@
+import type { Pattern } from '../../types';
+
+const oneBeatPerBar: Pattern[] = [
+  {
+    instrumentName: 'downbeat',
+    steps: [true],
+  },
+  {
+    instrumentName: 'regularbeat',
+    steps: [false],
+  },
+];
+
+const twoBeatsPerBar: Pattern[] = [
+  {
+    instrumentName: 'downbeat',
+    steps: [true, false],
+  },
+  {
+    instrumentName: 'regularbeat',
+    steps: [false, true],
+  },
+];
+
+const threeBeatsPerBar: Pattern[] = [
+  {
+    instrumentName: 'downbeat',
+    steps: [true, false, false],
+  },
+  {
+    instrumentName: 'regularbeat',
+    steps: [false, true, true],
+  },
+];
+
+const fourBeatsPerBar: Pattern[] = [
+  {
+    instrumentName: 'downbeat',
+    steps: [true, false, false, false],
+  },
+  {
+    instrumentName: 'regularbeat',
+    steps: [false, true, true, true],
+  },
+];
+
+const fiveBeatsPerBar: Pattern[] = [
+  {
+    instrumentName: 'downbeat',
+    steps: [true, false, false, false, false],
+  },
+  {
+    instrumentName: 'regularbeat',
+    steps: [false, true, true, true, true],
+  },
+];
+
+const sixBeatsPerBar: Pattern[] = [
+  {
+    instrumentName: 'downbeat',
+    steps: [true, false, false, false, false, false],
+  },
+  {
+    instrumentName: 'regularbeat',
+    steps: [false, true, true, true, true, true],
+  },
+];
+
+const sevenBeatsPerBar: Pattern[] = [
+  {
+    instrumentName: 'downbeat',
+    steps: [true, false, false, false, false, false, false],
+  },
+  {
+    instrumentName: 'regularbeat',
+    steps: [false, true, true, true, true, true, true],
+  },
+];
+
+const eightBeatsPerBar: Pattern[] = [
+  {
+    instrumentName: 'downbeat',
+    steps: [true, false, false, false, false, false, false, false],
+  },
+  {
+    instrumentName: 'regularbeat',
+    steps: [false, true, true, true, true, true, true, true],
+  },
+];
+
+export const patterns: Record<number, Pattern[]> = {
+  1: oneBeatPerBar,
+  2: twoBeatsPerBar,
+  3: threeBeatsPerBar,
+  4: fourBeatsPerBar,
+  5: fiveBeatsPerBar,
+  6: sixBeatsPerBar,
+  7: sevenBeatsPerBar,
+  8: eightBeatsPerBar,
+};
+
+export const defaultPattern = 4;
diff --git a/apps/common-app/src/examples/SharedUtils/Scheduler.ts b/apps/common-app/src/examples/SharedUtils/Scheduler.ts
deleted file mode 100644
index e0409b45..00000000
--- a/apps/common-app/src/examples/SharedUtils/Scheduler.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-import { AudioContext } from 'react-native-audio-api';
-import { Sounds, SoundName } from '../../types';
-
-const SCHEDULE_INTERVAL_MS = 25;
-const SCHEDULE_AHEAD_TIME = 0.1;
-
-class Scheduler {
-  private nextNoteTime: number = 0;
-  private currentBeat: number = 0;
-  private interval: NodeJS.Timeout | null = null;
-
-  public bpm: number;
-  public beatsPerBar: number;
-  public audioContext: AudioContext;
-  public noteDensity: number;
-  public steps: Sounds;
-  public playSound: (name: SoundName, time: number) => void;
-
-  constructor(
-    bpm: number,
-    beatsPerBar: number,
-    audioContext: AudioContext,
-    steps: Sounds,
-    noteDensity: number,
-    playSound: (name: SoundName, time: number) => void
-  ) {
-    this.bpm = bpm;
-    this.beatsPerBar = beatsPerBar;
-    this.audioContext = audioContext;
-    this.steps = steps;
-    this.noteDensity = noteDensity;
-    this.playSound = playSound;
-  }
-
-  private nextNote() {
-    const secondsPerBeat = 60.0 / (this.bpm * this.noteDensity);
-    this.nextNoteTime += secondsPerBeat;
-    this.currentBeat += 1;
-
-    if (this.currentBeat === this.beatsPerBar) {
-      this.currentBeat = 0;
-    }
-  }
-
-  private play(beat: number, time: number) {
-    this.steps.forEach(({ name, steps }) => {
-      if (steps[beat % steps.length]) {
-        this.playSound(name, time);
-      }
-    });
-  }
-
-  private schedule(audioContext: AudioContext) {
-    while (this.nextNoteTime < audioContext.currentTime + SCHEDULE_AHEAD_TIME) {
-      this.play(this.currentBeat, this.nextNoteTime);
-      this.nextNote();
-    }
-  }
-
-  start() {
-    this.currentBeat = 0;
-    this.nextNoteTime =
-      this.audioContext.currentTime + SCHEDULE_INTERVAL_MS / 1000;
-
-    this.interval = setInterval(
-      () => this.schedule(this.audioContext),
-      SCHEDULE_INTERVAL_MS
-    );
-  }
-
-  stop() {
-    if (this.interval) {
-      clearInterval(this.interval);
-      this.interval = null;
-    }
-  }
-}
-
-export default Scheduler;
diff --git a/apps/common-app/src/examples/SharedUtils/index.ts b/apps/common-app/src/examples/SharedUtils/index.ts
deleted file mode 100644
index 6203b1b0..00000000
--- a/apps/common-app/src/examples/SharedUtils/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export { default as Kick } from './soundEngines/Kick';
-export { default as HiHat } from './soundEngines/HiHat';
-export { default as Clap } from './soundEngines/Clap';
-export { default as MetronomeSound } from './soundEngines/MetronomeSound';
-export { SoundEngine } from './soundEngines/SoundEngine';
-export { default as Scheduler } from './Scheduler';
diff --git a/apps/common-app/src/types.ts b/apps/common-app/src/types.ts
index ce6a2712..01f37b01 100644
--- a/apps/common-app/src/types.ts
+++ b/apps/common-app/src/types.ts
@@ -1,8 +1,44 @@
-export type SoundName = 'kick' | 'hi-hat' | 'clap' | 'downbeat' | 'regularbeat';
+export type InstrumentName =
+  | 'kick'
+  | 'clap'
+  | 'hi-hat'
+  | 'downbeat'
+  | 'regularbeat';
 
-export type SoundRow = {
-  name: SoundName;
-  steps: boolean[];
-};
+export interface Instrument {
+  color: string;
+  radius: number;
+  name: InstrumentName;
+}
 
-export type Sounds = SoundRow[];
+export interface Touché {
+  cX: number;
+  cY: number;
+  stepIdx: number;
+  patternIdx: number;
+}
+
+export interface Pattern {
+  instrumentName: InstrumentName;
+  steps: Array<boolean>;
+}
+
+export interface Preset {
+  name: string;
+  bpm: number;
+  pattern: Pattern[];
+}
+
+export interface XYWHRect {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export interface XYPoint {
+  x: number;
+  y: number;
+}
+
+export type PlayingInstruments = Record<InstrumentName, boolean>;
diff --git a/apps/common-app/src/examples/SharedUtils/soundEngines/Clap.ts b/apps/common-app/src/utils/soundEngines/Clap.ts
similarity index 100%
rename from apps/common-app/src/examples/SharedUtils/soundEngines/Clap.ts
rename to apps/common-app/src/utils/soundEngines/Clap.ts
diff --git a/apps/common-app/src/examples/SharedUtils/soundEngines/HiHat.ts b/apps/common-app/src/utils/soundEngines/HiHat.ts
similarity index 100%
rename from apps/common-app/src/examples/SharedUtils/soundEngines/HiHat.ts
rename to apps/common-app/src/utils/soundEngines/HiHat.ts
diff --git a/apps/common-app/src/examples/SharedUtils/soundEngines/Kick.ts b/apps/common-app/src/utils/soundEngines/Kick.ts
similarity index 100%
rename from apps/common-app/src/examples/SharedUtils/soundEngines/Kick.ts
rename to apps/common-app/src/utils/soundEngines/Kick.ts
diff --git a/apps/common-app/src/examples/SharedUtils/soundEngines/MetronomeSound.ts b/apps/common-app/src/utils/soundEngines/MetronomeSound.ts
similarity index 100%
rename from apps/common-app/src/examples/SharedUtils/soundEngines/MetronomeSound.ts
rename to apps/common-app/src/utils/soundEngines/MetronomeSound.ts
diff --git a/apps/common-app/src/examples/SharedUtils/soundEngines/SoundEngine.ts b/apps/common-app/src/utils/soundEngines/SoundEngine.ts
similarity index 100%
rename from apps/common-app/src/examples/SharedUtils/soundEngines/SoundEngine.ts
rename to apps/common-app/src/utils/soundEngines/SoundEngine.ts
diff --git a/apps/common-app/src/examples/DrumMachine/usePlayer.tsx b/apps/common-app/src/utils/usePlayer.tsx
similarity index 89%
rename from apps/common-app/src/examples/DrumMachine/usePlayer.tsx
rename to apps/common-app/src/utils/usePlayer.tsx
index 29447313..ea581d14 100644
--- a/apps/common-app/src/examples/DrumMachine/usePlayer.tsx
+++ b/apps/common-app/src/utils/usePlayer.tsx
@@ -2,8 +2,8 @@ import { AudioContext } from 'react-native-audio-api';
 import { useSharedValue } from 'react-native-reanimated';
 import { useRef, useState, useCallback, useLayoutEffect } from 'react';
 
-import type { InstrumentName, Pattern, PlayingInstruments } from './types';
-import { numBeats, instruments } from './constants';
+import type { InstrumentName, Pattern, PlayingInstruments } from '../types';
+import { instruments } from '../examples/DrumMachine/constants';
 
 type PlayNoteMethod = (name: InstrumentName, time: number) => void;
 
@@ -15,6 +15,7 @@ interface PlayerOptions {
   bpm: number;
   patterns: Pattern[];
   notesPerBeat: number;
+  numBeats: number;
   setup: (AudioContext: AudioContext) => SetupResponse;
 }
 
@@ -33,7 +34,7 @@ function r<T>(ref: React.MutableRefObject<T>) {
 }
 
 export default function usePlayer(options: PlayerOptions) {
-  const { bpm, patterns, notesPerBeat, setup } = options;
+  const { bpm, patterns, notesPerBeat, numBeats, setup } = options;
 
   const [isPlaying, setIsPlaying] = useState(false);
 
@@ -41,6 +42,7 @@ export default function usePlayer(options: PlayerOptions) {
   const patternsRef = useRef(patterns);
   const isPlayingRef = useRef(isPlaying);
   const notesPerBeatRef = useRef(notesPerBeat);
+  const numBeatsRef = useRef(numBeats);
 
   const progressSV = useSharedValue(0);
   const currentBeat = useSharedValue(0);
@@ -54,7 +56,8 @@ export default function usePlayer(options: PlayerOptions) {
     patternsRef.current = patterns;
     isPlayingRef.current = isPlaying;
     notesPerBeatRef.current = notesPerBeat;
-  }, [bpm, patterns, isPlaying, notesPerBeat]);
+    numBeatsRef.current = numBeats;
+  }, [bpm, patterns, isPlaying, notesPerBeat, numBeats]);
 
   useLayoutEffect(() => {
     const audioContext = new AudioContext();
@@ -80,14 +83,14 @@ export default function usePlayer(options: PlayerOptions) {
         }
       }
 
-      currentBeat.value = (currentBeat.value + 1) % numBeats;
+      currentBeat.value = (currentBeat.value + 1) % r(numBeatsRef);
     }
 
     function playerLoop() {
       frameCount += 1;
 
       const timePerNote = 60.0 / (r(bpmRef) * r(notesPerBeatRef));
-      const totalLoopTime = timePerNote * numBeats;
+      const totalLoopTime = timePerNote * r(numBeatsRef);
 
       currentTime = audioContext.currentTime;
       const timeDiff = currentTime - startTime;
diff --git a/packages/react-native-audio-api/common/cpp/core/AudioBufferSourceNode.cpp b/packages/react-native-audio-api/common/cpp/core/AudioBufferSourceNode.cpp
index bfe43b22..3983e5c4 100644
--- a/packages/react-native-audio-api/common/cpp/core/AudioBufferSourceNode.cpp
+++ b/packages/react-native-audio-api/common/cpp/core/AudioBufferSourceNode.cpp
@@ -103,6 +103,8 @@ void AudioBufferSourceNode::processNode(
     processWithInterpolation(
         processingBus, startOffset, offsetLength, playbackRate);
   }
+
+  handleStopScheduled();
 }
 
 /**
diff --git a/packages/react-native-audio-api/common/cpp/core/AudioScheduledSourceNode.cpp b/packages/react-native-audio-api/common/cpp/core/AudioScheduledSourceNode.cpp
index 1dafb3ed..9a99e95f 100644
--- a/packages/react-native-audio-api/common/cpp/core/AudioScheduledSourceNode.cpp
+++ b/packages/react-native-audio-api/common/cpp/core/AudioScheduledSourceNode.cpp
@@ -107,6 +107,7 @@ void AudioScheduledSourceNode::updatePlaybackInfo(
     startOffset = 0;
     nonSilentFramesToProcess = 0;
     playbackState_ = PlaybackState::FINISHED;
+    disable();
     return;
   }
 
@@ -115,4 +116,11 @@ void AudioScheduledSourceNode::updatePlaybackInfo(
   nonSilentFramesToProcess = framesToProcess;
 }
 
+void AudioScheduledSourceNode::handleStopScheduled() {
+  if (isPlaying() && stopTime_ > 0 && context_->getCurrentTime() >= stopTime_) {
+    playbackState_ = PlaybackState::FINISHED;
+    disable();
+  }
+}
+
 } // namespace audioapi
diff --git a/packages/react-native-audio-api/common/cpp/core/AudioScheduledSourceNode.h b/packages/react-native-audio-api/common/cpp/core/AudioScheduledSourceNode.h
index 0ea6241d..ef21bc6a 100644
--- a/packages/react-native-audio-api/common/cpp/core/AudioScheduledSourceNode.h
+++ b/packages/react-native-audio-api/common/cpp/core/AudioScheduledSourceNode.h
@@ -27,13 +27,16 @@ class AudioScheduledSourceNode : public AudioNode {
   bool isFinished();
 
  protected:
-  std::atomic<PlaybackState> playbackState_;
+  PlaybackState playbackState_;
+
   void updatePlaybackInfo(
       AudioBus *processingBus,
       int framesToProcess,
       size_t &startOffset,
       size_t &nonSilentFramesToProcess);
 
+  void handleStopScheduled();
+
  private:
   double startTime_;
   double stopTime_;
diff --git a/packages/react-native-audio-api/common/cpp/core/OscillatorNode.cpp b/packages/react-native-audio-api/common/cpp/core/OscillatorNode.cpp
index 05110775..61f68d75 100644
--- a/packages/react-native-audio-api/common/cpp/core/OscillatorNode.cpp
+++ b/packages/react-native-audio-api/common/cpp/core/OscillatorNode.cpp
@@ -75,6 +75,8 @@ void OscillatorNode::processNode(AudioBus *processingBus, int framesToProcess) {
 
     time += deltaTime;
   }
+
+  handleStopScheduled();
 }
 
 } // namespace audioapi
diff --git a/packages/react-native-audio-api/common/cpp/jsi/JsiHostObject.cpp b/packages/react-native-audio-api/common/cpp/jsi/JsiHostObject.cpp
index 92c791ce..ba54a10e 100644
--- a/packages/react-native-audio-api/common/cpp/jsi/JsiHostObject.cpp
+++ b/packages/react-native-audio-api/common/cpp/jsi/JsiHostObject.cpp
@@ -2,14 +2,14 @@
 
 namespace audioapi {
 JsiHostObject::JsiHostObject() {
-  propertyGetters_ = std::make_unique<std::unordered_map<
+  getters_ = std::make_unique<std::unordered_map<
       std::string,
       jsi::Value (JsiHostObject::*)(jsi::Runtime &)>>();
-  propertyFunctions_ = std::make_unique<std::unordered_map<
+  functions_ = std::make_unique<std::unordered_map<
       std::string,
       jsi::Value (JsiHostObject::*)(
           jsi::Runtime &, const jsi::Value &, const jsi::Value *, size_t)>>();
-  propertySetters_ = std::make_unique<std::unordered_map<
+  setters_ = std::make_unique<std::unordered_map<
       std::string,
       void (JsiHostObject::*)(jsi::Runtime &, const jsi::Value &)>>();
 }
@@ -17,18 +17,17 @@ JsiHostObject::JsiHostObject() {
 std::vector<jsi::PropNameID> JsiHostObject::getPropertyNames(jsi::Runtime &rt) {
   std::vector<jsi::PropNameID> propertyNames;
   propertyNames.reserve(
-      propertyGetters_->size() + propertyFunctions_->size() +
-      propertySetters_->size());
+      getters_->size() + functions_->size() + setters_->size());
 
-  for (const auto &it : *propertyGetters_) {
+  for (const auto &it : *getters_) {
     propertyNames.push_back(jsi::PropNameID::forUtf8(rt, it.first));
   }
 
-  for (const auto &it : *propertyFunctions_) {
+  for (const auto &it : *functions_) {
     propertyNames.push_back(jsi::PropNameID::forAscii(rt, it.first));
   }
 
-  for (const auto &it : *propertySetters_) {
+  for (const auto &it : *setters_) {
     propertyNames.push_back(jsi::PropNameID::forAscii(rt, it.first));
   }
 
@@ -39,27 +38,35 @@ jsi::Value JsiHostObject::get(
     jsi::Runtime &runtime,
     const jsi::PropNameID &name) {
   auto nameAsString = name.utf8(runtime);
+  auto &hostFunctionCache = hostFunctionCache_.get(runtime);
 
-  auto propertyGetter = propertyGetters_->find(nameAsString);
-  if (propertyGetter != propertyGetters_->end()) {
-    auto dispatcher = [this, &propertyGetter](jsi::Runtime &runtime) {
-      return (this->*(propertyGetter->second))(runtime);
-    };
+  auto cachedFunction = hostFunctionCache.find(nameAsString);
+  if (cachedFunction != hostFunctionCache.end()) {
+    return cachedFunction->second.asFunction(runtime);
+  }
+
+  auto getter = getters_->find(nameAsString);
+  if (getter != getters_->end()) {
+    auto dispatcher = std::bind(getter->second, this, std::placeholders::_1);
 
     return dispatcher(runtime);
   }
 
-  auto propertyFunction = propertyFunctions_->find(nameAsString);
-  if (propertyFunction != propertyFunctions_->end()) {
-    auto dispatcher = [this, &propertyFunction](
-                          jsi::Runtime &runtime,
-                          const jsi::Value &thisVal,
-                          const jsi::Value *args,
-                          size_t count) -> jsi::Value {
-      return (this->*(propertyFunction->second))(runtime, thisVal, args, count);
-    };
-
-    return jsi::Function::createFromHostFunction(runtime, name, 0, dispatcher);
+  auto function = functions_->find(nameAsString);
+  if (function != functions_->end()) {
+    auto dispatcher = std::bind(
+        function->second,
+        reinterpret_cast<JsiHostObject *>(this),
+        std::placeholders::_1,
+        std::placeholders::_2,
+        std::placeholders::_3,
+        std::placeholders::_4);
+
+    return hostFunctionCache
+        .emplace(
+            nameAsString,
+            jsi::Function::createFromHostFunction(runtime, name, 0, dispatcher))
+        .first->second.asFunction(runtime);
   }
 
   return jsi::Value::undefined();
@@ -71,13 +78,11 @@ void JsiHostObject::set(
     const jsi::Value &value) {
   auto nameAsString = name.utf8(runtime);
 
-  auto propertySetter = propertySetters_->find(nameAsString);
+  auto setter = setters_->find(nameAsString);
 
-  if (propertySetter != propertySetters_->end()) {
-    auto dispatcher = [this, &propertySetter](
-                          jsi::Runtime &runtime, const jsi::Value &value) {
-      return (this->*(propertySetter->second))(runtime, value);
-    };
+  if (setter != setters_->end()) {
+    auto dispatcher = std::bind(
+        setter->second, this, std::placeholders::_1, std::placeholders::_2);
 
     return dispatcher(runtime, value);
   }
diff --git a/packages/react-native-audio-api/common/cpp/jsi/JsiHostObject.h b/packages/react-native-audio-api/common/cpp/jsi/JsiHostObject.h
index 45b3154f..8b74c9ce 100644
--- a/packages/react-native-audio-api/common/cpp/jsi/JsiHostObject.h
+++ b/packages/react-native-audio-api/common/cpp/jsi/JsiHostObject.h
@@ -1,12 +1,15 @@
 #pragma once
 
 #include <jsi/jsi.h>
+#include <map>
 #include <memory>
 #include <string>
 #include <unordered_map>
 #include <utility>
 #include <vector>
 
+#include "RuntimeAwareCache.h"
+
 #define JSI_HOST_FUNCTION(NAME)  \
   jsi::Value NAME(               \
       jsi::Runtime &runtime,     \
@@ -57,24 +60,24 @@ class JsiHostObject : public jsi::HostObject {
 
   template <typename... Args>
   void addGetters(Args... args) {
-    (propertyGetters_->insert(args), ...);
+    (getters_->insert(args), ...);
   }
 
   template <typename... Args>
   void addSetters(Args... args) {
-    (propertySetters_->insert(args), ...);
+    (setters_->insert(args), ...);
   }
 
   template <typename... Args>
   void addFunctions(Args... args) {
-    (propertyFunctions_->insert(args), ...);
+    (functions_->insert(args), ...);
   }
 
  protected:
   std::unique_ptr<std::unordered_map<
       std::string,
       jsi::Value (JsiHostObject::*)(jsi::Runtime &)>>
-      propertyGetters_;
+      getters_;
 
   std::unique_ptr<std::unordered_map<
       std::string,
@@ -83,12 +86,15 @@ class JsiHostObject : public jsi::HostObject {
           const jsi::Value &,
           const jsi::Value *,
           size_t)>>
-      propertyFunctions_;
+      functions_;
 
   std::unique_ptr<std::unordered_map<
       std::string,
       void (JsiHostObject::*)(jsi::Runtime &, const jsi::Value &)>>
-      propertySetters_;
+      setters_;
+
+ private:
+  RuntimeAwareCache<std::map<std::string, jsi::Function>> hostFunctionCache_;
 };
 
 } // namespace audioapi
diff --git a/packages/react-native-audio-api/common/cpp/jsi/RuntimeAwareCache.h b/packages/react-native-audio-api/common/cpp/jsi/RuntimeAwareCache.h
new file mode 100644
index 00000000..ace8452e
--- /dev/null
+++ b/packages/react-native-audio-api/common/cpp/jsi/RuntimeAwareCache.h
@@ -0,0 +1,57 @@
+#pragma once
+
+#include <jsi/jsi.h>
+
+#include <memory>
+#include <unordered_map>
+#include <utility>
+
+#include "RuntimeLifecycleMonitor.h"
+
+namespace audioapi {
+
+using namespace facebook;
+
+/**
+ * Provides a way to keep data specific to a jsi::Runtime instance that gets
+ * cleaned up when that runtime is destroyed. This is necessary because JSI does
+ * not allow for its associated objects to be retained past the runtime
+ * lifetime. If an object (e.g. jsi::Values or jsi::Function instances) is kept
+ * after the runtime is torn down, its destructor (once it is destroyed
+ * eventually) will result in a crash (JSI objects keep a pointer to memory
+ * managed by the runtime, accessing that portion of the memory after runtime is
+ * deleted is the root cause of that crash).
+ */
+template <typename T>
+class RuntimeAwareCache : public RuntimeLifecycleListener {
+ public:
+  void onRuntimeDestroyed(jsi::Runtime *rt) override {
+    // A runtime has been destroyed, so destroy the related cache.
+    runtimeCaches_.erase(rt);
+  }
+
+  ~RuntimeAwareCache() override {
+    for (auto &cache : runtimeCaches_) {
+      // remove all `onRuntimeDestroyed` listeners.
+      RuntimeLifecycleMonitor::removeListener(*cache.first, this);
+    }
+  }
+
+  T &get(jsi::Runtime &rt) {
+    if (runtimeCaches_.count(&rt) == 0) {
+      // This is the first time this Runtime has been accessed.
+      // We set up a `onRuntimeDestroyed` listener for it and
+      // initialize the cache map.
+      RuntimeLifecycleMonitor::addListener(rt, this);
+
+      T cache;
+      runtimeCaches_.emplace(&rt, std::move(cache));
+    }
+    return runtimeCaches_.at(&rt);
+  }
+
+ private:
+  std::unordered_map<jsi::Runtime *, T> runtimeCaches_;
+};
+
+} // namespace audioapi
diff --git a/packages/react-native-audio-api/common/cpp/jsi/RuntimeLifecycleMonitor.cpp b/packages/react-native-audio-api/common/cpp/jsi/RuntimeLifecycleMonitor.cpp
new file mode 100644
index 00000000..34f550b2
--- /dev/null
+++ b/packages/react-native-audio-api/common/cpp/jsi/RuntimeLifecycleMonitor.cpp
@@ -0,0 +1,61 @@
+#include "RuntimeLifecycleMonitor.h"
+
+#include <unordered_map>
+#include <unordered_set>
+#include <utility>
+
+namespace audioapi {
+
+static std::unordered_map<
+    jsi::Runtime *,
+    std::unordered_set<RuntimeLifecycleListener *>>
+    listeners;
+
+struct RuntimeLifecycleMonitorObject : public jsi::HostObject {
+  jsi::Runtime *rt_;
+  explicit RuntimeLifecycleMonitorObject(jsi::Runtime *rt) : rt_(rt) {}
+  ~RuntimeLifecycleMonitorObject() override {
+    auto listenersSet = listeners.find(rt_);
+    if (listenersSet != listeners.end()) {
+      for (auto listener : listenersSet->second) {
+        listener->onRuntimeDestroyed(rt_);
+      }
+      listeners.erase(listenersSet);
+    }
+  }
+};
+
+void RuntimeLifecycleMonitor::addListener(
+    jsi::Runtime &rt,
+    RuntimeLifecycleListener *listener) {
+  auto listenersSet = listeners.find(&rt);
+  if (listenersSet == listeners.end()) {
+    // We install a global host object in the provided runtime, this way we can
+    // use that host object destructor to get notified when the runtime is being
+    // terminated. We use a unique name for the object as it gets saved with the
+    // runtime's global object.
+    rt.global().setProperty(
+        rt,
+        "__rnaudioapi_runtime_lifecycle_monitor",
+        jsi::Object::createFromHostObject(
+            rt, std::make_shared<RuntimeLifecycleMonitorObject>(&rt)));
+    std::unordered_set<RuntimeLifecycleListener *> newSet;
+    newSet.insert(listener);
+    listeners.emplace(&rt, std::move(newSet));
+  } else {
+    listenersSet->second.insert(listener);
+  }
+}
+
+void RuntimeLifecycleMonitor::removeListener(
+    jsi::Runtime &rt,
+    RuntimeLifecycleListener *listener) {
+  auto listenersSet = listeners.find(&rt);
+  if (listenersSet == listeners.end()) {
+    // nothing to do here
+  } else {
+    listenersSet->second.erase(listener);
+  }
+}
+
+} // namespace audioapi
diff --git a/packages/react-native-audio-api/common/cpp/jsi/RuntimeLifecycleMonitor.h b/packages/react-native-audio-api/common/cpp/jsi/RuntimeLifecycleMonitor.h
new file mode 100644
index 00000000..3d77e2b7
--- /dev/null
+++ b/packages/react-native-audio-api/common/cpp/jsi/RuntimeLifecycleMonitor.h
@@ -0,0 +1,32 @@
+#pragma once
+
+#include <jsi/jsi.h>
+#include <memory>
+
+namespace audioapi {
+
+using namespace facebook;
+
+/**
+ * Listener interface that allows for getting notified when a jsi::Runtime
+ * instance is destroyed.
+ */
+struct RuntimeLifecycleListener {
+  virtual ~RuntimeLifecycleListener() = default;
+  virtual void onRuntimeDestroyed(jsi::Runtime *) = 0;
+};
+
+/**
+ * This class provides an API via static methods for registering and
+ * unregistering runtime lifecycle listeners. The listeners can be used to
+ * cleanup any data that references a given jsi::Runtime instance before it gets
+ * destroyed.
+ */
+struct RuntimeLifecycleMonitor {
+  static void addListener(jsi::Runtime &rt, RuntimeLifecycleListener *listener);
+  static void removeListener(
+      jsi::Runtime &rt,
+      RuntimeLifecycleListener *listener);
+};
+
+} // namespace audioapi