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

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