Add flexible toast positioning and alignment

Introduces new config options for vertical and horizontal toast stack alignment, including `horizontalPosition` and a combined `position` object. Updates components and types to support left/center/right alignment, adds runtime controls to the example app, and improves documentation. Also updates `react-native-safe-area-context` to v5.6.0.

Author: mCodex

README.md

@@ -91,7 +91,7 @@ export default function App() {
 
 - 🌈 **Themes & fonts** – override per-variant colours and fonts.
 - 🪄 **Enter/exit animations** – configure easing, duration, and offset.
-- 🧭 **Placement control** – render from the top or bottom and tweak spacing/off-sets.
+- 🧭 **Flexible positioning** – align the stack top/bottom and left/center/right with safe-area awareness.
 - 🔔 **Per-toast behaviour** – set custom duration, icons, and press handlers.
 - 🧱 **Render override** – supply `renderToast` to swap the default card while keeping stack logic.
 - 🧪 **Strict TypeScript** – rich typings with `ToastMessage`, `ToastConfig`, and context helpers.
@@ -103,6 +103,8 @@ export default function App() {
 | `bgColor` | `Record<'success' \| 'error' \| 'warning' \| 'info', string>` | vibrant palette | Background colours per toast type. |
 | `timeToDismiss` | `number` | `3000` | Global auto-dismiss duration (ms). Set `0` to keep toasts until manual removal. |
 | `placement` | `'top' \| 'bottom'` | `'bottom'` | Screen edge for the stack. |
+| `horizontalPosition` | `'left' \| 'center' \| 'right'` | `'center'` | Horizontal alignment for the toast stack. |
+| `position` | `{ vertical?: 'top' \| 'bottom'; horizontal?: 'left' \| 'center' \| 'right' }` | `undefined` | Override both axes at once; takes precedence over `placement`/`horizontalPosition`. |
 | `spacing` | `number` | `12` | Gap between stacked toasts. |
 | `offset` | `number` | `20` | Additional inset from the safe area edge. |
 | `font.fontFamilyRegular` | `string` | `undefined` | Custom family for message text. |
@@ -138,7 +140,7 @@ export default function App() {
 ```
 
 > [!TIP]
-> Call `setToastConfig` from anywhere to merge runtime overrides, such as toggling placement when a modal opens.
+> Call `setToastConfig` from anywhere to merge runtime overrides, such as moving toasts to the top-right while a modal is open.
 
 ## 🧰 Composable API
 
@@ -152,6 +154,15 @@ setToastConfig(config: Partial<ToastConfig>): void
 - `removeToast()` with no arguments pops the most recent toast; supply an `id` to remove a specific one.
 - `setToastConfig` merges deeply with the current configuration – safe for incremental updates.
 
+> [!EXAMPLE]
+> To snap the stack to the top-right at runtime:
+>
+> ```tsx
+> setToastConfig({ position: { vertical: 'top', horizontal: 'right' } });
+> ```
+>
+> The provider stays mounted and existing toasts animate to their new home.
+
 ## 🎨 Designing Beautiful Toasts
 
 Use the render override for complete control:
@@ -186,7 +197,7 @@ yarn example start
 ```
 
 > [!NOTE]
-> The example mirrors the library source via workspaces. Any local edits appear immediately inside Expo.
+> The example mirrors the library source via workspaces and now includes live vertical/horizontal toggle controls.
 
 ## 🤝 Contributing
 
@@ -197,16 +208,4 @@ yarn example start
 > [!TIP]
 > Small fixes are welcome! If you are planning a bigger change, open an issue first so we can discuss the approach.
 
-## 🗣️ Community & Support
-
-- File issues on [GitHub](https://github.com/mCodex/react-native-rooster/issues).
-- Follow [@mCodex](https://github.com/mCodex) for release updates.
-- Got a success story? Share it through a discussion or tweet with #ReactNativeRooster.
-
-## 📄 License
-
-MIT © [Mateus Andrade](https://github.com/mCodex)
-
----
-
 Made with ❤️ using [create-react-native-library](https://github.com/callstack/react-native-builder-bob)

example/package.json

@@ -15,7 +15,7 @@
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "react-native": "0.81.4",
-    "react-native-safe-area-context": "^4.12.5",
+    "react-native-safe-area-context": "^5.6.0",
     "react-native-web": "~0.21.2"
   },
   "private": true,

example/src/App.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
 import {
   Pressable,
   ScrollView,
@@ -8,16 +8,21 @@ import {
   View,
   useWindowDimensions,
 } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { ToastProvider, useToast } from 'react-native-rooster';
 import type { ToastType } from 'react-native-rooster';
-import { SafeAreaView } from 'react-native-safe-area-context';
 
 type ButtonConfig = {
   label: string;
   type: ToastType;
   persistent?: boolean;
 };
 
+type ToggleOption<T> = {
+  label: string;
+  value: T;
+};
+
 const BUTTONS: ButtonConfig[] = [
   { label: 'Success toast', type: 'success' },
   { label: 'Warning toast', type: 'warning' },
@@ -26,10 +31,42 @@ const BUTTONS: ButtonConfig[] = [
   { label: 'Persistent toast', type: 'info', persistent: true },
 ];
 
+const VERTICAL_OPTIONS: ToggleOption<'top' | 'bottom'>[] = [
+  { label: 'Top', value: 'top' },
+  { label: 'Bottom', value: 'bottom' },
+];
+
+const HORIZONTAL_OPTIONS: ToggleOption<'left' | 'center' | 'right'>[] = [
+  { label: 'Left', value: 'left' },
+  { label: 'Center', value: 'center' },
+  { label: 'Right', value: 'right' },
+];
+
 const ToastDemo: React.FC = () => {
-  const { addToast } = useToast();
+  const { addToast, setToastConfig } = useToast();
   const { width } = useWindowDimensions();
   const isWide = width >= 768;
+  const [verticalPosition, setVerticalPosition] = useState<'top' | 'bottom'>(
+    'bottom'
+  );
+  const [horizontalPosition, setHorizontalPosition] = useState<
+    'left' | 'center' | 'right'
+  >('center');
+
+  const updatePosition = useCallback(
+    (
+      nextVertical: 'top' | 'bottom',
+      nextHorizontal: 'left' | 'center' | 'right'
+    ) => {
+      setToastConfig({
+        position: {
+          vertical: nextVertical,
+          horizontal: nextHorizontal,
+        },
+      });
+    },
+    [setToastConfig]
+  );
 
   const handlePress = useCallback(
     (config: ButtonConfig) => {
@@ -52,6 +89,22 @@ const ToastDemo: React.FC = () => {
     [addToast]
   );
 
+  const handleVerticalChange = useCallback(
+    (option: ToggleOption<'top' | 'bottom'>) => {
+      setVerticalPosition(option.value);
+      updatePosition(option.value, horizontalPosition);
+    },
+    [horizontalPosition, updatePosition]
+  );
+
+  const handleHorizontalChange = useCallback(
+    (option: ToggleOption<'left' | 'center' | 'right'>) => {
+      setHorizontalPosition(option.value);
+      updatePosition(verticalPosition, option.value);
+    },
+    [updatePosition, verticalPosition]
+  );
+
   return (
     <SafeAreaView style={styles.screen}>
       <StatusBar barStyle="light-content" />
@@ -76,6 +129,44 @@ const ToastDemo: React.FC = () => {
             Trigger different variants to see Rooster in action.
           </Text>
 
+          <View style={styles.settingsGroup}>
+            <Text style={styles.settingsLabel}>Vertical placement</Text>
+            <View style={styles.toggleRow}>
+              {VERTICAL_OPTIONS.map((option) => (
+                <Pressable
+                  key={option.value}
+                  accessibilityRole="button"
+                  style={({ pressed }) => [
+                    styles.toggle,
+                    option.value === verticalPosition && styles.toggleActive,
+                    pressed && styles.togglePressed,
+                  ]}
+                  onPress={() => handleVerticalChange(option)}
+                >
+                  <Text style={styles.toggleText}>{option.label}</Text>
+                </Pressable>
+              ))}
+            </View>
+
+            <Text style={styles.settingsLabel}>Horizontal alignment</Text>
+            <View style={styles.toggleRow}>
+              {HORIZONTAL_OPTIONS.map((option) => (
+                <Pressable
+                  key={option.value}
+                  accessibilityRole="button"
+                  style={({ pressed }) => [
+                    styles.toggle,
+                    option.value === horizontalPosition && styles.toggleActive,
+                    pressed && styles.togglePressed,
+                  ]}
+                  onPress={() => handleHorizontalChange(option)}
+                >
+                  <Text style={styles.toggleText}>{option.label}</Text>
+                </Pressable>
+              ))}
+            </View>
+          </View>
+
           <View style={[styles.buttonGroup, isWide && styles.buttonGroupWide]}>
             {BUTTONS.map((button) => (
               <Pressable
@@ -108,14 +199,6 @@ const ToastDemo: React.FC = () => {
   );
 };
 
-export default function App() {
-  return (
-    <ToastProvider>
-      <ToastDemo />
-    </ToastProvider>
-  );
-}
-
 const styles = StyleSheet.create({
   screen: {
     flex: 1,
@@ -186,6 +269,41 @@ const styles = StyleSheet.create({
     fontSize: 15,
     textAlign: 'center',
   },
+  settingsGroup: {
+    gap: 12,
+  },
+  settingsLabel: {
+    color: '#d1d5db',
+    fontSize: 14,
+    fontWeight: '600',
+  },
+  toggleRow: {
+    flexDirection: 'row',
+    gap: 8,
+  },
+  toggle: {
+    flex: 1,
+    borderRadius: 999,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: 'rgba(255,255,255,0.08)',
+    paddingVertical: 10,
+    alignItems: 'center',
+    backgroundColor: '#202020',
+  },
+  toggleActive: {
+    backgroundColor: '#4338ca',
+    borderColor: '#6366f1',
+  },
+  togglePressed: {
+    opacity: 0.85,
+  },
+  toggleText: {
+    color: '#f9fafb',
+    fontSize: 13,
+    fontWeight: '600',
+    textTransform: 'uppercase',
+    letterSpacing: 0.5,
+  },
   buttonGroup: {
     gap: 12,
   },
@@ -240,3 +358,11 @@ const styles = StyleSheet.create({
     textAlign: 'center',
   },
 });
+
+const App: React.FC = () => (
+  <ToastProvider>
+    <ToastDemo />
+  </ToastProvider>
+);
+
+export default App;

src/components/Toast.tsx

@@ -2,12 +2,18 @@ import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { Animated, Pressable, StyleSheet, Text, View } from 'react-native';
 import type { LayoutChangeEvent } from 'react-native';
 
-import type { ToastConfig, ToastMessage, ToastPlacement } from '../types';
+import type {
+  ToastConfig,
+  ToastHorizontalPosition,
+  ToastMessage,
+  ToastPlacement,
+} from '../types';
 
 interface ToastProps {
   message: ToastMessage;
   config: ToastConfig;
   placement: ToastPlacement;
+  horizontalPosition: ToastHorizontalPosition;
   offset: number;
   index: number;
   onRemove: (id: string) => void;
@@ -20,6 +26,7 @@ const Toast: React.FC<ToastProps> = ({
   message,
   config,
   placement,
+  horizontalPosition,
   offset,
   index,
   onRemove,
@@ -143,16 +150,37 @@ const Toast: React.FC<ToastProps> = ({
     opacity,
   ]);
 
+  const horizontalStyle = useMemo(() => {
+    switch (horizontalPosition) {
+      case 'left':
+        return styles.horizontalLeft;
+      case 'right':
+        return styles.horizontalRight;
+      default:
+        return styles.horizontalCenter;
+    }
+  }, [horizontalPosition]);
+
   const animatedStyle = useMemo(
     () => [
       styles.toast,
+      horizontalStyle,
       { backgroundColor },
       placement === 'top' ? { top: offset } : { bottom: offset },
       { opacity, transform: [{ translateY: translate }] },
       toastStyle,
       { zIndex: 1000 - index },
     ],
-    [backgroundColor, index, offset, opacity, placement, toastStyle, translate]
+    [
+      backgroundColor,
+      horizontalStyle,
+      index,
+      offset,
+      opacity,
+      placement,
+      toastStyle,
+      translate,
+    ]
   );
 
   return (
@@ -184,8 +212,7 @@ export default React.memo(Toast);
 const styles = StyleSheet.create({
   toast: {
     position: 'absolute',
-    left: 16,
-    right: 16,
+    maxWidth: 420,
     paddingVertical: 14,
     paddingHorizontal: 16,
     borderRadius: 12,
@@ -195,6 +222,21 @@ const styles = StyleSheet.create({
     shadowRadius: 16,
     elevation: 8,
   },
+  horizontalCenter: {
+    left: 16,
+    right: 16,
+    alignSelf: 'center',
+  },
+  horizontalLeft: {
+    left: 16,
+    right: undefined,
+    alignSelf: 'flex-start',
+  },
+  horizontalRight: {
+    left: undefined,
+    right: 16,
+    alignSelf: 'flex-end',
+  },
   pressable: {
     flexDirection: 'row',
     alignItems: 'flex-start',