refactor: example app by michalfedyna · Pull Request #5053 · callstack/react-native-paper

michalfedyna · 2026-08-17T09:33:30Z

Motivation

PR improves example app. It adds:

Samples screen
8 small and focused samples
Improved UI for preferences
Search for example usage list

Screen	iOS	Android
Samples list
Preferences
Examples list
Search
Sign up sample
Contacts sample
Article sample
Settings sample
Player sample
Orders sample
Help center sample
Workspace sample

Related issue

#4992

Test plan

yarn lint, yarn typecheck, yarn test and a visual check of provided screenshots

MikitasK

looks awesome! good job 👍
just a few points to address before merge:

MikitasK

LGTM 👍

JKobrynski

LGTM! @satya164 all yours

JKobrynski · 2026-09-04T11:00:45Z

@michalfedyna the workflows are running, please resolve those comments that you've addressed to clean this PR up 🙏

michalfedyna · 2026-09-04T11:13:15Z

@JKobrynski Thank you!

Copilot

🟡 Changes recommended

Unresolved critical navigation-state persistence issue and additional preference, layout, and accessibility issues.

Get a fresh assessment by requesting another Copilot review.

Pull request overview

Refactors the example app into a samples-first experience with searchable examples, stack navigation, and modal preferences.

Changes:

Adds eight focused sample screens and a samples catalog.
Replaces drawer navigation and preferences with stack navigation and a modal.
Adds example search, preference state management, and typed object utilities.

Review findings:

Critical (3 votes): Version or validate persisted navigation state after the navigator migration.
Moderate (3 votes): Reset must restore the initial RTL setting.
Moderate (2 votes): Keep the preferences action available while searching.
Moderate (1 vote): Move Dialog.Actions outside Dialog.Content.
Moderate (1 vote): Add accessible, row-specific labels to order checkboxes.

File summaries

File	Description
`example/utils/typedObject.ts`	Adds typed object helpers.
`example/utils/index.ts`	Removes the obsolete web helper.
`example/src/SamplesList.tsx`	Adds the samples catalog.
`example/src/Samples/WorkspaceSample.tsx`	Adds the workspace sample.
`example/src/Samples/types.ts`	Defines sample metadata.
`example/src/Samples/SignUpSample.tsx`	Adds the sign-up sample.
`example/src/Samples/SettingsSample.tsx`	Adds the settings sample.
`example/src/Samples/PlayerSample.tsx`	Adds the player sample.
`example/src/Samples/OrdersSample.tsx`	Adds the orders sample; checkbox labels require accessibility updates.
`example/src/Samples/HelpCenterSample.tsx`	Adds the help center sample.
`example/src/Samples/ContactsSample.tsx`	Adds the contacts sample.
`example/src/Samples/ArticleSample.tsx`	Adds the article sample.
`example/src/RootNavigator.tsx`	Configures sample and example routes.
`example/src/Preferences/useSetupPreferences.ts`	Centralizes preference persistence; navigation-state migration and RTL reset require fixes.
`example/src/Preferences/usePreferences.tsx`	Adds the preferences hook.
`example/src/Preferences/PreferencesModal.tsx`	Adds the preferences modal; dialog actions need to be moved outside content.
`example/src/Preferences/PreferencesContext.tsx`	Updates the preferences context type.
`example/src/index.tsx`	Integrates navigation and preferences setup.
`example/src/Examples/TooltipExample.tsx`	Updates platform detection.
`example/src/Examples/SnackbarExample.tsx`	Uses the preferences hook.
`example/src/Examples/SearchbarExample.tsx`	Replaces drawer access with preferences access.
`example/src/Examples/CardExample.tsx`	Uses the preferences hook and platform API.
`example/src/ExampleListHeader.tsx`	Adds searchable example controls; the preferences action must remain persistent.
`example/src/ExampleList.tsx`	Adds example filtering and empty-state handling.
`example/src/DrawerItems.tsx`	Removes the legacy drawer implementation.

Review details

Suppressed comments (2)

example/src/Preferences/PreferencesModal.tsx:164

Dialog.Actions is nested inside Dialog.Content, but Paper's dialog API expects these to be sibling children. This applies the content padding around the actions and the actions container padding again, producing incorrect spacing. Move the </Dialog.Content> before <Dialog.Actions>.

            <Dialog.Actions>
              <Button onPress={_handleDismissRTLDialog}>Ok</Button>
            </Dialog.Actions>
          </Dialog.Content>

example/src/Samples/OrdersSample.tsx:122

