feat: add embedded stack example (#126)

Author: okwasniewski

example/src/App.tsx

@@ -31,6 +31,7 @@ import LabeledTabs from './Examples/Labeled';
 import NativeBottomTabs from './Examples/NativeBottomTabs';
 import TintColorsExample from './Examples/TintColors';
 import NativeBottomTabsVectorIcons from './Examples/NativeBottomTabsVectorIcons';
+import NativeBottomTabsEmbeddedStacks from './Examples/NativeBottomTabsEmbeddedStacks';
 
 const FourTabsIgnoreSafeArea = () => {
   return <FourTabs ignoresTopSafeArea />;
@@ -69,6 +70,11 @@ const examples = [
   { component: FourTabs, name: 'Four Tabs' },
   { component: SFSymbols, name: 'SF Symbols' },
   { component: LabeledTabs, name: 'Labeled Tabs', platform: 'android' },
+  {
+    component: NativeBottomTabsEmbeddedStacks,
+    name: 'Embedded stacks',
+    screenOptions: { headerShown: false },
+  },
   {
     component: FourTabsIgnoreSafeArea,
     name: 'Four Tabs - No header',

example/src/Examples/NativeBottomTabsEmbeddedStacks.tsx

@@ -0,0 +1,104 @@
+import { Article } from '../Screens/Article';
+import { Albums } from '../Screens/Albums';
+import { Contacts } from '../Screens/Contacts';
+import { Chat } from '../Screens/Chat';
+import createNativeBottomTabNavigator from '../../../src/react-navigation/navigators/createNativeBottomTabNavigator';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+const headerOptions = {
+  headerShown: true,
+  headerLargeTitle: true,
+};
+
+const Tab = createNativeBottomTabNavigator();
+
+const ArticleStack = createNativeStackNavigator();
+const AlbumsStack = createNativeStackNavigator();
+const ContactsStack = createNativeStackNavigator();
+const ChatStack = createNativeStackNavigator();
+
+function ArticleStackScreen() {
+  return (
+    <ArticleStack.Navigator>
+      <ArticleStack.Screen
+        options={{ ...headerOptions }}
+        name="ArticleScreen"
+        component={Article}
+      />
+    </ArticleStack.Navigator>
+  );
+}
+
+function AlbumsStackScreen() {
+  return (
+    <AlbumsStack.Navigator>
+      <AlbumsStack.Screen
+        options={{ ...headerOptions }}
+        name="AlbumsScreen"
+        component={Albums}
+      />
+    </AlbumsStack.Navigator>
+  );
+}
+
+function ContactsStackScreen() {
+  return (
+    <ContactsStack.Navigator>
+      <ContactsStack.Screen
+        options={{ ...headerOptions }}
+        name="ContactsScreen"
+        component={Contacts}
+      />
+    </ContactsStack.Navigator>
+  );
+}
+
+function ChatStackScreen() {
+  return (
+    <ChatStack.Navigator>
+      <ChatStack.Screen
+        options={{ ...headerOptions }}
+        name="ChatScreen"
+        component={Chat}
+      />
+    </ChatStack.Navigator>
+  );
+}
+
+function NativeBottomTabsEmbeddedStacks() {
+  return (
+    <Tab.Navigator ignoresTopSafeArea>
+      <Tab.Screen
+        name="Article"
+        component={ArticleStackScreen}
+        options={{
+          tabBarBadge: '10',
+          tabBarIcon: () => require('../../assets/icons/article_dark.png'),
+        }}
+      />
+      <Tab.Screen
+        name="Albums"
+        component={AlbumsStackScreen}
+        options={{
+          tabBarIcon: () => require('../../assets/icons/grid_dark.png'),
+        }}
+      />
+      <Tab.Screen
+        name="Contacts"
+        component={ContactsStackScreen}
+        options={{
+          tabBarIcon: () => require('../../assets/icons/person_dark.png'),
+        }}
+      />
+      <Tab.Screen
+        name="Chat"
+        component={ChatStackScreen}
+        options={{
+          tabBarIcon: () => require('../../assets/icons/chat_dark.png'),
+        }}
+      />
+    </Tab.Navigator>
+  );
+}
+
+export default NativeBottomTabsEmbeddedStacks;

example/src/Screens/Albums.tsx

@@ -1,3 +1,5 @@
+import { useScrollToTop } from '@react-navigation/native';
+import React from 'react';
 import {
   Image,
   Platform,
@@ -41,8 +43,13 @@ export function Albums(props: Partial<ScrollViewProps>) {
   console.log(Platform.OS, ' Rendering Albums');
   const itemSize = dimensions.width / Math.floor(dimensions.width / 150);
 
+  const ref = React.useRef<ScrollView>(null);
+
+  useScrollToTop(ref);
+
   return (
     <ScrollView
+      ref={ref}
       contentContainerStyle={styles.content}
       contentInsetAdjustmentBehavior="automatic"
       {...props}

example/src/Screens/Article.tsx

@@ -1,3 +1,4 @@
+import { useScrollToTop } from '@react-navigation/native';
 import * as React from 'react';
 import {
   Button,
@@ -47,6 +48,8 @@ export function Article({
 }: Props) {
   const ref = React.useRef<ScrollView>(null);
 
+  useScrollToTop(ref);
+
   console.log(Platform.OS, ' Rendering Article');
   return (
     <ScrollView

example/src/Screens/Contacts.tsx

@@ -1,3 +1,4 @@
+import { useScrollToTop } from '@react-navigation/native';
 import * as React from 'react';
 import {
   FlatList,
@@ -96,9 +97,13 @@ export function Contacts({ query, ...rest }: Props) {
   console.log(Platform.OS, ' Rendering Contacts');
   const renderItem = ({ item }: { item: Item }) => <ContactItem item={item} />;
 
+  const ref = React.useRef<FlatList>(null);
+  useScrollToTop(ref);
+
   return (
     <SafeAreaView>
       <FlatList
+        ref={ref}
         contentInsetAdjustmentBehavior="automatic"
         {...rest}
         data={