chore: example now has bottom tabs

example/package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@expo/metro-runtime": "~3.2.3",
+    "@react-navigation/bottom-tabs": "^6.6.1",
     "@react-navigation/native": "^6.0.8",
     "@react-navigation/native-stack": "^6.9.12",
     "expo": "~51.0.32",

example/src/App.tsx

@@ -1,42 +1,27 @@
-import { NavigationContainer } from '@react-navigation/native';
-import { createNativeStackNavigator } from '@react-navigation/native-stack';
-import { ToastDemoModal } from 'example/src/ToastDemoModal';
-import { ToastDemoScreen } from 'example/src/ToastDemoScreen';
 import * as React from 'react';
+import { Text } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
-import { Toaster } from 'sonner-native';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { Toaster } from 'sonner-native';
 import '../global.css';
-import { Text } from 'react-native';
-
-const Stack = createNativeStackNavigator();
+import Navigator from './navigation';
 
 const App: React.FC = () => {
   return (
     <SafeAreaProvider>
       <GestureHandlerRootView>
-        <NavigationContainer>
-          <Stack.Navigator screenOptions={{}}>
-            <Stack.Screen name="ToastDemo" component={ToastDemoScreen} />
-            <Stack.Screen
-              name="ToastDemoModal"
-              component={ToastDemoModal}
-              options={{
-                presentation: 'modal',
-              }}
-            />
-          </Stack.Navigator>
-        </NavigationContainer>
+        <Navigator />
         <Toaster
-          position="top-center"
+          position="bottom-center"
           // offset={100}
-          duration={3000}
+          duration={30000}
           swipToDismissDirection="up"
           visibleToasts={4}
           closeButton
           icons={{
             error: <Text>💥</Text>,
           }}
+          offset={200}
           toastOptions={{}}
         />
       </GestureHandlerRootView>

example/src/navigation.tsx

@@ -0,0 +1,111 @@
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { NavigationContainer } from '@react-navigation/native';
+import {
+  createNativeStackNavigator,
+  type NativeStackScreenProps,
+} from '@react-navigation/native-stack';
+import { Button, Text, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { ToastDemo } from './ToastDemo';
+
+function HomeScreen({
+  navigation,
+}: NativeStackScreenProps<HomeStackParamList, 'Home'>) {
+  return (
+    <SafeAreaView style={{ flex: 1, backgroundColor: 'white' }}>
+      <Button
+        title="Show modal"
+        onPress={() => {
+          navigation.getParent()?.navigate('Modal');
+        }}
+      />
+      <ToastDemo />
+    </SafeAreaView>
+  );
+}
+
+function SettingsScreen() {
+  return (
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      <Text>Settings screen</Text>
+    </View>
+  );
+}
+
+type HomeStackParamList = {
+  Home: undefined;
+};
+
+const HomeStack = createNativeStackNavigator<HomeStackParamList>();
+
+function HomeStackScreen() {
+  return (
+    <HomeStack.Navigator>
+      <HomeStack.Screen name="Home" component={HomeScreen} />
+    </HomeStack.Navigator>
+  );
+}
+
+type SettingsStackParamList = {
+  Settings: undefined;
+};
+
+const SettingsStack = createNativeStackNavigator<SettingsStackParamList>();
+
+function SettingsStackScreen() {
+  return (
+    <SettingsStack.Navigator>
+      <SettingsStack.Screen name="Settings" component={SettingsScreen} />
+    </SettingsStack.Navigator>
+  );
+}
+
+type RootStackParamList = {
+  Tab: undefined;
+  Modal: undefined;
+};
+
+const RootStack = createNativeStackNavigator<RootStackParamList>();
+
+const Tab = createBottomTabNavigator();
+
+const MainTab: React.FC = () => {
+  return (
+    <Tab.Navigator screenOptions={{ headerShown: false }}>
+      <Tab.Screen name="HomeStack" component={HomeStackScreen} />
+      <Tab.Screen name="SettingsStack" component={SettingsStackScreen} />
+    </Tab.Navigator>
+  );
+};
+
+const ToastDemoModal: React.FC = () => {
+  return (
+    <SafeAreaView style={{ flex: 1, backgroundColor: 'white' }}>
+      <ToastDemo />
+    </SafeAreaView>
+  );
+};
+
+export default function Navigator() {
+  return (
+    <NavigationContainer>
+      <RootStack.Navigator>
+        <RootStack.Screen
+          name="Tab"
+          component={MainTab}
+          options={{
+            headerShown: false,
+          }}
+        />
+        <RootStack.Screen
+          name="Modal"
+          component={ToastDemoModal}
+          options={{
+            presentation: 'modal',
+            headerShown: false,
+          }}
+        />
+      </RootStack.Navigator>
+    </NavigationContainer>
+  );
+}

package.json

@@ -218,4 +218,4 @@
     "type": "library",
     "version": "0.41.0"
   }
-}
+}

