Handle alerts correctly on web in Button example

[yash04577]

Problem

The Button component examples in the docs did not display alerts correctly on web.

• On web, using Alert.alert() does not show any message.
• On iOS/Android, Alert.alert() works as expected.
• Users copying the example from docs would get a button that appears non-functional on web.

---

Reproduction Steps (Before Fix)

1. Open the Button documentation: Button.
2. Click "Press me" in the first Button example on web.
3. Observe that nothing happens — no alert is displayed.
4. On iOS/Android simulators or devices, alert works normally.

---

Old Behavior (Buggy)

• All onPress handlers used Alert.alert() regardless of platform.
• On web, pressing the button had no visible effect.

---

New Behavior (Fixed)

• Alerts now display correctly on all platforms:

  • Web: uses window.alert()
  • iOS/Android: uses Alert.alert()

• Users copying the example now see the expected alert immediately when pressing buttons.

---

Root Cause

• Alert.alert() is not supported in browser environments.
• The Button examples did not include a platform check, so web users saw no feedback.

---

Fix

• Added a small helper function:

function showAlert(message: string) {
  if (Platform.OS === 'web') {
    window.alert(message);
  } else {
    Alert.alert(message);
  }
}

[netlify]

✅ Deploy Preview for react-native ready!

Name	Link
🔨 Latest commit	f40f70e
🔍 Latest deploy log	https://app.netlify.com/projects/react-native/deploys/695a707a2dd0412718b0f75a
😎 Deploy Preview	https://deploy-preview-4946--react-native.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[mehdimirzaeeofficcial-cyber]

Hi

[yash04577]

Hi

Hi 👋

[Simek]

Hey @yash04577, thanks for the correction! 👍

Just two things:

• can you also update the unversioned docs from /docs folder at root, and versioned docs at least for the latest version (0.83)?
• can you run lint:examples script from the /website directory to re-format the changed code?

[yash04577]

Hey @yash04577, thanks for the correction! 👍

Just two things:

• can you also update the unversioned docs from /docs folder at root, and versioned docs at least for the latest version (0.83)?
• can you run lint:examples script from the /website directory to re-format the changed code?

Sure

[yash04577]

Hey @yash04577, thanks for the correction! 👍

Just two things:

• can you also update the unversioned docs from /docs folder at root, and versioned docs at least for the latest version (0.83)?
• can you run lint:examples script from the /website directory to re-format the changed code?

Hi @Simek ,

I'm hitting the no-alert linting error in my code example. Since Alert.alert() doesn't show a visual popup on the Web/Snack player, how would you prefer I handle user feedback?

Should I use React state to show text in the UI

Thanks

[Simek]

The best approach might be to disable the problematic linting rule in the examples lint package ESLint config, since falling back to browser native alert for web seems like the proper thing to do.

[yash04577]

@Simek I have done the required changes

[Simek]

Thanks for the follow up, LGTM! 👍