Skip to content

Commit 9ae17b1

Browse files
yash04577yash04577
authored
Handle alerts correctly on web in Button example (#4946)
1 parent 03c43e1 commit 9ae17b1

4 files changed

Lines changed: 46 additions & 21 deletions

File tree

‎docs/button.md‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,21 @@ If this button doesn't look right for your app, you can build your own button us
1818

1919
## Example
2020

21-
```SnackPlayer name=Button%20Example
21+
```SnackPlayer name=Button%20Example&ext=js
2222
import React from 'react';
23-
import {StyleSheet, Button, View, Text, Alert} from 'react-native';
23+
import {StyleSheet, Button, View, Text, Alert, Platform} from 'react-native';
2424
import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
2525
2626
const Separator = () => <View style={styles.separator} />;
2727
28+
function showAlert(message) {
29+
if (Platform.OS === 'web') {
30+
window.alert(message);
31+
} else {
32+
Alert.alert(message);
33+
}
34+
}
35+
2836
const App = () => (
2937
<SafeAreaProvider>
3038
<SafeAreaView style={styles.container}>
@@ -35,7 +43,7 @@ const App = () => (
3543
</Text>
3644
<Button
3745
title="Press me"
38-
onPress={() => Alert.alert('Simple Button pressed')}
46+
onPress={() => showAlert('Simple Button pressed')}
3947
/>
4048
</View>
4149
<Separator />
@@ -48,7 +56,7 @@ const App = () => (
4856
<Button
4957
title="Press me"
5058
color="#f194ff"
51-
onPress={() => Alert.alert('Button with adjusted color pressed')}
59+
onPress={() => showAlert('Button with adjusted color pressed')}
5260
/>
5361
</View>
5462
<Separator />
@@ -59,7 +67,7 @@ const App = () => (
5967
<Button
6068
title="Press me"
6169
disabled
62-
onPress={() => Alert.alert('Cannot press this one')}
70+
onPress={() => showAlert('Cannot press this one')}
6371
/>
6472
</View>
6573
<Separator />
@@ -70,11 +78,11 @@ const App = () => (
7078
<View style={styles.fixToText}>
7179
<Button
7280
title="Left button"
73-
onPress={() => Alert.alert('Left button pressed')}
81+
onPress={() => showAlert('Left button pressed')}
7482
/>
7583
<Button
7684
title="Right button"
77-
onPress={() => Alert.alert('Right button pressed')}
85+
onPress={() => showAlert('Right button pressed')}
7886
/>
7987
</View>
8088
</View>

‎packages/lint-examples/eslint.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@ export default defineConfig([
5656
...reactNativeConfig.rules,
5757
// Many existing inline styles in examples
5858
'react-native/no-inline-styles': 'off',
59+
'no-alert': 'off',
5960
},
6061

6162
settings: {

‎website/versioned_docs/version-0.82/button.md‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,21 @@ If this button doesn't look right for your app, you can build your own button us
1818

1919
## Example
2020

21-
```SnackPlayer name=Button%20Example
21+
```SnackPlayer name=Button%20Example&ext=js
2222
import React from 'react';
23-
import {StyleSheet, Button, View, Text, Alert} from 'react-native';
23+
import {StyleSheet, Button, View, Text, Alert, Platform} from 'react-native';
2424
import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
2525
2626
const Separator = () => <View style={styles.separator} />;
2727
28+
function showAlert(message) {
29+
if (Platform.OS === 'web') {
30+
window.alert(message);
31+
} else {
32+
Alert.alert(message);
33+
}
34+
}
35+
2836
const App = () => (
2937
<SafeAreaProvider>
3038
<SafeAreaView style={styles.container}>
@@ -35,7 +43,7 @@ const App = () => (
3543
</Text>
3644
<Button
3745
title="Press me"
38-
onPress={() => Alert.alert('Simple Button pressed')}
46+
onPress={() => showAlert('Simple Button pressed')}
3947
/>
4048
</View>
4149
<Separator />
@@ -48,7 +56,7 @@ const App = () => (
4856
<Button
4957
title="Press me"
5058
color="#f194ff"
51-
onPress={() => Alert.alert('Button with adjusted color pressed')}
59+
onPress={() => showAlert('Button with adjusted color pressed')}
5260
/>
5361
</View>
5462
<Separator />
@@ -59,7 +67,7 @@ const App = () => (
5967
<Button
6068
title="Press me"
6169
disabled
62-
onPress={() => Alert.alert('Cannot press this one')}
70+
onPress={() => showAlert('Cannot press this one')}
6371
/>
6472
</View>
6573
<Separator />
@@ -70,11 +78,11 @@ const App = () => (
7078
<View style={styles.fixToText}>
7179
<Button
7280
title="Left button"
73-
onPress={() => Alert.alert('Left button pressed')}
81+
onPress={() => showAlert('Left button pressed')}
7482
/>
7583
<Button
7684
title="Right button"
77-
onPress={() => Alert.alert('Right button pressed')}
85+
onPress={() => showAlert('Right button pressed')}
7886
/>
7987
</View>
8088
</View>

‎website/versioned_docs/version-0.83/button.md‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,21 @@ If this button doesn't look right for your app, you can build your own button us
1818

1919
## Example
2020

21-
```SnackPlayer name=Button%20Example
21+
```SnackPlayer name=Button%20Example&ext=js
2222
import React from 'react';
23-
import {StyleSheet, Button, View, Text, Alert} from 'react-native';
23+
import {StyleSheet, Button, View, Text, Alert, Platform} from 'react-native';
2424
import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
2525
2626
const Separator = () => <View style={styles.separator} />;
2727
28+
function showAlert(message) {
29+
if (Platform.OS === 'web') {
30+
window.alert(message);
31+
} else {
32+
Alert.alert(message);
33+
}
34+
}
35+
2836
const App = () => (
2937
<SafeAreaProvider>
3038
<SafeAreaView style={styles.container}>
@@ -35,7 +43,7 @@ const App = () => (
3543
</Text>
3644
<Button
3745
title="Press me"
38-
onPress={() => Alert.alert('Simple Button pressed')}
46+
onPress={() => showAlert('Simple Button pressed')}
3947
/>
4048
</View>
4149
<Separator />
@@ -48,7 +56,7 @@ const App = () => (
4856
<Button
4957
title="Press me"
5058
color="#f194ff"
51-
onPress={() => Alert.alert('Button with adjusted color pressed')}
59+
onPress={() => showAlert('Button with adjusted color pressed')}
5260
/>
5361
</View>
5462
<Separator />
@@ -59,7 +67,7 @@ const App = () => (
5967
<Button
6068
title="Press me"
6169
disabled
62-
onPress={() => Alert.alert('Cannot press this one')}
70+
onPress={() => showAlert('Cannot press this one')}
6371
/>
6472
</View>
6573
<Separator />
@@ -70,11 +78,11 @@ const App = () => (
7078
<View style={styles.fixToText}>
7179
<Button
7280
title="Left button"
73-
onPress={() => Alert.alert('Left button pressed')}
81+
onPress={() => showAlert('Left button pressed')}
7482
/>
7583
<Button
7684
title="Right button"
77-
onPress={() => Alert.alert('Right button pressed')}
85+
onPress={() => showAlert('Right button pressed')}
7886
/>
7987
</View>
8088
</View>

0 commit comments

Comments
 (0)