chore: add css to macos example

apps/common-app/src/App.tsx

@@ -10,6 +10,7 @@ import { useCallback, useEffect, useState } from 'react';
 import { ActivityIndicator, Linking, View } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 
 import { colors, flex, radius, text } from '@/theme';
 import { IS_MACOS, IS_WEB, noop } from '@/utils';
@@ -38,8 +39,6 @@ export default function App() {
     );
   }
 
-  const RootApp = IS_MACOS ? ReanimatedApp : Navigator;
-
   return (
     <NukeContext value={() => setNuked(true)}>
       <GestureHandlerRootView style={flex.fill}>
@@ -73,10 +72,10 @@ export default function App() {
           onStateChange={updateNavigationState}>
           <PortalProvider>
             {IS_MACOS ? (
-              <RootApp />
+              <Navigator />
             ) : (
               <SafeAreaProvider>
-                <RootApp />
+                <Navigator />
               </SafeAreaProvider>
             )}
           </PortalProvider>
@@ -98,6 +97,29 @@ const SCREENS = [
 ];
 
 function Navigator() {
+  if (IS_MACOS) {
+    const Tab = createBottomTabNavigator();
+
+    return (
+      <Tab.Navigator
+        screenOptions={{
+          headerShown: false,
+          tabBarActiveTintColor: colors.primaryDark,
+          tabBarInactiveTintColor: colors.primary,
+          tabBarStyle: {
+            backgroundColor: colors.background1,
+            borderTopLeftRadius: radius.lg,
+            borderTopRightRadius: radius.lg,
+            height: 60,
+          },
+          tabBarLabelStyle: text.heading4,
+        }}>
+        {SCREENS.map(({ component, name }) => (
+          <Tab.Screen component={component} key={name} name={name} />
+        ))}
+      </Tab.Navigator>
+    );
+  }
   const Drawer = createDrawerNavigator();
   const screens = IS_WEB ? SCREENS : SCREENS.reverse();
 

apps/common-app/src/apps/css/examples/animations/routeCards/AnimatedPropertiesCard.tsx

@@ -9,6 +9,8 @@ import { RouteCard } from '@/apps/css/components';
 import { useFocusPlayState } from '@/apps/css/hooks';
 import { colors, radius, sizes, spacing } from '@/theme';
 
+import { IS_MACOS } from '@/utils';
+
 const exampleAnimationSettings: CSSAnimationSettings = {
   animationDuration: '3s',
   animationIterationCount: 'infinite',
@@ -18,7 +20,7 @@ const AnimatedPropertiesCard: RouteCardComponent = (props) => (
   <RouteCard
     {...props}
     description="Animated properties like **dimensions**, **colors** and **transforms**">
-    <Showcase />
+    {!IS_MACOS && <Showcase />}
   </RouteCard>
 );
 

apps/common-app/src/apps/css/examples/animations/routeCards/AnimationSettingsCard.tsx

@@ -9,6 +9,7 @@ import type { RouteCardComponent } from '@/apps/css/components';
 import { RouteCard } from '@/apps/css/components';
 import { useFocusPlayState } from '@/apps/css/hooks';
 import { colors, radius, sizes, spacing } from '@/theme';
+import { IS_MACOS } from '@/utils';
 
 const animationSettings: CSSAnimationSettings = {
   animationDirection: 'alternate',
@@ -21,7 +22,7 @@ const AnimationSettingsCard: RouteCardComponent = (props) => (
   <RouteCard
     {...props}
     description="Customization options: **duration**, **timing**, **delay**, and more">
-    <Showcase />
+    {!IS_MACOS && <Showcase />}
   </RouteCard>
 );
 

apps/common-app/src/apps/css/examples/animations/routeCards/MiscellaneousCard.tsx

@@ -11,12 +11,13 @@ import Animated, {
 import type { RouteCardComponent } from '@/apps/css/components';
 import { RouteCard, Text } from '@/apps/css/components';
 import { colors, radius, sizes, spacing } from '@/theme';
+import { IS_MACOS } from '@/utils';
 
 const MiscellaneousCard: RouteCardComponent = (props) => (
   <RouteCard
     {...props}
     description="**Changing** animation, animation **settings updates** and so on">
-    <Showcase />
+  {!IS_MACOS && <Showcase />}
   </RouteCard>
 );
 

apps/common-app/src/apps/css/examples/animations/routeCards/RealWorldExamplesCard.tsx

@@ -15,6 +15,7 @@ import type { RouteCardComponent } from '@/apps/css/components';
 import { RouteCard } from '@/apps/css/components';
 import { useFocusPlayState } from '@/apps/css/hooks';
 import { colors, flex, sizes } from '@/theme';
+import { IS_MACOS } from '@/utils';
 
 const TIME_MULTIPLIER = 1;
 
@@ -36,7 +37,7 @@ const RealWorldExamplesCard: RouteCardComponent = (props) => (
     {...props}
     description="Simple and complex **animations** that can be **used in apps**"
     showcaseScale={1.5}>
-    <Showcase />
+    {!IS_MACOS && <Showcase />}
   </RouteCard>
 );
 

apps/common-app/src/apps/css/examples/animations/routeCards/TestExamplesCard.tsx

@@ -1,18 +1,19 @@
 import { faCog } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
-import { View } from 'react-native';
+import { View, Pressable, Text } from 'react-native';
 import Animated, { css } from 'react-native-reanimated';
 
 import type { RouteCardComponent } from '@/apps/css/components';
 import { RouteCard } from '@/apps/css/components';
 import { useFocusPlayState } from '@/apps/css/hooks';
 import { colors, sizes, spacing } from '@/theme';
+import { IS_MACOS } from '@/utils';
 
 const TestExamplesCard: RouteCardComponent = (props) => (
   <RouteCard
     {...props}
     description="Examples to test **edge cases**, **performance**, etc. (useful for devs)">
-    <Showcase />
+    {!IS_MACOS && <Showcase />}
   </RouteCard>
 );
 

apps/common-app/src/apps/css/examples/transitions/routeCards/AnimatedPropertiesCard.tsx

@@ -8,6 +8,7 @@ import Animated from 'react-native-reanimated';
 import type { RouteCardComponent } from '@/apps/css/components';
 import { RouteCard } from '@/apps/css/components';
 import { colors, flex, radius, sizes, spacing } from '@/theme';
+import { IS_MACOS } from '@/utils';
 
 const scrollAnimation: CSSAnimationProperties = {
   animationIterationCount: 'infinite',
@@ -23,7 +24,7 @@ const AnimatedPropertiesCard: RouteCardComponent = (props) => (
   <RouteCard
     {...props}
     description="Animated properties like **flex styles**, **margins**, **dimensions** and others">
-    <Showcase />
+    {!IS_MACOS && <Showcase />}
   </RouteCard>
 );
 

apps/common-app/src/apps/css/examples/transitions/routeCards/MiscellaneousCard.tsx

@@ -10,12 +10,13 @@ import Animated, { FadeInLeft, FadeOutRight } from 'react-native-reanimated';
 import type { RouteCardComponent } from '@/apps/css/components';
 import { RouteCard, Text } from '@/apps/css/components';
 import { colors, flex, radius, sizes, spacing } from '@/theme';
+import { IS_MACOS } from '@/utils';
 
 const MiscellaneousCard: RouteCardComponent = (props) => (
   <RouteCard
     {...props}
     description="Changing **transition properties**, **transition settings** and so on">
-    <Showcase />
+    {!IS_MACOS && <Showcase />}
   </RouteCard>
 );
 

apps/common-app/src/apps/css/examples/transitions/routeCards/RealWorldExamplesCard.tsx

@@ -16,12 +16,13 @@ import Animated, { cubicBezier } from 'react-native-reanimated';
 import type { RouteCardComponent } from '@/apps/css/components';
 import { RouteCard } from '@/apps/css/components';
 import { colors, flex, iconSizes, radius, sizes, spacing } from '@/theme';
+import { IS_MACOS } from '@/utils';
 
 const RealWorldExamplesCard: RouteCardComponent = (props) => (
   <RouteCard
     {...props}
     description="Examples showing **use of transitions** in real-world scenarios">
-    <Showcase />
+    {!IS_MACOS && <Showcase />}
   </RouteCard>
 );
 

apps/common-app/src/apps/css/examples/transitions/routeCards/TestExamplesCard.tsx

@@ -7,12 +7,13 @@ import Animated from 'react-native-reanimated';
 import type { RouteCardComponent } from '@/apps/css/components';
 import { RouteCard } from '@/apps/css/components';
 import { colors, radius, sizes } from '@/theme';
+import { IS_MACOS } from '@/utils';
 
 const TestExamplesCard: RouteCardComponent = (props) => (
   <RouteCard
     {...props}
     description="Examples to test **edge cases**, **performance**, etc. (useful for devs)">
-    <Showcase />
+    {!IS_MACOS && <Showcase />}
   </RouteCard>
 );
 

apps/common-app/src/apps/css/examples/transitions/routeCards/TransitionSettingsCard.tsx

@@ -6,12 +6,13 @@ import Animated from 'react-native-reanimated';
 import type { RouteCardComponent } from '@/apps/css/components';
 import { RouteCard } from '@/apps/css/components';
 import { colors, sizes, spacing } from '@/theme';
+import { IS_MACOS } from '@/utils';
 
 const TransitionSettingsCard: RouteCardComponent = (props) => (
   <RouteCard
     {...props}
     description="Customization options: **duration**, **delay**, **timing function** and more">
-    <Showcase />
+    {!IS_MACOS && <Showcase />}
   </RouteCard>
 );
 

apps/common-app/src/apps/css/navigation/Navigator.tsx

@@ -19,6 +19,7 @@ import { INITIAL_ROUTE_NAME, TAB_ROUTES } from './routes';
 import { PullToSearchProvider, SearchScreen } from './search';
 import type { Routes } from './types';
 import { isRouteWithRoutes } from './utils';
+import { IS_MACOS } from '@/utils';
 
 type RootStackParamList = Record<string, React.ComponentType>;
 
@@ -116,8 +117,8 @@ function createStackScreens(
 
   const sharedOptions = {
     contentStyle: styles.content,
-    headerLeft: () => <BackButton />,
-    headerRight: () => <DrawerButton />,
+    headerLeft: () => (IS_MACOS ? undefined : <BackButton />),
+    headerRight: () => (IS_MACOS ? undefined : <DrawerButton />),
   };
 
   return [

apps/common-app/src/apps/css/navigation/search/ExpandableHeaderScreen.tsx

@@ -18,7 +18,7 @@ import Animated, {
 } from 'react-native-reanimated';
 
 import { flex } from '@/theme';
-import { IS_WEB } from '@/utils';
+import { IS_WEB, IS_MACOS } from '@/utils';
 
 const SPRING: WithSpringConfig = { stiffness: 140, damping: 22, mass: 0.6 };
 
@@ -238,7 +238,8 @@ export default function ExpandableHeaderScreen({
         </View>
       </Animated.View>
       <Animated.View style={[flex.fill, animatedContentContainerStyle]}>
-        {isExpanded ? (
+        {/* On macOS we disable the gesture handler to avoid interfering with the pointer events */}
+        {IS_MACOS || isExpanded ? (
           content
         ) : (
           <GestureDetector gesture={gesture}>{content}</GestureDetector>

apps/macos-example/Gemfile.lock

@@ -118,7 +118,7 @@ DEPENDENCIES
   xcodeproj (< 1.26.0)
 
 RUBY VERSION
-   ruby 3.3.6p108
+   ruby 3.2.0p0
 
 BUNDLED WITH
-   2.6.3
+   2.6.9

apps/macos-example/macos/MacOSExample-macOS/AppDelegate.mm

@@ -10,6 +10,7 @@ - (void)applicationDidFinishLaunching:(NSNotification *)notification
   // You can add your custom initial props in the dictionary below.
   // They will be passed down to the ViewController used by React Native.
   self.initialProps = @{};
+
   return [super applicationDidFinishLaunching:notification];
 }