Skip to main content

​
Installation

React Native Bread requires React Native 0.76+ and several peer dependencies for animations, gestures, and safe area handling.

​
Install the package

npm install react-native-bread

​
Install peer dependencies

React Native Bread requires the following peer dependencies:
PackageVersionPurpose
react-native-reanimated≥ 4.1.0Smooth 60fps animations
react-native-gesture-handler≥ 2.25.0Swipe-to-dismiss gestures
react-native-safe-area-context≥ 5.0.0Safe area handling
react-native-screens≥ 4.0.0Native screen primitives
react-native-svg≥ 15.8.0Default toast icons
react-native-worklets≥ 0.5.0Worklet support for Reanimated
Most React Native projects already have many of these dependencies installed. Check your package.json before installing.

​
Install all peer dependencies

npm install react-native-reanimated react-native-gesture-handler react-native-safe-area-context react-native-screens react-native-svg react-native-worklets

​
Version compatibility

Make sure your react-native-reanimated and react-native-worklets versions are compatible:
  • Reanimated 4.1.x works with worklets 0.5.x - 0.7.x
  • Reanimated 4.2.x requires worklets 0.7.x only
If you encounter version conflicts, check the Reanimated compatibility guide for your specific React Native version.

​
Platform-specific setup

Some peer dependencies require additional native configuration.

​
iOS

After installing dependencies, run: 
cd ios && pod install && cd ..

​
Android

No additional steps required. The dependencies will be auto-linked.

​
Expo

If you’re using Expo, all peer dependencies are fully compatible with Expo Go and EAS Build. No additional configuration needed.
For managed Expo projects, you may need to run npx expo prebuild after installing dependencies to regenerate native folders.

​
Configure Reanimated

React Native Bread uses Reanimated for animations. Make sure Reanimated’s Babel plugin is configured in your babel.config.js:
babel.config.js
module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    'react-native-reanimated/plugin', // Must be last
  ],
};
The Reanimated plugin must be listed last in the plugins array. After adding it, clear your cache and rebuild:
npx react-native start --reset-cache

​
Configure Gesture Handler

Wrap your app root with GestureHandlerRootView in your entry file: 
import { GestureHandlerRootView } from 'react-native-gesture-handler';

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      {/* Your app content */}
    </GestureHandlerRootView>
  );
}

​
Verify installation

To verify everything is installed correctly, try importing the package: 
import { BreadLoaf, toast } from 'react-native-bread';
If you see TypeScript errors or module resolution issues, try:
  1. Clear your Metro bundler cache: 
    npx react-native start --reset-cache
  2. Rebuild your app: 
    # iOS
npx react-native run-ios

# Android
npx react-native run-android
  3. For Expo projects: 
    npx expo start -c

​
Next steps

Quickstart

Now that you’ve installed React Native Bread, follow the quickstart guide to show your first toast

Build docs developers (and LLMs) love

Get started for freeTalk to us