From ca0d63e0496ce95803ccd3642d59f00b75b3f104 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Bert?=
 <63123542+m-bert@users.noreply.github.com>
Date: Mon, 7 Oct 2024 10:29:59 +0200
Subject: [PATCH] Disable examples on unsupported platforms (#3135)

## Description

Some of our examples are platform-specific, which means that running them on other platforms doesn't make much sense. In this PR I've disabled navigation buttons so that opening such examples is not possible on unsupported platforms.

E.g.: _**Web styles reset**_ works only on `web`. After this PR you'll no longer be able to open it on other platforms, like `ios` or `android`.

<img width="329" alt="image" src="https://github.com/user-attachments/assets/847b25b0-d305-4787-ad24-aca399811a5a">

## Test plan

Go through example app
---
 example/App.tsx | 43 +++++++++++++++++++++++++++++++++++--------
 1 file changed, 35 insertions(+), 8 deletions(-)

diff --git a/example/App.tsx b/example/App.tsx
index 768506c93b..d6c43229db 100644
--- a/example/App.tsx
+++ b/example/App.tsx
@@ -86,6 +86,7 @@ import { Icon } from '@swmansion/icons';
 interface Example {
   name: string;
   component: React.ComponentType;
+  unsupportedPlatforms?: Set<typeof Platform.OS>;
 }
 interface ExamplesSection {
   sectionTitle: string;
@@ -130,8 +131,16 @@ const EXAMPLES: ExamplesSection[] = [
       { name: 'Bouncing box', component: BouncingBox },
       { name: 'Pan responder', component: PanResponder },
       { name: 'Horizontal drawer', component: HorizontalDrawer },
-      { name: 'Pager & drawer', component: PagerAndDrawer },
-      { name: 'Force touch', component: ForceTouch },
+      {
+        name: 'Pager & drawer',
+        component: PagerAndDrawer,
+        unsupportedPlatforms: new Set(['web', 'ios', 'macos']),
+      },
+      {
+        name: 'Force touch',
+        component: ForceTouch,
+        unsupportedPlatforms: new Set(['web', 'android', 'macos']),
+      },
       { name: 'Fling', component: Fling },
     ],
   },
@@ -170,8 +179,9 @@ const EXAMPLES: ExamplesSection[] = [
         component: NestedPressables as React.ComponentType,
       },
       {
-        name: 'Nested buttons (sound & ripple on Android)',
+        name: 'Nested buttons (sound & ripple)',
         component: NestedButtons,
+        unsupportedPlatforms: new Set(['web', 'ios', 'macos']),
       },
       { name: 'Double pinch & rotate', component: DoublePinchRotate },
       { name: 'Double draggable', component: DoubleDraggable },
@@ -180,12 +190,20 @@ const EXAMPLES: ExamplesSection[] = [
       { name: 'Combo', component: ComboWithGHScroll },
       { name: 'Touchables', component: TouchablesIndex as React.ComponentType },
       { name: 'MouseButtons', component: MouseButtons },
-      { name: 'ContextMenu (web only)', component: ContextMenu },
+      {
+        name: 'ContextMenu',
+        component: ContextMenu,
+        unsupportedPlatforms: new Set(['android', 'ios', 'macos']),
+      },
       { name: 'PointerType', component: PointerType },
       { name: 'Swipeable Reanimation', component: SwipeableReanimation },
       { name: 'RectButton (borders)', component: RectButtonBorders },
       { name: 'Gesturized pressable', component: GesturizedPressable },
-      { name: 'Web styles reset', component: WebStylesResetExample },
+      {
+        name: 'Web styles reset',
+        component: WebStylesResetExample,
+        unsupportedPlatforms: new Set(['android', 'ios', 'macos']),
+      },
       { name: 'Stylus data', component: StylusData },
     ],
   },
@@ -285,6 +303,7 @@ function MainScreen({ navigation }: StackScreenProps<ParamListBase>) {
           <MainScreenItem
             name={item.name}
             onPressItem={(name) => navigate(navigation, name)}
+            enabled={!item.unsupportedPlatforms?.has(Platform.OS)}
           />
         )}
         renderSectionHeader={({ section: { sectionTitle } }) => (
@@ -334,13 +353,17 @@ function OpenLastExampleSetting() {
 interface MainScreenItemProps {
   name: string;
   onPressItem: (name: string) => void;
+  enabled: boolean;
 }
 
-function MainScreenItem({ name, onPressItem }: MainScreenItemProps) {
+function MainScreenItem({ name, onPressItem, enabled }: MainScreenItemProps) {
   return (
-    <RectButton style={[styles.button]} onPress={() => onPressItem(name)}>
+    <RectButton
+      enabled={enabled}
+      style={[styles.button, !enabled && styles.unavailableExample]}
+      onPress={() => onPressItem(name)}>
       <Text style={styles.text}>{name}</Text>
-      {Platform.OS !== 'macos' && (
+      {Platform.OS !== 'macos' && enabled && (
         <Icon name="chevron-small-right" size={24} color="#bbb" />
       )}
     </RectButton>
@@ -406,4 +429,8 @@ const styles = StyleSheet.create({
         }
       : {}),
   },
+  unavailableExample: {
+    backgroundColor: 'rgb(220, 220, 220)',
+    opacity: 0.3,
+  },
 });