From 5bcd8f3b6e68e7039a6563a8847c431c948d54f2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kacper=20Roz=CC=87niata?=
<56474758+krozniata@users.noreply.github.com>
Date: Thu, 8 Oct 2026 12:36:29 +0200
Subject: [PATCH 1/2] feat: refresh example app design
---
example/bun.lock | 3 -
example/package.json | 1 -
example/src/App.tsx | 449 ++++++++++--------
example/src/component/Button.tsx | 97 ++--
.../NavigationPanel/ControlPanel.tsx | 125 ++---
.../component/NavigationPanel/LogsPanel.tsx | 75 ++-
.../NavigationPanel/NavigationPanel.tsx | 125 +++--
example/src/theme.ts | 15 +
8 files changed, 514 insertions(+), 376 deletions(-)
create mode 100644 example/src/theme.ts
diff --git a/example/bun.lock b/example/bun.lock
index 4f61e168..5dc87e00 100644
--- a/example/bun.lock
+++ b/example/bun.lock
@@ -9,7 +9,6 @@
"@react-navigation/material-top-tabs": "^7.8.0",
"@react-navigation/native": "^7.5.0",
"@react-navigation/native-stack": "^7.20.0",
- "@react-navigation/stack": "^7.12.0",
"react": "19.2.3",
"react-native": "0.87.1",
"react-native-animated-pagination-dots": "^0.1.73",
@@ -390,8 +389,6 @@
"@react-navigation/routers": ["@react-navigation/routers@7.6.4", "", { "dependencies": { "nanoid": "^3.3.11" } }, "sha512-GI7eJm8/KsZUQaYcXvEExikKurRZRgEsSzyZ7faENfi65yqJBCXjDMwyN1pF6pNW1MoLH1ErDwDivFxY6BzD3w=="],
- "@react-navigation/stack": ["@react-navigation/stack@7.12.0", "", { "dependencies": { "@react-navigation/elements": "^2.9.44", "color": "^4.2.3", "use-latest-callback": "^0.2.4" }, "peerDependencies": { "@react-navigation/native": "^7.5.0", "react": ">= 18.2.0", "react-native": "*", "react-native-gesture-handler": ">= 2.0.0", "react-native-safe-area-context": ">= 4.0.0", "react-native-screens": ">= 4.0.0" } }, "sha512-aMKl1+fi/BDu7nlMABrVi8rbaZfThhacV9Iwh4R62vr+rXL6Dp3LuYg0lCrbC35nRUaHHs5WHeFLwshn6x1sEg=="],
-
"@sideway/address": ["@sideway/address@4.1.5", "", { "dependencies": { "@hapi/hoek": "^9.0.0" } }, "sha512-IqO/DUQHUkPeixNQ8n0JA6102hT9CmaljNTPmQ1u8MEhBo/R4Q8eKLN/vGZxuebwOroDB4cbpjheD4+/sKFK4Q=="],
"@sideway/formula": ["@sideway/formula@3.0.1", "", {}, "sha512-/poHZJJVjx3L+zVD6g9KgHfYnb443oi7wLu/XKojDviHy6HOEOA6z1Trk5aR1dGcmPenJEgb2sK2I80LeS3MIg=="],
diff --git a/example/package.json b/example/package.json
index 7141625f..d68e58cf 100644
--- a/example/package.json
+++ b/example/package.json
@@ -20,7 +20,6 @@
"@react-navigation/material-top-tabs": "^7.8.0",
"@react-navigation/native": "^7.5.0",
"@react-navigation/native-stack": "^7.20.0",
- "@react-navigation/stack": "^7.12.0",
"react": "19.2.3",
"react-native": "0.87.1",
"react-native-animated-pagination-dots": "^0.1.73",
diff --git a/example/src/App.tsx b/example/src/App.tsx
index 99818f85..aba3d065 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -7,14 +7,19 @@ import {
StyleSheet,
Text,
ScrollView,
- TouchableOpacity,
- Button,
- Alert,
+ Platform,
+ Pressable,
+ View,
I18nManager,
DevSettings,
+ StatusBar,
} from 'react-native';
-import { NavigationContainer, useNavigation } from '@react-navigation/native';
-import { createStackNavigator } from '@react-navigation/stack';
+import {
+ DefaultTheme,
+ NavigationContainer,
+ useNavigation,
+ type Theme,
+} from '@react-navigation/native';
import { BasicPagerViewExample } from './BasicPagerViewExample';
import { KeyboardExample } from './KeyboardExample';
import { OnPageScrollExample } from './OnPageScrollExample';
@@ -32,6 +37,7 @@ import ReanimatedOnPageScrollExample from './ReanimatedOnPageScrollExample';
import { MaterialTopBarExample } from './MaterialTopTabExample';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { PagerHookExample } from './PagerHookExample';
import { NestedHorizontalScrollViewExample } from './NestedHorizontalScrollViewExample';
import { Issue1096KeyboardShrinkRepro } from './gh-issues/Issue1096KeyboardShrinkRepro';
@@ -46,6 +52,7 @@ import {
Issue1142PagerListScreen,
Issue1142SearchBarInsetRepro,
} from './gh-issues/Issue1142SearchBarInsetRepro';
+import { colors, radius } from './theme';
function BasicPagerViewExampleScreen() {
return ;
@@ -61,151 +68,136 @@ type Example = {
testID?: string;
};
-const examples: Example[] = [
- {
- component: BasicPagerViewExampleScreen,
- name: 'Basic Example',
- testID: 'example-basic-horizontal',
- },
- {
- component: VerticalBasicPagerViewExampleScreen,
- name: 'Vertical Basic Example',
- testID: 'example-basic-vertical',
- },
-
- { component: OnPageScrollExample, name: 'OnPageScroll Example' },
- { component: OnPageSelectedExample, name: 'OnPageSelected Example' },
+const chevron =
+ Platform.OS === 'ios' && I18nManager.getConstants().isRTL ? '‹' : '›';
+const sections: { title: string; data: Example[] }[] = [
{
- component: ScrollablePagerViewExample,
- name: 'Scrollable PagerView Example',
- },
- {
- component: NestedPagerView,
- name: 'Nested PagerView Example',
- },
- {
- component: NestedHorizontalScrollViewExample,
- name: 'NestedHorizontalScrollViewExample',
- },
+ title: 'Fundamental Examples',
+ data: [
+ {
+ component: BasicPagerViewExampleScreen,
+ name: 'Basic Example',
+ testID: 'example-basic-horizontal',
+ },
+ {
+ component: VerticalBasicPagerViewExampleScreen,
+ name: 'Vertical Basic Example',
+ testID: 'example-basic-vertical',
+ },
- {
- component: ScrollViewInsideExample,
- name: 'ScrollView inside PagerView Example',
- },
- {
- component: TabViewInsideScrollViewExample,
- name: 'TabView inside ScrollView Example',
- },
-];
+ { component: OnPageScrollExample, name: 'OnPageScroll Example' },
+ { component: OnPageSelectedExample, name: 'OnPageSelected Example' },
-const tabViewExamples: Example[] = [
- { component: MaterialTopBarExample, name: 'MaterialTopBarExample' },
- { component: TabBarIconExample, name: 'TabBarIconExample' },
- { component: CustomTabBarExample, name: 'CustomTabBarExample' },
- { component: CoverflowExample, name: 'CoverflowExample' },
-];
-
-const additionalExamples: Example[] = [
- { component: PagerHookExample, name: 'Pager Hook Example' },
- { component: KeyboardExample, name: 'Keyboard Example' },
- { component: HeadphonesCarouselExample, name: 'Headphones Carousel Example' },
- { component: PaginationDotsExample, name: 'Pagination Dots Example' },
- {
- component: ReanimatedOnPageScrollExample,
- name: 'Reanimated onPageScroll example',
- },
-];
+ {
+ component: ScrollablePagerViewExample,
+ name: 'Scrollable PagerView Example',
+ },
+ {
+ component: NestedPagerView,
+ name: 'Nested PagerView Example',
+ },
+ {
+ component: NestedHorizontalScrollViewExample,
+ name: 'NestedHorizontalScrollViewExample',
+ },
-const ghIssues: Example[] = [
- {
- component: Issue1083ModalSetPageExample,
- name: 'Issue #1083 Modal SetPage Repro',
+ {
+ component: ScrollViewInsideExample,
+ name: 'ScrollView inside PagerView Example',
+ },
+ ],
},
{
- component: Issue1096KeyboardShrinkRepro,
- name: 'Issue #1096 Keyboard Shrink Repro',
+ title: 'TabView Examples',
+ data: [
+ { component: MaterialTopBarExample, name: 'MaterialTopBarExample' },
+ { component: TabBarIconExample, name: 'TabBarIconExample' },
+ { component: CustomTabBarExample, name: 'CustomTabBarExample' },
+ { component: CoverflowExample, name: 'CoverflowExample' },
+ {
+ component: TabViewInsideScrollViewExample,
+ name: 'TabView inside ScrollView Example',
+ },
+ ],
},
{
- component: Issue1098NestedPagerRepro,
- name: 'Issue #1098 Nested Pager Repro',
+ title: 'Additional Examples',
+ data: [
+ { component: PagerHookExample, name: 'Pager Hook Example' },
+ { component: KeyboardExample, name: 'Keyboard Example' },
+ {
+ component: HeadphonesCarouselExample,
+ name: 'Headphones Carousel Example',
+ },
+ { component: PaginationDotsExample, name: 'Pagination Dots Example' },
+ {
+ component: ReanimatedOnPageScrollExample,
+ name: 'Reanimated onPageScroll example',
+ },
+ ],
},
{
- component: Issue1099SafeAreaRepro,
- name: 'Issue #1099 Safe Area Repro',
- },
- {
- component: Issue1142SearchBarInsetRepro,
- name: 'Issue #1142 Search Bar Inset Repro',
+ title: 'Github Issues Examples',
+ data: [
+ {
+ component: Issue1083ModalSetPageExample,
+ name: 'Issue #1083 Modal SetPage Repro',
+ },
+ {
+ component: Issue1096KeyboardShrinkRepro,
+ name: 'Issue #1096 Keyboard Shrink Repro',
+ },
+ {
+ component: Issue1098NestedPagerRepro,
+ name: 'Issue #1098 Nested Pager Repro',
+ },
+ {
+ component: Issue1099SafeAreaRepro,
+ name: 'Issue #1099 Safe Area Repro',
+ },
+ {
+ component: Issue1142SearchBarInsetRepro,
+ name: 'Issue #1142 Search Bar Inset Repro',
+ },
+ ],
},
];
-const allExamples = [
- ...examples,
- ...tabViewExamples,
- ...additionalExamples,
- ...ghIssues,
-];
+const allExamples = sections.flatMap((section) => section.data);
function App() {
const navigation = useNavigation();
return (
-
- Fundamental Examples
- {examples.map((example) => (
- {
- //@ts-ignore
- navigation.navigate(example.name);
- }}
- >
- {example.name}
-
- ))}
- TabView Examples
- {tabViewExamples.map((example) => (
- {
- //@ts-ignore
- navigation.navigate(example.name);
- }}
- >
- {example.name}
-
- ))}
- Additional Examples
- {additionalExamples.map((example) => (
- {
- //@ts-ignore
- navigation.navigate(example.name);
- }}
- >
- {example.name}
-
- ))}
- Github Issues Examples
- {ghIssues.map((example) => (
- {
- //@ts-ignore
- navigation.navigate(example.name);
- }}
- >
- {example.name}
-
+
+ {sections.map((section) => (
+
+ {section.title}
+
+ {section.data.map((example, index) => (
+ [
+ styles.row,
+ index > 0 && styles.rowDivider,
+ pressed && styles.rowPressed,
+ ]}
+ onPress={() => {
+ //@ts-ignore
+ navigation.navigate(example.name);
+ }}
+ >
+ {example.name}
+ {chevron}
+
+ ))}
+
+
))}
);
@@ -220,95 +212,154 @@ function App() {
function LayoutDirectionToggle() {
const [isRTL, setIsRTL] = React.useState(I18nManager.getConstants().isRTL);
return (
-