From 6fcd491443e404f9c1addd14bfa9845559e1b81f Mon Sep 17 00:00:00 2001
From: yash04577 <yash04577@gmail.com>
Date: Sun, 4 Jan 2026 00:44:33 +0530
Subject: [PATCH 1/3] Handle alerts correctly on web in Button example

---
 website/versioned_docs/version-0.82/button.md | 21 +++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/website/versioned_docs/version-0.82/button.md b/website/versioned_docs/version-0.82/button.md
index cfed6819d28..44bc317929d 100644
--- a/website/versioned_docs/version-0.82/button.md
+++ b/website/versioned_docs/version-0.82/button.md
@@ -20,11 +20,20 @@ If this button doesn't look right for your app, you can build your own button us
 
 ```SnackPlayer name=Button%20Example
 import React from 'react';
-import {StyleSheet, Button, View, Text, Alert} from 'react-native';
+import {StyleSheet, Button, View, Text, Alert, Platform} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
 const Separator = () => <View style={styles.separator} />;
 
+  function showAlert(message: string){
+    if(Platform.OS === "web"){
+      window.alert(message);
+    }
+    else{
+      Alert.alert(message)
+    }
+  }
+
 const App = () => (
   <SafeAreaProvider>
     <SafeAreaView style={styles.container}>
@@ -35,7 +44,7 @@ const App = () => (
         </Text>
         <Button
           title="Press me"
-          onPress={() => Alert.alert('Simple Button pressed')}
+          onPress={() => showAlert('Simple Button pressed')}
         />
       </View>
       <Separator />
@@ -48,7 +57,7 @@ const App = () => (
         <Button
           title="Press me"
           color="#f194ff"
-          onPress={() => Alert.alert('Button with adjusted color pressed')}
+          onPress={() => showAlert('Button with adjusted color pressed')}
         />
       </View>
       <Separator />
@@ -59,7 +68,7 @@ const App = () => (
         <Button
           title="Press me"
           disabled
-          onPress={() => Alert.alert('Cannot press this one')}
+          onPress={() => showAlert('Cannot press this one')}
         />
       </View>
       <Separator />
@@ -70,11 +79,11 @@ const App = () => (
         <View style={styles.fixToText}>
           <Button
             title="Left button"
-            onPress={() => Alert.alert('Left button pressed')}
+            onPress={() => showAlert('Left button pressed')}
           />
           <Button
             title="Right button"
-            onPress={() => Alert.alert('Right button pressed')}
+            onPress={() => showAlert('Right button pressed')}
           />
         </View>
       </View>

From 8814ff96f972d88ee2fb1710b4d32714cbbc80a0 Mon Sep 17 00:00:00 2001
From: yash04577 <yash04577@gmail.com>
Date: Sun, 4 Jan 2026 00:48:37 +0530
Subject: [PATCH 2/3] Handle alerts correctly on web in Button example

---
 website/versioned_docs/version-0.82/button.md | 21 +++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/website/versioned_docs/version-0.82/button.md b/website/versioned_docs/version-0.82/button.md
index cfed6819d28..bd5b9f1ab2f 100644
--- a/website/versioned_docs/version-0.82/button.md
+++ b/website/versioned_docs/version-0.82/button.md
@@ -20,11 +20,20 @@ If this button doesn't look right for your app, you can build your own button us
 
 ```SnackPlayer name=Button%20Example
 import React from 'react';
-import {StyleSheet, Button, View, Text, Alert} from 'react-native';
+import {StyleSheet, Button, View, Text, Alert, Platform} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
 const Separator = () => <View style={styles.separator} />;
 
