Repository navigation
Expo SDK 58, web basics and Toast, render on every web part - #258
Merged
Merged
Conversation
Apps can now add a glyph the built-in set does not carry and have it resolve colour, weight, direction and fill exactly like the rest. createIcon is the same function under a second name. Refs #256 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
React Native 0.88 declares View, Text and TextInput as function components, so forwardRef<View, ...> stops compiling there. Every forwardRef now names ViewRef, TextRef or TextInputRef (ComponentRef<typeof X>), which compile on 0.86 and 0.88 and keep focus/clear/isFocused on the ref. The aliases are exported from the root, and React.ElementRef<typeof Text> is folded into TextRef so there is one way to name a ref type. Refs #257 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The web docs built several demos from the docs site's own copies of these components, so a reader who installed panelui-web found them missing. They are now part of the package: - Badge: tinted status variants, with a dot that can pulse while a state changes. - Chip: a toggle pill in Chip.Group, or a removable value with onRemove. - Checkbox: a tick that draws itself, indeterminate, and Checkbox.Group with a parent box. - Radio Group: Radio, plus RadioGroup.Card in outline, filled and dither versions. - Field: label, description and error wired to the control by Base UI's field. - Table: aligned number columns, compact and striped rows, a pinned header. Input and Textarea now render through the field control, so a Field labels and validates them. Button takes a render prop, to be drawn as a link. Every web demo now imports panelui-web only, and a contract test keeps it so. Refs #254 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Expo SDK 58 brings React Native 0.88, Reanimated 4.7 and a newer map style spec. The library now builds against them and still against React Native 0.86 (SDK 57): - Every ref, ref callback and imperative handle is typed with ViewRef, TextRef, TextInputRef or ScrollViewRef. They are interfaces, so the published declarations can name them, and ScrollViewRef is exported too. - The TextInput event types and ViewToken that 0.88 removed are read off the props both versions share. - Charts take their accessibility label and hint from ViewProps, which 0.88 declares read-only. - The masked view is typed by its props: its own declarations are built from a type 0.88 removed. - Reanimated hooks get their dependency list on the web only, through webDeps(). Native ignores it, and 4.7 warns about it in development. - Sortable passes no scroll ref rather than an unattached one, which 4.7 warns about. - Map drops symbol-height-offset and symbol-height-anchor, and folds fill-layer-opacity and line-layer-opacity into the feature opacity where both are numbers, so hosted styles keep those layers on native. Checked against both type versions with tsc, and on an iOS Simulator running Expo Go 58.0.7. Refs #257 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The pins follow the Expo Go 58.0.7 client, measured from its binary, rather than the SDK manifest: react-native 0.88.0 (the manifest says 0.88.1, which the client does not contain), gesture-handler 3.3.0, screens 4.30.0. Reanimated 4.7.1 and worklets 0.13.0 are not in the binary's strings; the example starting up on the client confirms them. React is pinned to 19.3.0 across the workspace, and the test renderer with it, so the docs app's range no longer pulls a second copy. The lockfile was regenerated. 374 top-level packages moved; the ones that matter: - expo 57.0.7 -> 58.0.22, expo-modules-core 57.0.6 -> 58.0.29 - react-native 0.86.2 -> 0.88.0, react 19.2.3 -> 19.3.0 - @expo/ui 57.0.7 -> 58.0.26, expo-router 57.0.7 -> 58.0.29 - react-native-screens 4.25.2 -> 4.30.0, safe-area-context 5.8.0 -> 5.10.1 - @maplibre/maplibre-react-native 11.3.6 -> 11.5.1, style spec 24.8.5 -> 26.4.4 - next 16.3.0 -> 16.4.4 The example-export check reads Expo 58's indexed source map as well as a flat one. The installation and troubleshooting pages name SDK 58, and CLAUDE.md records the 58.0.7 client. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Generated alongside the React Native 0.88 fix and left out of it. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Toast is a short message that leaves on its own, raised with useToast()
under one Toast.Provider. Its text changes through dither cells instead of
being swapped, in three versions set by effect:
- type (default): the title resolves out of dither cells behind a caret,
dissolves into the next title on update, and back out when it leaves.
- materialize: the card is built from dither cells the way the text is,
a head sweeping across it, and then its title and description resolve
inside it. Leaving, the words go first and then the card.
- timer: the title as type, with a dithered bar running down the
toast's time that pauses while the stack is open.
One toast can pick its own with data: { effect }. The mark beside the
title is a 2x2 Bayer cell in the type's colour, cycling while loading.
Built on Base UI's toast for stacking, swipe, timers and announcements;
reduced motion holds every effect still.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Button was a styled <button>. It now renders Base UI's button, so render
composes it with another element, such as a link or a router's link,
keeping its look, ref, disabled handling and keyboard behaviour:
<Button render={<a href="/" />}>Home</Button>. nativeButton is set from
the element, and can be passed when render is a function.
Refs #255
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Discussion #255 asked for the web components to compose like headless ones do: a part drawn as another element or component, keeping its look and behaviour. Every part that draws a plain element now does it through Base UI's useRender, so each takes render, an element or a function of its props and state, and merges its classes, styles and handlers with the element's own. Parts already built on Base UI primitives took render already. Card.Title and Card keep as, and take render too. The parts that render through useRender are client components now; they still render on the server. The rendered markup of every web docs page was compared before and after: no element, class or attribute changed. A Composition page under Get started explains the prop, and the contract test counts useRender as a hook. Refs #255 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
|
Important Review skippedToo many files! This PR contains 555 files, which is 405 over the limit of 150. To get a review, reduce the PR to 150 files or fewer by splitting it into smaller PRs or changing its base branch. Upgrade to a paid plan to raise the limit. Usage-priced reviews support at most 300 files.
 |
axe 4.14 flags a control whose accessible name leaves out its visible text. The home page toggle read "Dark" but was named "Switch the site to light mode", so a voice command for "Dark" could not reach it. The name now starts with the visible word, and aria-pressed, which contradicts a name that describes an action, is gone. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What this changes
The example, the templates and the tooling move to Expo SDK 58, and the native library compiles and runs on React Native 0.88 and Reanimated 4.7. The web collection gains seven components (Badge, Chip, Checkbox, Radio Group, Field, Table and a dithered Toast), and every web part now takes
render.Why
forwardRefrefs with component types (View/Text/TextInput), which breaks TypeScript consumers on React Native 0.88 (Expo SDK 58) #257: on React Native 0.88,forwardRef<View>and the other component-type refs stop compiling. Refs are nowViewRef,TextRef,TextInputRefandScrollViewRef, which compile on 0.86 and 0.88.icon()factory so apps can extend the built-in icon set #256:icon()andIconDefaultsare exported, so apps can add a glyph that behaves like the built-in ones.renderthroughuseRender.Refs #254, #255, #256, #257. The issues are closed once npm serves the release.
Type of change
How it was tested
The library was typechecked against React Native 0.86 and 0.88 type declarations. The rendered markup of all 47 web docs pages was compared before and after the
renderchange, and no element, class or attribute changed.Checklist
npm run typecheckpassesnpm run buildpassesAnimatedAPIaccessibilityRoleand mirror their stateclassNameIf this touches a component's API
meta.json/web-meta.jsonand the usage files are updated, withaddedInsetnpm run docs:generate --workspace=docshas been run and the generated files are committedNotes for the reviewer
next16.3 → 16.4 and the map style spec 24 → 26. The map component now translates the four new properties that native cannot parse.🤖 Generated with Claude Code