feat(example): Add example for MaterialTopTabs auth flow

example/package.json

@@ -18,6 +18,7 @@
   "dependencies": {
     "@callstack/react-native-visionos": "^0.76.0",
     "@react-native-community/masked-view": "^0.1.10",
+    "@react-navigation/material-top-tabs": "^6.6.14",
     "@react-navigation/native": "^6.0.13",
     "@react-navigation/native-stack": "^6.9.1",
     "@react-navigation/stack": "^6.3.2",

example/src/App.tsx

@@ -11,7 +11,7 @@ import {
   Button,
   Alert,
   I18nManager,
-  DevSettings
+  DevSettings,
 } from 'react-native';
 import { NavigationContainer, useNavigation } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
@@ -31,6 +31,7 @@ import CustomIndicatorExample from './tabView/CustomIndicatorExample';
 import CustomTabBarExample from './tabView/CustomTabBarExample';
 import CoverflowExample from './tabView/CoverflowExample';
 import ReanimatedOnPageScrollExample from './ReanimatedOnPageScrollExample';
+import { MaterialTopBarExample } from './MaterialTopTabExample';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { PagerHookExample } from './PagerHookExample';
@@ -43,6 +44,7 @@ const examples = [
   { component: OnPageSelectedExample, name: 'OnPageSelected Example' },
   { component: HeadphonesCarouselExample, name: 'Headphones Carousel Example' },
   { component: PaginationDotsExample, name: 'Pagination Dots Example' },
+  {component: MaterialTopBarExample, name: 'MaterialTopBarExample'},
   {
     component: ScrollablePagerViewExample,
     name: 'Scrollable PagerView Example',

example/src/MaterialTopTabExample.tsx

@@ -0,0 +1,86 @@
+import React, { useState } from 'react';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
+
+import { View, Text, Button } from 'react-native';
+
+
+
+function Tab1() {
+    return (
+        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+            <Text>Tab 1</Text>
+        </View>
+    );
+}
+
+function Tab2(props: any) {
+    return (
+        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+            <Button
+                title="Logout"
+                onPress={props.onLogout}
+            />
+        </View>
+    );
+}
+
+const PreAuthScreen = (props: any) => {
+
+    return (
+        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+            <Button
+                title="Login"
+                onPress={() => props.setIsSignedIn(true)}
+            />
+        </View>
+    );
+
+};
+
+const PostAuthScreen = (props: any) => {
+    const { Navigator, Screen } = createMaterialTopTabNavigator();
+
+
+    const onLogout = () => {
+        setTimeout(() => {
+            props.setIsSignedIn(false);
+        }, 0);
+    };
+
+    return (
+        <View style={{ flex: 1 }}>
+            <Navigator>
+                <Screen name="Tab1" component={Tab1} />
+
+                    <Screen
+                        name="Tab2">
+                        {(props: any) => <Tab2 {...props} onLogout={onLogout} />}
+                    </Screen>
+            </Navigator>
+        </View>
+    );
+
+};
+
+export function MaterialTopBarExample() {
+    const { Screen, Navigator } = createNativeStackNavigator();
+    const [isSignedIn, setIsSignedIn] = useState(false);
+
+    return (
+
+            <Navigator>
+                {!isSignedIn ?
+                    <Screen
+                        name="Pre Auth Screen">
+                        {(props: any) => <PreAuthScreen {...props} setIsSignedIn={setIsSignedIn} />}
+                    </Screen>
+                    :
+                    <Screen
+                        name="Post Auth Screen">
+                        {(props: any) => <PostAuthScreen {...props} setIsSignedIn={setIsSignedIn} />}
+                    </Screen>
+                }
+            </Navigator>
+    );
+}