+function showAlert(message: string){
+  if(Platform.OS === "web"){
+    window.alert(message);
+  }
+  else{
+    Alert.alert(message)
+  }
+}
+
 const App = () => (
   <SafeAreaProvider>
     <SafeAreaView style={styles.container}>
@@ -35,7 +44,7 @@ const App = () => (
         </Text>
         <Button
           title="Press me"
-          onPress={() => Alert.alert('Simple Button pressed')}
+          onPress={() => showAlert('Simple Button pressed')}
         />
       </View>
       <Separator />
@@ -48,7 +57,7 @@ const App = () => (
         <Button
           title="Press me"
           color="#f194ff"
-          onPress={() => Alert.alert('Button with adjusted color pressed')}
+          onPress={() => showAlert('Button with adjusted color pressed')}
         />
       </View>
       <Separator />
@@ -59,7 +68,7 @@ const App = () => (
         <Button
           title="Press me"
           disabled
-          onPress={() => Alert.alert('Cannot press this one')}
+          onPress={() => showAlert('Cannot press this one')}
         />
       </View>
       <Separator />
@@ -70,11 +79,11 @@ const App = () => (
         <View style={styles.fixToText}>
           <Button
             title="Left button"
-            onPress={() => Alert.alert('Left button pressed')}
+            onPress={() => showAlert('Left button pressed')}
           />
           <Button
             title="Right button"
-            onPress={() => Alert.alert('Right button pressed')}
+            onPress={() => showAlert('Right button pressed')}
           />
         </View>
       </View>

From f40f70e3d28e3d5653521baa1108a2c911d17ee8 Mon Sep 17 00:00:00 2001
From: yash04577 <yash04577@gmail.com>
Date: Sun, 4 Jan 2026 18:33:38 +0530
Subject: [PATCH 3/3] fix: added web alert on current version

---
 docs/button.md                                | 22 +++++++++++++------
 packages/lint-examples/eslint.config.js       |  1 +
 website/versioned_docs/version-0.82/button.md | 15 ++++++-------
 website/versioned_docs/version-0.83/button.md | 22 +++++++++++++------
 4 files changed, 38 insertions(+), 22 deletions(-)

diff --git a/docs/button.md b/docs/button.md
index cfed6819d28..9fc529fc863 100644
--- a/docs/button.md
+++ b/docs/button.md
@@ -18,13 +18,21 @@ If this button doesn't look right for your app, you can build your own button us
 
 ## Example
 
-```SnackPlayer name=Button%20Example
+```SnackPlayer name=Button%20Example&ext=js
 import React from 'react';
-import {StyleSheet, Button, View, Text, Alert} from 'react-native';
+import {StyleSheet, Button, View, Text, Alert, Platform} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
 const Separator = () => <View style={styles.separator} />;
 
+function showAlert(message) {
+  if (Platform.OS === 'web') {
+    window.alert(message);
+  } else {
+    Alert.alert(message);
+  }
+}
+
 const App = () => (
   <SafeAreaProvider>
     <SafeAreaView style={styles.container}>
@@ -35,7 +43,7 @@ const App = () => (
         </Text>
         <Button
           title="Press me"
-          onPress={() => Alert.alert('Simple Button pressed')}
+          onPress={() => showAlert('Simple Button pressed')}
         />
       </View>
       <Separator />
@@ -48,7 +56,7 @@ const App = () => (
         <Button
           title="Press me"
           color="#f194ff"
-          onPress={() => Alert.alert('Button with adjusted color pressed')}
+          onPress={() => showAlert('Button with adjusted color pressed')}
         />
       </View>
       <Separator />
@@ -59,7 +67,7 @@ const App = () => (
         <Button
           title="Press me"
           disabled
-          onPress={() => Alert.alert('Cannot press this one')}
+          onPress={() => showAlert('Cannot press this one')}
         />
       </View>
       <Separator />
@@ -70,11 +78,11 @@ const App = () => (
         <View style={styles.fixToText}>
           <Button
             title="Left button"
-            onPress={() => Alert.alert('Left button pressed')}
+            onPress={() => showAlert('Left button pressed')}
           />
           <Button
             title="Right button"
-            onPress={() => Alert.alert('Right button pressed')}
+            onPress={() => showAlert('Right button pressed')}
           />
         </View>
       </View>
diff --git a/packages/lint-examples/eslint.config.js b/packages/lint-examples/eslint.config.js
index e0527a08716..79089d6ff89 100644
--- a/packages/lint-examples/eslint.config.js
+++ b/packages/lint-examples/eslint.config.js
@@ -56,6 +56,7 @@ export default defineConfig([
       ...reactNativeConfig.rules,
       // Many existing inline styles in examples
       'react-native/no-inline-styles': 'off',
+      'no-alert': 'off',
     },
 
     settings: {
diff --git a/website/versioned_docs/version-0.82/button.md b/website/versioned_docs/version-0.82/button.md
index 44bc317929d..9fc529fc863 100644
--- a/website/versioned_docs/version-0.82/button.md
+++ b/website/versioned_docs/version-0.82/button.md
@@ -18,21 +18,20 @@ If this button doesn't look right for your app, you can build your own button us
 
 ## Example
 
-```SnackPlayer name=Button%20Example
+```SnackPlayer name=Button%20Example&ext=js
 import React from 'react';
 import {StyleSheet, Button, View, Text, Alert, Platform} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
 const Separator = () => <View style={styles.separator} />;
 
-  function showAlert(message: string){
-    if(Platform.OS === "web"){
-      window.alert(message);
-    }
-    else{
-      Alert.alert(message)
-    }
+function showAlert(message) {
+  if (Platform.OS === 'web') {
+    window.alert(message);
+  } else {
+    Alert.alert(message);
   }
+}
 
 const App = () => (
   <SafeAreaProvider>
diff --git a/website/versioned_docs/version-0.83/button.md b/website/versioned_docs/version-0.83/button.md
index cfed6819d28..9fc529fc863 100644
--- a/website/versioned_docs/version-0.83/button.md
+++ b/website/versioned_docs/version-0.83/button.md
@@ -18,13 +18,21 @@ If this button doesn't look right for your app, you can build your own button us
 
 ## Example
 
-```SnackPlayer name=Button%20Example
+```SnackPlayer name=Button%20Example&ext=js
 import React from 'react';
-import {StyleSheet, Button, View, Text, Alert} from 'react-native';
+import {StyleSheet, Button, View, Text, Alert, Platform} from 'react-native';
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 
 const Separator = () => <View style={styles.separator} />;
 
+function showAlert(message) {
+  if (Platform.OS === 'web') {
+    window.alert(message);
+  } else {
+    Alert.alert(message);
+  }
+}
+
 const App = () => (
   <SafeAreaProvider>
     <SafeAreaView style={styles.container}>
@@ -35,7 +43,7 @@ const App = () => (
         </Text>
         <Button
           title="Press me"
-          onPress={() => Alert.alert('Simple Button pressed')}
+          onPress={() => showAlert('Simple Button pressed')}
         />
       </View>
       <Separator />
@@ -48,7 +56,7 @@ const App = () => (
         <Button
           title="Press me"
           color="#f194ff"
-          onPress={() => Alert.alert('Button with adjusted color pressed')}
+          onPress={() => showAlert('Button with adjusted color pressed')}
         />
       </View>
       <Separator />
@@ -59,7 +67,7 @@ const App = () => (
         <Button
           title="Press me"
           disabled
-          onPress={() => Alert.alert('Cannot press this one')}
+          onPress={() => showAlert('Cannot press this one')}
         />
       </View>
       <Separator />
@@ -70,11 +78,11 @@ const App = () => (
         <View style={styles.fixToText}>
           <Button
             title="Left button"
-            onPress={() => Alert.alert('Left button pressed')}
+            onPress={() => showAlert('Left button pressed')}
           />
           <Button
             title="Right button"
-            onPress={() => Alert.alert('Right button pressed')}
+            onPress={() => showAlert('Right button pressed')}
           />
         </View>
       </View>