yarn.lock

@@ -4303,6 +4303,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@react-navigation/bottom-tabs@npm:^6.6.1":
+  version: 6.6.1
+  resolution: "@react-navigation/bottom-tabs@npm:6.6.1"
+  dependencies:
+    "@react-navigation/elements": ^1.3.31
+    color: ^4.2.3
+    warn-once: ^0.1.0
+  peerDependencies:
+    "@react-navigation/native": ^6.0.0
+    react: "*"
+    react-native: "*"
+    react-native-safe-area-context: ">= 3.0.0"
+    react-native-screens: ">= 3.0.0"
+  checksum: 07d6da4b91d7f372b67bcb9f1ff97fba96f1fe226bd95d43d7877362ce71d99c6eebe9ca41d84ea8828f055713386262e089a8207a6c849f33bae49b4df4b196
+  languageName: node
+  linkType: hard
+
 "@react-navigation/core@npm:^6.4.17":
   version: 6.4.17
   resolution: "@react-navigation/core@npm:6.4.17"
@@ -7156,13 +7173,33 @@ __metadata:
   languageName: node
   linkType: hard
 
-"color-name@npm:~1.1.4":
+"color-name@npm:^1.0.0, color-name@npm:~1.1.4":
   version: 1.1.4
   resolution: "color-name@npm:1.1.4"
   checksum: b0445859521eb4021cd0fb0cc1a75cecf67fceecae89b63f62b201cca8d345baf8b952c966862a9d9a2632987d4f6581f0ec8d957dfacece86f0a7919316f610
   languageName: node
   linkType: hard
 
+"color-string@npm:^1.9.0":
+  version: 1.9.1
+  resolution: "color-string@npm:1.9.1"
+  dependencies:
+    color-name: ^1.0.0
+    simple-swizzle: ^0.2.2
+  checksum: c13fe7cff7885f603f49105827d621ce87f4571d78ba28ef4a3f1a104304748f620615e6bf065ecd2145d0d9dad83a3553f52bb25ede7239d18e9f81622f1cc5
+  languageName: node
+  linkType: hard
+
+"color@npm:^4.2.3":
+  version: 4.2.3
+  resolution: "color@npm:4.2.3"
+  dependencies:
+    color-convert: ^2.0.1
+    color-string: ^1.9.0
+  checksum: 0579629c02c631b426780038da929cca8e8d80a40158b09811a0112a107c62e10e4aad719843b791b1e658ab4e800558f2e87ca4522c8b32349d497ecb6adeb4
+  languageName: node
+  linkType: hard
+
 "colord@npm:^2.9.3":
   version: 2.9.3
   resolution: "colord@npm:2.9.3"
@@ -11810,6 +11847,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-arrayish@npm:^0.3.1":
+  version: 0.3.2
+  resolution: "is-arrayish@npm:0.3.2"
+  checksum: 977e64f54d91c8f169b59afcd80ff19227e9f5c791fa28fa2e5bce355cbaf6c2c356711b734656e80c9dd4a854dd7efcf7894402f1031dfc5de5d620775b4d5f
+  languageName: node
+  linkType: hard
+
 "is-async-function@npm:^2.0.0":
   version: 2.0.0
   resolution: "is-async-function@npm:2.0.0"
@@ -19145,6 +19189,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"simple-swizzle@npm:^0.2.2":
+  version: 0.2.2
+  resolution: "simple-swizzle@npm:0.2.2"
+  dependencies:
+    is-arrayish: ^0.3.1
+  checksum: a7f3f2ab5c76c4472d5c578df892e857323e452d9f392e1b5cf74b74db66e6294a1e1b8b390b519fa1b96b5b613f2a37db6cffef52c3f1f8f3c5ea64eb2d54c0
+  languageName: node
+  linkType: hard
+
 "sirv@npm:^2.0.3":
   version: 2.0.4
   resolution: "sirv@npm:2.0.4"
@@ -19280,6 +19333,7 @@ __metadata:
   dependencies:
     "@babel/core": ^7.20.0
     "@expo/metro-runtime": ~3.2.3
+    "@react-navigation/bottom-tabs": ^6.6.1
     "@react-navigation/native": ^6.0.8
     "@react-navigation/native-stack": ^6.9.12
     expo: ~51.0.32