feat(example): Add example for MaterialTopTabs auth flow (#943)

Author: MrRefactor

example/bun.lockb

@@ -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/package.json

@@ -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/App.tsx

@@ -0,0 +1,72 @@
+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>
+  );
+}