@mushi-mushi/react-native

React Native SDK for Mushi Mushi — built-in bottom-sheet widget, floating bug button, offline queue.

One-command setup: npx mushi-mushi auto-detects React Native / Expo and installs this package.

Other frameworks: @mushi-mushi/react · @mushi-mushi/vue · @mushi-mushi/svelte · @mushi-mushi/angular · @mushi-mushi/capacitor (Ionic) · @mushi-mushi/web (vanilla JS)

Usage

import { MushiProvider } from '@mushi-mushi/react-native'

export default function App() {
  return (
    <MushiProvider projectId="proj_xxx" apiKey="mushi_xxx">
      <Navigation />
    </MushiProvider>
  )
}

The provider renders a floating 🐛 button and a slide-up bottom sheet by default. Control behavior via widget.trigger:

| Value | Behavior | |-------|----------| | 'button' (default) | Shows floating action button | | 'shake' | Installs a shake-to-report listener (no visible UI) | | 'both' | Floating button + shake listener | | 'manual' / 'hidden' / 'none' | No auto-UI — call open() programmatically | | 'attach' | Hides the default UI; the host renders its own button and calls attachTo() |

Shake detection requires the optional expo-sensors peer dependency. Install it once with expo install expo-sensors (or npm install expo-sensors); the listener is wired lazily so apps that ship 'button' only never pay the cost.

widget.inset (and the MushiFloatingButton inset prop) accepts { top?, right?, bottom?, left? } in points so the trigger can clear tab bars and host CTAs.

<MushiProvider
  projectId="proj_xxx"
  apiKey="mushi_xxx"
  config={{
    widget: { trigger: 'both', inset: { bottom: 96, right: 16 } },
  }}
>
  <Navigation />
</MushiProvider>

Hooks

import { useMushi, useMushiReport, useMushiWidget } from '@mushi-mushi/react-native'

const { submitReport } = useMushiReport()
const { open, close } = useMushiWidget()

The provider's useMushi() instance also exposes the cross-platform trigger controls — show(), hide(), attachTo(elementRefOrId), and setTrigger(mode) — so a host app can toggle the launcher per screen.

Standalone Components

Use the widget components directly if you need custom integration:

import { MushiBottomSheet, MushiFloatingButton } from '@mushi-mushi/react-native'

• MushiBottomSheet — Conversational bug report modal (category → description → submit). Supports dark/light theme, drag-to-dismiss.
• MushiFloatingButton — Positioned FAB with spring animation. Configurable via buttonPosition.

Captures

• Device info (platform, OS, screen dimensions)
• Console logs (monkey-patched)
• Network requests (fetch interceptor)
• Navigation events (React Navigation, optional)
• Offline queue via AsyncStorage

Peer Dependencies

• react >= 18
• react-native >= 0.72
• @react-navigation/native >= 6 (optional)
• @react-native-async-storage/async-storage >= 1.19 (optional)

License

MIT