React Native Bread provides flexible positioning options to control where toasts appear on screen and how much spacing they have from the edge.
Position options
Toasts can be positioned at the top or bottom of the screen using the position configuration.
Top position (default)
By default, toasts appear at the top of the screen with automatic safe area handling:
import { BreadLoaf } from 'react-native-bread';
function App() {
return (
<View>
<NavigationContainer>...</NavigationContainer>
<BreadLoaf config={{ position: 'top' }} />
</View>
);
}
Bottom position
Toasts can also appear at the bottom of the screen:
<BreadLoaf config={{ position: 'bottom' }} />
export type ToastPosition = "top" | "bottom";
Offset configuration
The offset property adds extra spacing between the toast and the screen edge, in addition to the automatic safe area insets.
Default offset
By default, offset is 0, meaning toasts respect only the safe area insets (from package/src/toast-store.ts:9):
<BreadLoaf config={{ offset: 0 }} />
Custom offset
Add extra spacing in pixels:
// Add 20px extra spacing from the safe area edge
<BreadLoaf config={{ offset: 20 }} />
// Add more spacing for a floating effect
<BreadLoaf config={{ offset: 40 }} />
How offset works
The offset value is added to the safe area insets, not replacing them. This ensures toasts never overlap notches, status bars, or navigation bars while allowing you to add extra breathing room.
// Example: iPhone with notch
// Safe area top inset: 44px
// Your offset: 20px
// Total spacing from top: 64px
<BreadLoaf config={{ position: 'top', offset: 20 }} />
Position in theme configuration
The position and offset are part of the global theme configuration (from package/src/types.ts:42-46):
export interface ToastTheme {
/** Position of toasts on screen */
position: ToastPosition;
/** Extra offset from safe area edge (in addition to safe area insets) */
offset: number;
// ... other theme properties
}
Complete positioning example
Here’s a comprehensive example showing different positioning configurations:
import { BreadLoaf } from 'react-native-bread';
import { toast } from 'react-native-bread';
// Top-aligned with extra spacing
function TopToastExample() {
return (
<>
<NavigationContainer>...</NavigationContainer>
<BreadLoaf
config={{
position: 'top',
offset: 16,
}}
/>
</>
);
}
// Bottom-aligned with larger offset for floating effect
function BottomToastExample() {
return (
<>
<NavigationContainer>...</NavigationContainer>
<BreadLoaf
config={{
position: 'bottom',
offset: 32,
}}
/>
</>
);
}
// Then show toasts anywhere in your app
toast.success('This appears at the configured position');
Combining with stacking
When using toast stacking, all toasts respect the position and offset configuration:
<BreadLoaf
config={{
position: 'top',
offset: 20,
stacking: true,
maxStack: 3,
}}
/>
Safe area insets are automatically handled on both iOS and Android, so your toasts will always appear in safe regions regardless of device notches, status bars, or navigation bars.
RTL layout considerations
The position configuration works seamlessly with RTL layouts. When using code-level RTL (via the rtl config option), the toast position remains the same (top/bottom), but the internal layout (icon/text order) is reversed automatically.
<BreadLoaf
config={{
position: 'top',
offset: 16,
rtl: true, // Only needed for code-level RTL
}}
/>
If you’re using native RTL via React Native’s I18nManager.forceRTL(), you don’t need the rtl config option. The entire layout flips automatically at the platform level.
Default values
From package/src/toast-store.ts:7-9:
const DEFAULT_THEME: ToastTheme = {
position: "top",
offset: 0,
// ...
};