React Native Integration

JotReviewProvider initializes the SDK and hosts the modal layer used by the imperative API. Mount it once, near the root of your app, above your navigation:

export default function App() { return ( <JotReviewProvider projectId="a1b2c3d4-5e6f-4a7b-8c9d-0e1f2a3b4c5d"> <NavigationContainer> <RootNavigator /> </NavigationContainer> </JotReviewProvider> ); } `

If you only use the declarative components below, the provider is still recommended so a single SDK instance is shared across your app.

Call these from any event handler once the provider is mounted:

JotReview.showFeedback(); // feedback sheet JotReview.showFeedback({ board: "bugs" }); // pre-filtered to a board JotReview.showRoadmap(); // roadmap JotReview.showChangelog(); // updates / changelog `

This is the quickest way to wire up a "Feedback" button in a settings screen or nav bar.

For full control over presentation, use the declarative component and drive it with your own state:

function SettingsScreen() { const [visible, setVisible] = useState(false);

return ( <View> <Button title="Share Feedback" onPress={() => setVisible(true)} /> <JotReviewFeedback visible={visible} onClose={() => setVisible(false)} /> </View> ); } `

Present the roadmap — In Progress, Planned, and Under Review columns, sorted by votes:

function HomeScreen() { const [visible, setVisible] = useState(false);

return ( <> <Button title="What's Coming Next?" onPress={() => setVisible(true)} /> <JotReviewRoadmap visible={visible} onClose={() => setVisible(false)} /> </> ); } `

Show published changelog entries — great for a "What's New" link in onboarding or settings:

function WhatsNewButton() { const [visible, setVisible] = useState(false);

return ( <> <Button title="What's New" onPress={() => setVisible(true)} /> <JotReviewChangelog visible={visible} onClose={() => setVisible(false)} /> </> ); } `

Changelog entries can contain rich text; the SDK renders their HTML bodies natively on both iOS and Android.

If your workspace has multiple boards (e.g., Features, Bugs, Mobile App), open feedback pre-filtered to a specific board by passing its slug — via either API:

// Declarative <JotReviewFeedback visible={visible} onClose={onClose} board="bugs" /> `

The board slug is the URL-safe name visible in your JotReview dashboard under Settings > Feedback. If the slug is not found or omitted, the sheet defaults to showing all boards.

The SDK contains no native code, so it works out of the box with Expo:

• •Expo Go — works immediately after npm install, no rebuild required
• •EAS Build / bare workflow — no config plugin needed; just install the package and its @react-native-async-storage/async-storage peer dependency

If you use image attachments (a PRO feature), the SDK relies on the system image picker; on Expo this is handled with expo-image-picker with no extra permission configuration for basic use.