Docs · SDK · React Native

Install Brevwick in React Native.

Copy-paste the snippets below. Replace pk_test_demo with the public key from your project — find it under Project settings → Keys.

1. Install

Install the adapter alongside the core SDK.

# Expo (recommended)
npx expo install @tatlacas/brevwick-react-native @tatlacas/brevwick-sdk react-native-view-shot

# Bare React Native (also run `cd ios && pod install` on iOS)
npm install @tatlacas/brevwick-react-native @tatlacas/brevwick-sdk react-native-view-shot

2. Configure env vars

Wire the project key through your framework’s env convention so it gets inlined into the client bundle at build time.

# Public project key. Expo inlines `EXPO_PUBLIC_*` into the JS bundle at build time. For bare RN, use react-native-config (or your preferred env tool) and read it the same way.
EXPO_PUBLIC_BREVWICK_PROJECT_KEY=pk_test_demo

3. Wire the SDK

App.tsxTSX

import {
  NavigationContainer,
  createNavigationContainerRef,
} from '@react-navigation/native';
import {
  BrevwickProvider,
  FeedbackButton,
} from '@tatlacas/brevwick-react-native';
import { RootStack } from './src/navigation';

const navigationRef = createNavigationContainerRef();

const config = {
  projectKey:
    process.env.EXPO_PUBLIC_BREVWICK_PROJECT_KEY ?? 'pk_test_demo',
};

export default function App() {
  return (
    <BrevwickProvider config={config} navigationRef={navigationRef}>
      <NavigationContainer ref={navigationRef}>
        <RootStack />
      </NavigationContainer>
      <FeedbackButton position="bottom-right" />
    </BrevwickProvider>
  );
}

src/screens/HelpScreen.tsxTSX

import { Button, View } from 'react-native';
import { useFeedback } from '@tatlacas/brevwick-react-native';

export function HelpScreen() {
  const { open, status } = useFeedback();

  return (
    <View>
      <Button
        title={status === 'submitting' ? 'Sending…' : 'Send feedback'}
        disabled={status === 'submitting'}
        onPress={() => open()}
      />
    </View>
  );
}

Verify

  • Run `npx expo start` (or `npx react-native run-ios` / `run-android` for bare RN) on a simulator or device.
  • Tap the floating feedback button in the bottom-right corner.
  • Submit a test issue from the modal — including the auto-captured screenshot.
  • Confirm the issue lands in /app/issues in the Brevwick dashboard with the active route name in the metadata.

Full guide: /docs/sdk/react-native

Published packages

Browse the registry for version history, source, and download counts.