Each row renders a bare checkbox without an accessible label, so assistive technology exposes multiple indistinguishable checkbox controls and users cannot tell which order they are selecting. Add a row-specific label such as Select order ${order.id}.

              <Checkbox
                status={selected.includes(order.id) ? 'checked' : 'unchecked'}
                onPress={() => toggleSelected(order.id)}
              />

Files reviewed: 25/25 changed files
Comments generated: 3
Review effort level: Lite (auto)

Note

Copilot is running an experiment and ran this review at Lite.

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

+import type { Preferences } from './PreferencesContext';
+import { dynamicThemeSupported } from '../../utils';
+
+const PERSISTENCE_KEY = 'NAVIGATION_STATE';


+        traileringIcon="cog"
+        traileringIconAccessibilityLabel="preferences"
+        onTraileringIconPress={togglePreferences}
+        clearAccessibilityLabel="clear search"
+        autoCorrect={false}
+        autoCapitalize="none"
+        style={styles.searchbar}
+      />


+    setShouldUseDynamicTheme(true);
+    setIsDarkMode(false);
+    setCustomFont(false);
+    setRippleEffectEnabled(true);
+    setPreferencesVisible(false);
+
+    try {
+      await AsyncStorage.multiRemove([PREFERENCES_KEY, PERSISTENCE_KEY]);
+    } catch (e) {
+      // ignore error
+    }
+
+    setNavigationKey((oldValue) => oldValue + 1);
+  }, []);


satya164 · 2026-10-22T19:48:35Z

Review by Claude

Web

The "New contact" FAB in the Contacts sample stays on the right in RTL. Steps: open Preferences, turn on RTL, open Samples > Contacts. The rest of the screen flips, but the FAB keeps right: 16. On iOS and Android the native layout swaps it to the left, so web is the only platform where it stays on the right. Expected: the FAB sits at the end edge, so on the left in RTL. (via Claude, verify if it makes sense)
The Preferences modal fills the full window width on desktop web. Steps: open the web example in a 1280px wide window, press the cog. Each label sits on the far left and its switch on the far right, more than 1000px apart, so it is hard to see which switch goes with which label. Expected: a modal with a capped width, close to the old drawer width. (via Claude, verify if it makes sense)

satya164

Review by Claude

