Skip to content

docs: link example pages to the hosted web example app - #4384

Merged
mfazekas merged 2 commits into
mainfrom
docs/web-example-links
Oct 23, 2026
Merged

mfazekas merged 2 commits into
mainfrom
docs/web-example-links

Conversation

@mfazekas

@mfazekas mfazekas commented Oct 22, 2026 •

Copy link
Copy Markdown
Contributor

Description

Example doc pages get a "Try it on web" link that opens the example in https://rnmapbox.github.io/example-app/, e.g. https://rnmapbox.github.io/example-app/Map/ShowMap.

The example app's navigation now uses named routes instead of the generic Group/Item routes with a label path. Each group is a nested stack named after its directory (Map), and each example is a route named <groupName>/<name> (Map/ShowMap), using the names from docs/examples.json. The screens are generated from the existing group/item tree. On web only, React Navigation's linking config maps these to /example-app/Map and /example-app/Map/ShowMap, so the URL follows navigation, browser back/forward work, and reloads land on the same screen. The base URL is part of the screen paths because config.path doesn't match the bare /example-app.

GitHub Pages has no SPA fallback, so update-docs.yml runs example/scripts/web_route_pages.js after expo export, which writes a copy of the exported index.html (it only uses absolute /example-app/... URLs) at each group and example path in docs/examples.json.

Only examples with the new webSupported: true metadata get the link. It is opt-in, unlike excludeFromPercy, so new examples aren't linked until someone checks them on web. I opened all examples on a local static expo export -p web with Playwright: 41 of 70 work and are marked. The 29 left out are:

  1. CacheOffline (4): the offline manager is unsupported on web.
  2. UserLocation (7): UserLocation, LocationPuck and followUserLocation aren't implemented.
  3. Missing Images/Models: SymbolCircleLayer CustomIcon, CustomIconNativeAsset, ScalableImages, ShapeSourceIcon; Annotations CustomCallout; V10 SimpleModelLayer.
  4. PointAnnotation(Manager): Annotations PointAnnotationAnchors, PointAnnotationManagerMultiple, PointAnnotationManagerSlot, ShowPointAnnotation, MarkerView.
  5. Map: CameraGestureObserver, Ornaments (ornament props ignored), SetLanguage and StyleJson (not implemented), MapAndRNNavigation (no map on open).
  6. Blank map with a 404: Map/ShowMapLocalStyle and V10/GlobeProjection.

ShowMap, MapFps and MapUnMount are linked even though their user-location part is a no-op on web.

Native keeps the same lists, titles and back behaviour. I checked that with Detox on iOS (firstTest, visual, and a 10-example docScreenshots sample, whose screenshots match a baseline build) and an Android smoke run through groups, examples, Most recent, the Bug Report page, and system and in-app back.

Checklist

  • I've read CONTRIBUTING.md
  • I updated the doc/other generated code with running yarn generate in the root folder
  • I have tested the new feature on /example app.
    • In V11 mode/ios
    • In New Architecture mode/ios
    • In V11 mode/android
    • In New Architecture mode/android
  • I added/updated a sample - if a new feature was implemented (/example)

Screenshot OR Video

Generated doc page excerpt:

Shows a map with the user location annotation enabled, ...

[Try it on web](https://rnmapbox.github.io/example-app/Map/ShowMap)

The web example app opens an example from #/<groupName>/<name>, using the
group and name from docs/examples.json. Examples marked webSupported get a
"Try it on web" link on their doc page.
Each group is a nested stack named after its directory (Map) and each
example a route named <groupName>/<name> (Map/ShowMap). On web, React
Navigation's linking maps these to /example-app/Map/ShowMap, so the URL
follows navigation, back/forward work and reloads land on the same
screen. The docs link to these paths.

GitHub Pages has no SPA fallback, so update-docs writes a copy of the
exported index.html at each documented group and example path.
@mfazekas
mfazekas merged commit b3a5730 into main Oct 23, 2026
10 checks passed
@mfazekas
mfazekas deleted the docs/web-example-links branch October 23, 2026 20:41

This branch was successfully deployed

1 active deployment
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant