Components Reference

Every component must be rendered inside a MiteProvider. All of them ship with sensible default styling and need no configuration to work.

Component	Purpose
`MiteProvider`	Provide the Mite instance to the tree
`ShakeToReport`	Full in-app bug reporting flow
`ScreenshotAnnotator`	Draw on and redact an image
`WhatsNew`	Release notes after an update
`AnnouncementPopup`	Show-once announcement popup
`FeatureRequestsSheet`	Feature request board
`StoreReviewPrompt`	Review deflection prompt
`MiteErrorBoundary`	Send render errors to Mite and show a fallback

MiteProvider

Makes a Mite instance available to hooks and components.

<MiteProvider client={mite}>
  {/* Your app */}
</MiteProvider>

Prop	Type	Description
`client`	`Mite`	The instance to provide. Required
`children`	`React.ReactNode`	Your app

miteInstance is the 1.0 name for client. It still works, is deprecated, and is removed in 2.0. Pass one or the other, not both.

ShakeToReport

In-app bug reporting: shake or tap to open, capture a screenshot, annotate, submit. Mount once. See In-App Bug Reporting.

<ShakeToReport showFloatingButton onSubmitted={r => console.log(r.id)} />

Prop	Type	Default	Description
`shakeEnabled`	`boolean`	`true`	Listen for shake gestures. Needs `expo-sensors`
`showFloatingButton`	`boolean`	`false`	Render a floating bug button
`screenshotEnabled`	`boolean`	`true`	Capture a screenshot. Needs `react-native-view-shot`
`shakeOptions`	`ShakeDetectorOptions`	—	Sensitivity and timing overrides
`onSubmitted`	`(response: SubmitBugReportResponse) => void`	—	Successful submission
`onError`	`(error: Error) => void`	—	Submission failure
`onQuotaExceeded`	`(refusal: MiteQuotaRefusal) => void`	—	Account over a plan limit
`quotaMessage`	`string`	`'Reports are not being accepted right now. Please try again later.'`	Text shown to the user on a refusal

ScreenshotAnnotator

Full-screen image editor with a pen tool and a redaction rectangle tool.

<ScreenshotAnnotator
  imageUri={uri}
  onDone={annotatedUri => setAttachment(annotatedUri)}
  onCancel={() => setEditing(false)}
/>

Prop	Type	Description
`imageUri`	`string`	Image to annotate. Required
`onDone`	`(annotatedUri: string) => void`	Called with the flattened result. Required
`onCancel`	`() => void`	Called when the user backs out. Required

WhatsNew

Shows release notes once per new app version. Mount once. See What's New.

<WhatsNew showOnFirstLaunch title="Latest updates" />

Accepts every useWhatsNew option plus:

Prop	Type	Default	Description
`title`	`string`	`"What's New"`	Sheet heading
`dismissLabel`	`string`	`'Got it'`	Dismiss button label
`onDismiss`	`() => void`	—	Called after dismissal

Follows the system color scheme. Open it imperatively with showWhatsNew().

AnnouncementPopup

Shows the latest active announcement once per device. Mount once. See Announcements.

<AnnouncementPopup onCtaPress={url => track('announcement_cta', { url })} />

Accepts every useAnnouncementPopup option plus:

Prop	Type	Default	Description
`dismissLabel`	`string`	`'Got it'`	Dismiss button label
`onDismiss`	`() => void`	—	Called after dismissal
`onCtaPress`	`(url: string) => void`	—	Called before the action URL opens

Follows the system color scheme. Open it imperatively with showAnnouncement().

FeatureRequestsSheet

Wraps any element as a trigger that opens the feature request board. See Feature Requests.

<FeatureRequestsSheet>
  <Text>Request a feature</Text>
</FeatureRequestsSheet>

Prop	Type	Default	Description
`children`	`ReactNode`	—	Trigger element
`title`	`string`	`'Feature requests'`	Sheet heading
`accentColor`	`string`	`#0a7ea4`	Vote and submit button color
`onSubmitted`	`(featureRequestId: string) => void`	—	Successful submission

The board is fetched lazily when the sheet opens.

StoreReviewPrompt

Asks "Enjoying the app?" and routes the answer. See Store Review Prompt.

<StoreReviewPrompt visible={visible} onClose={() => setVisible(false)} />

Prop	Type	Default
`visible`	`boolean`	—
`onClose`	`() => void`	—
`title`	`string`	`'Enjoying the app?'`
`message`	`string`	`'Your feedback helps us improve.'`
`positiveText`	`string`	`'Yes, I love it!'`
`negativeText`	`string`	`'Not really'`
`feedbackTitle`	`string`	`'What could be better?'`
`feedbackPlaceholder`	`string`	`'Tell us what went wrong...'`
`feedbackSubmitText`	`string`	`'Send feedback'`
`dismissText`	`string`	`'Not now'`
`feedbackReportTitle`	`string`	`'In-app feedback'`
`onPositive`	`(reviewRequested: boolean) => void`	—
`onNegative`	`() => void`	—
`onFeedbackSubmitted`	`(response: SubmitBugReportResponse) => void`	—
`onQuotaExceeded`	`(refusal: MiteQuotaRefusal) => void`	—
`quotaMessage`	`string`	`'Feedback is not being accepted right now. Please try again later.'`

Providing onNegative skips the built-in feedback step.

MiteErrorBoundary

Catches render errors below it, sends each one to Mite with its component stack, and renders fallback in place of a blank screen. See Error Tracking.

<MiteErrorBoundary fallback={({ reset }) => <Retry onPress={reset} />}>
  <App />
</MiteErrorBoundary>

Prop	Type	Default	Description
`children`	`ReactNode`	—	The tree to guard
`fallback`	`ReactNode \| (props: { error: unknown; reset: () => void }) => ReactNode`	`null`	What to render after a child throws. `reset` renders the children again
`onError`	`(error: unknown, info: ErrorInfo) => void`	—	Called after the error is sent to Mite

The error is sent as unhandled. Mite sends it only when a Mite instance has an apiKey and error tracking is on.

Components Reference

On this page