This branch conflicts with main, and some APIs it uses changed there. After the rebase: Searchbar renamed traileringIcon, traileringIconAccessibilityLabel and onTraileringIconPress to trailingIcon, trailingIconAccessibilityLabel and onTrailingIconPress (#5117, used in ExampleListHeader.tsx). Modal renamed overlayAccessibilityLabel to dismissAccessibilityLabel and now needs an aria-label (#5125, used in PreferencesModal.tsx and HelpCenterSample.tsx). Dialog renders its own Portal now, so the Portal wrappers in PreferencesModal.tsx and SettingsSample.tsx can go.
@react-navigation/drawer is still in example/package.json, but nothing in the example imports it after this change. Remove it.

See the inline comments for the rest. (via Claude, verify if it makes sense)

satya164 · 2026-10-22T19:49:41Z

+              {item.components.map((component) => (
+                <Chip key={component} compact>
+                  {component}
+                </Chip>
+              ))}


These tags are Chips without onPress, so each one is still a button for screen readers. On Android TalkBack announces every tag as a disabled button (6 to 8 per card), and iOS and web also expose them as buttons. The card itself, which is the real control, has no button role on any platform. Render the tags as plain Text (or another non-pressable element) so only the card is interactive. Giving the card a button role may need a change in Card, because Card passes role to its outer Surface and not to the inner Pressable. (via Claude, verify if it makes sense)

satya164 · 2026-10-22T19:49:41Z

+                <IconButton
+                  icon={liked ? 'heart' : 'heart-outline'}
+                  selected={liked}
+                  onPress={() => setLiked(!liked)}
+                />
+              </Tooltip>
+              <Tooltip title={bookmarked ? 'Remove bookmark' : 'Bookmark'}>
+                <IconButton
+                  icon={bookmarked ? 'bookmark' : 'bookmark-outline'}
+                  selected={bookmarked}
+                  onPress={() => setBookmarked(!bookmarked)}
+                />


The like and bookmark buttons have no accessible name. iOS and Android read them as "icon-button" or "Button", and on web they are buttons with only an icon glyph as text. The Tooltip does not label them. Add an aria-label that matches the tooltip:

Suggested change

<IconButton

icon={liked ? 'heart' : 'heart-outline'}

selected={liked}

onPress={() => setLiked(!liked)}

/>

</Tooltip>

<Tooltip title={bookmarked ? 'Remove bookmark' : 'Bookmark'}>

<IconButton

icon={bookmarked ? 'bookmark' : 'bookmark-outline'}

selected={bookmarked}

onPress={() => setBookmarked(!bookmarked)}

/>

<IconButton

icon={liked ? 'heart' : 'heart-outline'}

selected={liked}

aria-label={liked ? 'Remove like' : 'Like'}

onPress={() => setLiked(!liked)}

/>

</Tooltip>

<Tooltip title={bookmarked ? 'Remove bookmark' : 'Bookmark'}>

<IconButton

icon={bookmarked ? 'bookmark' : 'bookmark-outline'}

selected={bookmarked}

aria-label={bookmarked ? 'Remove bookmark' : 'Bookmark'}

onPress={() => setBookmarked(!bookmarked)}

/>

The labels match the tooltip text. (via Claude, verify if it makes sense)

satya164 · 2026-10-22T19:49:42Z

+        trigger={{
+          icon: 'share-variant',
+          onPress: () => setMenuExpanded(true),
+        }}


The share FAB has no accessible name either. iOS and Android expose it as "fab-shell" and web as an unlabelled button. trigger accepts aria-label:

Suggested change

trigger={{

icon: 'share-variant',

onPress: () => setMenuExpanded(true),

}}

trigger={{

icon: 'share-variant',

'aria-label': 'Share',

onPress: () => setMenuExpanded(true),

}}

The same applies to any icon-only control in the samples. (via Claude, verify if it makes sense)

satya164 · 2026-10-22T19:49:42Z

+          </List.Section>
+        </List.AccordionGroup>
+
+        <TouchableRipple onPress={() => setContactVisible(true)}>


"Still stuck? Contact support" opens a modal but has no button role. iOS and Android expose it as a plain group and web as a focusable div without a role, so screen reader users do not know it is a control.

Suggested change

<TouchableRipple onPress={() => setContactVisible(true)}>

<TouchableRipple role="button" onPress={() => setContactVisible(true)}>

The ripple then announces as "Still stuck? Contact support, button". (via Claude, verify if it makes sense)

satya164 · 2026-10-22T19:49:42Z

+      <Appbar.Header>
+        <Appbar.BackAction onPress={() => navigation.goBack()} />
+        <Appbar.Content title="Workspace" />
+        <Appbar.Action aria-label="magnify" icon="magnify" onPress={() => {}} />


aria-label="magnify" is the icon name, so screen readers announce "magnify". Use the action instead:

Suggested change

<Appbar.Action aria-label="magnify" icon="magnify" onPress={() => {}} />

<Appbar.Action aria-label="Search" icon="magnify" onPress={() => {}} />

The label then describes what the button does. (via Claude, verify if it makes sense)

satya164 · 2026-10-22T19:49:42Z

+  },
+  fab: {
+    position: 'absolute',
+    right: 16,


With RTL on, iOS and Android move this FAB to the left, but on web it stays on the right because right is a physical edge there. end maps to the end edge on all three platforms.

Suggested change

right: 16,

end: 16,

On native this keeps the current position, since right already swaps there. (via Claude, verify if it makes sense)

satya164 · 2026-10-22T19:49:42Z

+      <ToggleButton.Row
+        value={repeat}
+        onValueChange={(value) => value && setRepeat(value)}
+      >
+        <ToggleButton icon="repeat-off" value="off" />
+        <ToggleButton icon="repeat-once" value="one" />
+        <ToggleButton icon="repeat" value="all" />
+      </ToggleButton.Row>


ToggleButton was removed on main in #5095, so this sample breaks on rebase. The three repeat buttons also have no accessible name: iOS and Android read each one as "icon-button". SegmentedButtons with icon and aria-label per item (or IconButton with selected and aria-label, as TooltipExample does on main) covers the same case. Update components in PlayerSampleConfig to match. (via Claude, verify if it makes sense)

satya164 · 2026-10-22T19:49:42Z

+  const [initialRtl] = React.useState(getInitialRtl);
+
+  const [shouldUseDynamicTheme, setShouldUseDynamicTheme] =
+    React.useState(true);
+  const [isDarkMode, setIsDarkMode] = React.useState(false);
+  const [rtl, setRtl] = React.useState(initialRtl);


initialRtl is only used to seed rtl, so the extra state adds nothing:

Suggested change

const [initialRtl] = React.useState(getInitialRtl);

const [shouldUseDynamicTheme, setShouldUseDynamicTheme] =

React.useState(true);

const [isDarkMode, setIsDarkMode] = React.useState(false);

const [rtl, setRtl] = React.useState(initialRtl);

const [shouldUseDynamicTheme, setShouldUseDynamicTheme] =

React.useState(true);

const [isDarkMode, setIsDarkMode] = React.useState(false);

const [rtl, setRtl] = React.useState(getInitialRtl);

getInitialRtl still runs once, on the first render. (via Claude, verify if it makes sense)

satya164 · 2026-10-22T19:49:42Z

+  modalContent: {
+    marginHorizontal: 24,
+  },


On desktop web the modal spans the full window, so each label and its switch end up more than 1000px apart in a 1280px window. Cap the width here (for example a maxWidth around the old drawer width and alignSelf: 'center').

(via Claude, verify if it makes sense)

satya164 · 2026-10-22T19:49:43Z

-            },
-          }}
+          persistor={navigationPersistor}
+          linking={{ config: { initialRouteName: 'SamplesList' } }}


