skills/react-native-best-practices/references/audio/SKILL.md
Software Mansion's best practices for audio in React Native using react-native-audio-api. Covers audio playback (buffer sources, oscillators, streaming), recording (file, callback, graph), audio effects (gain, filters, delay, convolver, panner, waveshaper), real-time analysis and visualization, audio worklets (custom synthesis, UIRuntime/AudioRuntime), system integration (sessions, interruptions, permissions), and testing. Trigger on: react-native-audio-api, AudioContext, AudioRecorder, AudioBuffer, AudioBufferSourceNode, AudioBufferQueueSourceNode, OscillatorNode, StreamerNode, GainNode, BiquadFilterNode, DelayNode, ConvolverNode, StereoPannerNode, WaveShaperNode, AnalyserNode, AudioParam, AudioManager, PlaybackNotificationManager, RecordingNotificationManager, WorkletNode, WorkletSourceNode, WorkletProcessingNode, audio playback, record audio, microphone, waveform, audio visualization, audio streaming, audio worklet, or any React Native feature that captures, processes, or emits sound.
npx skillsauth add software-mansion-labs/skills audioInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
Software Mansion's production audio patterns for React Native using react-native-audio-api.
Load at most one reference file per question. For API signatures and config options, webfetch the documentation pages linked in each reference file.
AudioContext instance per app. Multiple instances lead to conflicting states (one running, another suspended). Encapsulate it in a singleton class.AudioRecorder instance and reuse it. Switching between recorder instances has noticeable impact on performance, memory, and battery.AudioContext plays silence even with no source nodes connected, draining battery. On iOS, it also prevents the lock screen from showing a paused state. Use suspend() when audio is temporarily not needed, close() when done permanently.AudioBufferSourceNode can be started only once. To replay the same sound, create a new node. Nodes are inexpensive to create; reuse the AudioBuffer.linearRampToValueAtTime, exponentialRampToValueAtTime, or setTargetAtTime for smooth transitions..modify() to mutate the existing Float32Array rather than allocating a new one each frame. Allocating at 60fps+ causes GC jank.| File | When to read |
|------|-------------|
| audio.md | Decision tree for choosing an audio approach; AudioContext lifecycle and singleton pattern; audio graph concepts; decoding audio data; AudioBuffer state management |
| playback.md | Playing audio with AudioBufferSourceNode, OscillatorNode, StreamerNode, AudioBufferQueueSourceNode; looping and scheduling; AudioParam scheduling methods; playback rate and pitch; noise generation |
| recording.md | Recording audio with AudioRecorder; three recording modes (file, data callback, graph processing); file output configuration and formats; permissions; background recording setup |
| effects-and-analysis.md | Audio effects chain (GainNode, BiquadFilterNode, DelayNode, ConvolverNode, StereoPannerNode, WaveShaperNode); ADSR envelopes; AnalyserNode for time-domain and frequency-domain data; audio visualization patterns |
| worklets.md | Audio worklets with WorkletNode, WorkletSourceNode, WorkletProcessingNode; UIRuntime vs AudioRuntime; performance budgets and latency constraints; custom synthesis and real-time processing |
| system-and-notifications.md | AudioManager for session configuration and system events; PlaybackNotificationManager and RecordingNotificationManager for media controls; permissions; interruption handling; testing with mocks |
development
TypeGPU is type-safe WebGPU in TypeScript. Use whenever the user writes, debugs, or designs TypeGPU code: 'use gpu' shader functions, tgpu.fn, buffers, textures, bind groups, compute and render pipelines, vertex layouts, slots, accessors, and any TypeGPU API. Shader logic and CPU-side resources are tightly coupled - handle both sides here even if the user only mentions one (e.g. "how do I write a shader", "how do I create a buffer"). Trigger on any mention of typegpu, tgpu, "use gpu", TypedGPU, or WebGPU code written using TypeGPU's schema API (d.*, tgpu.*, std.*). Do NOT trigger for raw WebGPU (using GPUDevice/GPURenderPipeline directly without tgpu), WGSL-only questions, Three.js, Babylon.js, or WebGL.
tools
Best practices for integrating and using RNRepo — Software Mansion's infrastructure for pre-built React Native library artifacts that reduces native build times by up to 2×. Use when setting up, configuring, or troubleshooting RNRepo in a React Native or Expo project. Trigger on: 'RNRepo', 'rnrepo', 'slow builds', 'build times', 'prebuilt artifacts', 'prebuilt libraries', '@rnrepo/expo-config-plugin', '@rnrepo/build-tools', 'prebuilds-plugin', 'rnrepo.config.json', 'DISABLE_RNREPO', 'packages.rnrepo.org', 'Maven prebuild', 'CocoaPods prebuild', 'xcframework prebuild', 'prebuild AAR', 'build from source', 'native compilation slow', 'Gradle plugin slow', 'pod install slow', 'CI build times'.
development
Software Mansion's best practices for SVG rendering in React Native apps using React Native SVG. Use when rendering vector graphics, icons, charts, illustrations, or any SVG content. Trigger on: 'react-native-svg', 'SVG', 'vector graphics', 'render icon', 'draw shape', 'chart', 'path', 'Svg component', 'SvgUri', 'SvgXml', 'SvgCss', 'FilterImage', 'SVG filter', or any request to display scalable vector content in a React Native app.
tools
Software Mansion's best practices for rich text in React Native using react-native-enriched and react-native-enriched-markdown. Use when building rich text editors, formatted text inputs, Markdown renderers, or any feature requiring inline styling, mentions, links, structured text editing, or Markdown display. Trigger on: 'rich text editor', 'rich text input', 'text editor', 'react-native-enriched', 'react-native-enriched-markdown', 'EnrichedTextInput', 'EnrichedMarkdownText', 'formatted text input', 'WYSIWYG', 'mentions input', 'text formatting toolbar', 'markdown renderer', 'markdown display', 'render markdown', 'display markdown natively', 'LaTeX math', 'GFM tables', or any request to build rich text editing or Markdown rendering in React Native.