callstackincubator · okwasniewski · Oct 1, 2024 · Sep 30, 2024 · Oct 1, 2024
diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock
@@ -1230,6 +1230,8 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
+  - react-native-safe-area-context (4.11.0):
+    - React-Core
   - React-nativeconfig (0.75.3)
   - React-NativeModulesApple (0.75.3):
     - glog
@@ -1499,6 +1501,49 @@ PODS:
     - React-Core
     - React-jsi
   - ReactTestApp-Resources (1.0.0-dev)
+  - RNGestureHandler (2.20.0):
+    - DoubleConversion
+    - glog
+    - RCT-Folly (= 2024.01.01.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-jsi
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
+  - RNScreens (3.34.0):
+    - DoubleConversion
+    - glog
+    - RCT-Folly (= 2024.01.01.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-jsi
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-RCTImage
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
   - SocketRocket (0.7.0)
   - Yoga (0.0.0)
 
@@ -1540,6 +1585,7 @@ DEPENDENCIES:
   - React-Mapbuffer (from `../node_modules/react-native/ReactCommon`)
   - React-microtasksnativemodule (from `../node_modules/react-native/ReactCommon/react/nativemodule/microtasks`)
   - react-native-bottom-tabs (from `../..`)
+  - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
   - React-nativeconfig (from `../node_modules/react-native/ReactCommon`)
   - React-NativeModulesApple (from `../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios`)
   - React-perflogger (from `../node_modules/react-native/ReactCommon/reactperflogger`)
@@ -1568,6 +1614,8 @@ DEPENDENCIES:
   - "ReactNativeHost (from `../node_modules/@rnx-kit/react-native-host`)"
   - ReactTestApp-DevSupport (from `../node_modules/react-native-test-app`)
   - ReactTestApp-Resources (from `..`)
+  - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
+  - RNScreens (from `../node_modules/react-native-screens`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
@@ -1645,6 +1693,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/react/nativemodule/microtasks"
   react-native-bottom-tabs:
     :path: "../.."
+  react-native-safe-area-context:
+    :path: "../node_modules/react-native-safe-area-context"
   React-nativeconfig:
     :path: "../node_modules/react-native/ReactCommon"
   React-NativeModulesApple:
@@ -1701,6 +1751,10 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-test-app"
   ReactTestApp-Resources:
     :path: ".."
+  RNGestureHandler:
+    :path: "../node_modules/react-native-gesture-handler"
+  RNScreens:
+    :path: "../node_modules/react-native-screens"
   Yoga:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
@@ -1740,6 +1794,7 @@ SPEC CHECKSUMS:
   React-Mapbuffer: 714f2fae68edcabfc332b754e9fbaa8cfc68fdd4
   React-microtasksnativemodule: 987cf7e0e0e7129250a48b807e70d3b906c726cf
   react-native-bottom-tabs: 894d1fb8fc4e6d525b2da35e83e00e18c420cdf2
+  react-native-safe-area-context: 851c62c48dce80ccaa5637b6aa5991a1bc36eca9
   React-nativeconfig: 4a9543185905fe41014c06776bf126083795aed9
   React-NativeModulesApple: 651670a799672bd54469f2981d91493dda361ddf
   React-perflogger: 3bbb82f18e9ac29a1a6931568e99d6305ef4403b
@@ -1768,9 +1823,11 @@ SPEC CHECKSUMS:
   ReactNativeHost: 99c0ffb175cd69de2ac9a70892cd22dac65ea79d
   ReactTestApp-DevSupport: b7cd76a3aeee6167f5e14d82f09685059152c426
   ReactTestApp-Resources: 7db90c026cccdf40cfa495705ad436ccc4d64154
+  RNGestureHandler: 18b9b5d65c77c4744a640f69b7fccdd47ed935c0
+  RNScreens: 5288a8dbeedb3c5051aa2d5658c1c553c050b80a
   SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d
-  Yoga: 1354c027ab07c7736f99a3bef16172d6f1b12b47
+  Yoga: 4ef80d96a5534f0e01b3055f17d1e19a9fc61b63
 
 PODFILE CHECKSUM: 539add55dc6c2e7f9754e288b1ce4fd8583819ae
 
-COCOAPODS: 1.14.3
+COCOAPODS: 1.15.2
diff --git a/example/package.json b/example/package.json
@@ -14,9 +14,16 @@
   },
   "dependencies": {
     "@callstack/react-native-visionos": "^0.75.0",
+    "@react-navigation/bottom-tabs": "^6.6.1",
+    "@react-navigation/native": "^6.1.18",
+    "@react-navigation/native-stack": "^6.11.0",
+    "@react-navigation/stack": "^6.4.1",
     "color": "^4.2.3",
     "react": "18.3.1",
-    "react-native": "0.75.3"
+    "react-native": "0.75.3",
+    "react-native-gesture-handler": "^2.20.0",
+    "react-native-safe-area-context": "^4.11.0",
+    "react-native-screens": "^3.34.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -1,55 +1,109 @@
-import { StyleSheet } from 'react-native';
-import TabView, {
-  type OnPageSelectedEventData,
-  type TabViewItems,
-} from 'react-native-bottom-tabs';
-import { Article } from './Screens/Article';
-import { Contacts } from './Screens/Contacts';
-import { Albums } from './Screens/Albums';
-import { useState } from 'react';
+import { enableScreens } from 'react-native-screens';
+// run this before any screen render(usually in App.js)
+enableScreens();
 
-const items: TabViewItems = [
-  { key: 'article', title: 'Article', icon: 'document.fill', badge: '!' },
-  { key: 'albums', title: 'Albums', icon: 'square.grid.2x2.fill', badge: '5' },
-  { key: 'contacts', title: 'Contacts', icon: 'person.fill' },
+import * as React from 'react';
+import {
+  StyleSheet,
+  Text,
+  ScrollView,
+  TouchableOpacity,
+  Button,
+  Alert,
+} from 'react-native';
+import { NavigationContainer, useNavigation } from '@react-navigation/native';
+import { createStackNavigator } from '@react-navigation/stack';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import JSBottomTabs from './Examples/JSBottomTabs';
+import ThreeTabs from './Examples/ThreeTabs';
+import FourTabs from './Examples/FourTabs';
+
+const examples = [
+  { component: ThreeTabs, name: 'Three Tabs' },
+  { component: FourTabs, name: 'Four Tabs' },
+  { component: JSBottomTabs, name: 'JS Bottom Tabs' },
 ];
 
-export default function App() {
-  const [selectedPage, setSelectedTab] = useState<string>('contacts');
+function App() {
+  const navigation = useNavigation();
+  return (
+    <ScrollView>
+      {examples.map((example) => (
+        <TouchableOpacity
+          key={example.name}
+          testID={example.name}
+          style={styles.exampleTouchable}
+          onPress={() => {
+            //@ts-ignore
+            navigation.navigate(example.name);
+          }}
+        >
+          <Text style={styles.exampleText}>{example.name}</Text>
+        </TouchableOpacity>
+      ))}
+    </ScrollView>
+  );
+}
 
-  const handlePageSelected = ({
-    nativeEvent: { key },
-  }: {
-    nativeEvent: OnPageSelectedEventData;
-  }) => setSelectedTab(key);
+const Stack = createStackNavigator();
 
-  const goToAlbums = () => {
-    setSelectedTab('albums');
-  };
+const NativeStack = createNativeStackNavigator();
 
+export default function Navigation() {
+  const [mode, setMode] = React.useState<'native' | 'js'>('native');
+  const NavigationStack = mode === 'js' ? Stack : NativeStack;
   return (
-    <TabView
-      style={styles.fullWidth}
-      items={items}
-      tabViewStyle="sidebarAdaptable"
-      selectedPage={selectedPage}
-      onPageSelected={handlePageSelected}
-    >
-      <Article onClick={goToAlbums} />
-      <Albums />
-      <Contacts />
-    </TabView>
+    <SafeAreaProvider>
+      <NavigationContainer>
+        <NavigationStack.Navigator initialRouteName="BottomTabs Example">
+          <NavigationStack.Screen
+            name="BottomTabs Example"
+            component={App}
+            options={{
+              headerRight: () => (
+                <Button
+                  onPress={() =>
+                    Alert.alert(
+                      'Alert',
+                      `Do you want to change to the ${
+                        mode === 'js' ? 'native stack' : 'js stack'
+                      } ?`,
+                      [
+                        { text: 'No', onPress: () => {} },
+                        {
+                          text: 'Yes',
+                          onPress: () => {
+                            setMode(mode === 'js' ? 'native' : 'js');
+                          },
+                        },
+                      ]
+                    )
+                  }
+                  title={mode === 'js' ? 'JS' : 'NATIVE'}
+                  color="blue"
+                />
+              ),
+            }}
+          />
+          {examples.map((example, index) => (
+            <NavigationStack.Screen
+              key={index}
+              name={example.name}
+              component={example.component}
+            />
+          ))}
+        </NavigationStack.Navigator>
+      </NavigationContainer>
+    </SafeAreaProvider>
   );
 }
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
+  exampleTouchable: {
+    padding: 16,
   },
-  fullWidth: {
-    width: '100%',
-    height: '100%',
+  exampleText: {
+    fontSize: 16,
   },
 });
diff --git a/example/src/Examples/FourTabs.tsx b/example/src/Examples/FourTabs.tsx
@@ -0,0 +1,53 @@
+import { StyleSheet } from 'react-native';
+import TabView, {
+  type OnPageSelectedEventData,
+  type TabViewItems,
+} from 'react-native-bottom-tabs';
+import { useState } from 'react';
+import { Article } from '../Screens/Article';
+import { Albums } from '../Screens/Albums';
+import { Chat } from '../Screens/Chat';
+import { Contacts } from '../Screens/Contacts';
+
+const items: TabViewItems = [
+  { key: 'article', title: 'Article', icon: 'document.fill', badge: '!' },
+  { key: 'albums', title: 'Albums', icon: 'square.grid.2x2.fill', badge: '5' },
+  { key: 'contacts', title: 'Contacts', icon: 'person.fill' },
+  { key: 'chat', title: 'Chat', icon: 'keyboard' },
+];
+
+export default function FourTabs() {
+  const [selectedPage, setSelectedTab] = useState<string>('contacts');
+
+  const handlePageSelected = ({
+    nativeEvent: { key },
+  }: {
+    nativeEvent: OnPageSelectedEventData;
+  }) => setSelectedTab(key);
+
+  const goToAlbums = () => {
+    setSelectedTab('albums');
+  };
+
+  return (
+    <TabView
+      style={styles.fullWidth}
+      items={items}
+      tabViewStyle="sidebarAdaptable"
+      selectedPage={selectedPage}
+      onPageSelected={handlePageSelected}
+    >
+      <Article onClick={goToAlbums} />
+      <Albums />
+      <Contacts />
+      <Chat />
+    </TabView>
+  );
+}
+
+const styles = StyleSheet.create({
+  fullWidth: {
+    width: '100%',
+    height: '100%',
+  },
+});
diff --git a/example/src/Examples/JSBottomTabs.tsx b/example/src/Examples/JSBottomTabs.tsx
@@ -0,0 +1,20 @@
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { Article } from '../Screens/Article';
+import { Albums } from '../Screens/Albums';
+import { Contacts } from '../Screens/Contacts';
+import { Chat } from '../Screens/Chat';
+
+const Tab = createBottomTabNavigator();
+
+function JSBottomTabs() {
+  return (
+    <Tab.Navigator screenOptions={{ headerShown: false }}>
+      <Tab.Screen name="Article" component={Article} />
+      <Tab.Screen name="Albums" component={Albums} />
+      <Tab.Screen name="Contacts" component={Contacts} />
+      <Tab.Screen name="Chat" component={Chat} />
+    </Tab.Navigator>
+  );
+}
+
+export default JSBottomTabs;