With initialRouteName: 'SamplesList', a URL like /button builds the stack [SamplesList, Button]. After a page reload on web (or a deep link) on any example, Back goes to Samples and not to the Examples list, which is where it went on main. If examples should keep returning to the list, put ExampleList and the example screens in a nested stack whose initialRouteName is ExampleList. (via Claude, verify if it makes sense)

MikitasK reviewed Aug 17, 2026

View reviewed changes

Comment thread example/src/Preferences/useSetupPreferences.ts

Comment thread example/src/SamplesList.tsx Outdated

michalfedyna force-pushed the refactor/example-app branch from d553f1e to 803f2c7 Compare August 19, 2026 15:03

MikitasK approved these changes Aug 19, 2026

View reviewed changes

satya164 added the Contributor: Internal label Aug 21, 2026

JKobrynski requested changes Aug 25, 2026

View reviewed changes

Comment thread example/src/SamplesList.tsx Outdated

Comment thread example/src/RootNavigator.tsx Outdated

Comment thread example/src/RootNavigator.tsx Outdated

Comment thread example/src/Samples/WorkspaceSample.tsx Outdated

michalfedyna force-pushed the refactor/example-app branch from 803f2c7 to d09e485 Compare August 25, 2026 15:20

michalfedyna requested a review from JKobrynski August 25, 2026 15:24

JKobrynski reviewed Aug 28, 2026

View reviewed changes

Comment thread example/src/RootNavigator.tsx Outdated

Comment thread example/src/Preferences/PreferencesModal.tsx Outdated

Comment thread example/src/RootNavigator.tsx

michalfedyna requested a review from JKobrynski August 28, 2026 13:15

JKobrynski reviewed Sep 2, 2026

View reviewed changes

Comment thread example/src/Preferences/PreferencesModal.tsx Outdated

Comment thread example/src/Samples/PlayerSample.tsx Outdated

Comment thread example/src/Preferences/PreferencesModal.tsx Outdated

michalfedyna added 8 commits September 3, 2026 12:40

feat: move preferences from drawer to modal

8cc2805

feat: searchbar in the example list

4948c73

feat: simpler app

5f4f240

feat: self review

1d4a169

feat: self review

f4c30c4

fix: samples list padding

f37513c

feat: code review

3101abc

feat: code review

a461e3e

michalfedyna force-pushed the refactor/example-app branch from ab14dd0 to a461e3e Compare September 3, 2026 10:40

feat: updated surface usage and platform inline

18ca58e

michalfedyna requested a review from JKobrynski September 3, 2026 11:00

JKobrynski approved these changes Sep 4, 2026

View reviewed changes

satya164 requested a balanced review from Copilot September 15, 2026 20:33

Copilot started reviewing on behalf of satya164 September 15, 2026 20:33

View session

Copilot AI reviewed Sep 15, 2026

View reviewed changes

satya164 reviewed Oct 22, 2026

View reviewed changes

	<TouchableRipple onPress={() => setContactVisible(true)}>
	<TouchableRipple role="button" onPress={() => setContactVisible(true)}>

	<Appbar.Action aria-label="magnify" icon="magnify" onPress={() => {}} />
	<Appbar.Action aria-label="Search" icon="magnify" onPress={() => {}} />

Conversation

michalfedyna commented Aug 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Motivation

Related issue

Test plan

Uh oh!

MikitasK left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

MikitasK left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

JKobrynski left a comment

Choose a reason for hiding this comment

Uh oh!

JKobrynski commented Sep 4, 2026

Uh oh!

michalfedyna commented Sep 4, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟡 Changes recommended

Suppressed comments (2)

Uh oh!

satya164 commented Oct 22, 2026

Web

Uh oh!

satya164 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

This branch has not been deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

michalfedyna commented Aug 17, 2026 •

edited

Loading