From ebf35de60f19b5694c4ef13277f2eccdcc9e8900 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82?= Date: Fri, 16 Oct 2026 15:33:17 +0200 Subject: [PATCH] Stop react-native-pager-view from entering the web bundle of the example app --- .../index.android.tsx | 197 ++++++++++++++++++ .../nativeInterceptCancellation/index.tsx | 197 +----------------- 2 files changed, 200 insertions(+), 194 deletions(-) create mode 100644 apps/common-app/src/new_api/tests/nativeInterceptCancellation/index.android.tsx diff --git a/apps/common-app/src/new_api/tests/nativeInterceptCancellation/index.android.tsx b/apps/common-app/src/new_api/tests/nativeInterceptCancellation/index.android.tsx new file mode 100644 index 0000000000..0f10bed33b --- /dev/null +++ b/apps/common-app/src/new_api/tests/nativeInterceptCancellation/index.android.tsx @@ -0,0 +1,197 @@ +import React, { useState } from 'react'; +import { + DrawerLayoutAndroid, + Pressable, + StyleSheet, + Text, + View, +} from 'react-native'; +import { GestureDetector, useTapGesture } from 'react-native-gesture-handler'; +import PagerView from 'react-native-pager-view'; +import Animated, { + interpolateColor, + useAnimatedStyle, + useSharedValue, + withTiming, +} from 'react-native-reanimated'; +import { scheduleOnRN } from 'react-native-worklets'; + +import { COLORS, useIndexedLogger } from '../../../common'; + +// A native view takes over the touch without the root ever seeing a +// disallow-intercept request. The framework still sends ACTION_CANCEL to the +// tap's detector, which is what cancels the tap below. +// - Pager: swipe the inner pager starting on the box. The inner pager host +// asks its ancestors not to intercept on DOWN, so the pager's own request on +// MOVE stops at the already flagged page view and never reaches the root. +// - Drawer: swipe the drawer open from the right edge starting on the box. +// DrawerLayout intercepts on MOVE and never requests at all. With gesture +// navigation the system back swipe takes the edge, use 3-button navigation. +// In both cases the pager / drawer moves and the tap count stays the same. + +type Mode = 'pager' | 'drawer'; + +type TapBoxProps = { + count: number; + onTap: () => void; + log: (message: string) => void; +}; + +function TapBox({ count, onTap, log }: TapBoxProps) { + const colorProgress = useSharedValue(0); + + const animatedStyle = useAnimatedStyle(() => ({ + backgroundColor: interpolateColor( + colorProgress.value, + [0, 1], + [COLORS.NAVY, COLORS.KINDA_BLUE] + ), + })); + + const tap = useTapGesture({ + onBegin: () => { + log('onBegin'); + colorProgress.value = withTiming(1, { duration: 100 }); + }, + onActivate: () => { + log('onActivate'); + scheduleOnRN(onTap); + }, + onDeactivate: () => { + log('onDeactivate'); + }, + onFinalize: () => { + log('onFinalize'); + colorProgress.value = withTiming(0, { duration: 100 }); + }, + }); + + return ( + + + Tap count: {count} + + + ); +} + +function PagerMode(props: TapBoxProps) { + return ( + + + + + + + + Inner page 2 + + + + + Outer page 2 + + + ); +} + +function DrawerMode(props: TapBoxProps) { + return ( + ( + + Drawer + + )}> + + + ); +} + +export default function NativeInterceptCancellationExample() { + const [mode, setMode] = useState('pager'); + const [count, setCount] = useState(0); + const log = useIndexedLogger(); + + const boxProps = { + count, + log, + onTap: () => setCount((c) => c + 1), + }; + + return ( + + + + Swipe the pager or drag the drawer open from the right edge, starting + on the box. The count must not change. + + + + + + + {mode === 'pager' ? ( + + ) : ( + + )} + + ); +} + +type ModeButtonProps = { + mode: Mode; + current: Mode; + onSelect: (mode: Mode) => void; +}; + +function ModeButton({ mode, current, onSelect }: ModeButtonProps) { + return ( + onSelect(mode)}> + + {mode === 'pager' ? 'Pager' : 'Drawer'} + + + ); +} + +const styles = StyleSheet.create({ + flex: { flex: 1 }, + center: { alignItems: 'center', justifyContent: 'center' }, + header: { + padding: 12, + gap: 8, + backgroundColor: COLORS.offWhite, + }, + hint: { + textAlign: 'center', + opacity: 0.6, + fontSize: 14, + }, + buttons: { flexDirection: 'row', justifyContent: 'center', gap: 8 }, + button: { + paddingVertical: 8, + paddingHorizontal: 14, + borderRadius: 6, + backgroundColor: COLORS.KINDA_YELLOW, + }, + buttonActive: { backgroundColor: COLORS.YELLOW }, + buttonText: { fontWeight: '600', color: COLORS.NAVY }, + box: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + }, + boxText: { + fontSize: 20, + fontWeight: '700', + color: COLORS.offWhite, + }, +}); diff --git a/apps/common-app/src/new_api/tests/nativeInterceptCancellation/index.tsx b/apps/common-app/src/new_api/tests/nativeInterceptCancellation/index.tsx index 0f10bed33b..37d3f837a3 100644 --- a/apps/common-app/src/new_api/tests/nativeInterceptCancellation/index.tsx +++ b/apps/common-app/src/new_api/tests/nativeInterceptCancellation/index.tsx @@ -1,197 +1,6 @@ -import React, { useState } from 'react'; -import { - DrawerLayoutAndroid, - Pressable, - StyleSheet, - Text, - View, -} from 'react-native'; -import { GestureDetector, useTapGesture } from 'react-native-gesture-handler'; -import PagerView from 'react-native-pager-view'; -import Animated, { - interpolateColor, - useAnimatedStyle, - useSharedValue, - withTiming, -} from 'react-native-reanimated'; -import { scheduleOnRN } from 'react-native-worklets'; - -import { COLORS, useIndexedLogger } from '../../../common'; - -// A native view takes over the touch without the root ever seeing a -// disallow-intercept request. The framework still sends ACTION_CANCEL to the -// tap's detector, which is what cancels the tap below. -// - Pager: swipe the inner pager starting on the box. The inner pager host -// asks its ancestors not to intercept on DOWN, so the pager's own request on -// MOVE stops at the already flagged page view and never reaches the root. -// - Drawer: swipe the drawer open from the right edge starting on the box. -// DrawerLayout intercepts on MOVE and never requests at all. With gesture -// navigation the system back swipe takes the edge, use 3-button navigation. -// In both cases the pager / drawer moves and the tap count stays the same. - -type Mode = 'pager' | 'drawer'; - -type TapBoxProps = { - count: number; - onTap: () => void; - log: (message: string) => void; -}; - -function TapBox({ count, onTap, log }: TapBoxProps) { - const colorProgress = useSharedValue(0); - - const animatedStyle = useAnimatedStyle(() => ({ - backgroundColor: interpolateColor( - colorProgress.value, - [0, 1], - [COLORS.NAVY, COLORS.KINDA_BLUE] - ), - })); - - const tap = useTapGesture({ - onBegin: () => { - log('onBegin'); - colorProgress.value = withTiming(1, { duration: 100 }); - }, - onActivate: () => { - log('onActivate'); - scheduleOnRN(onTap); - }, - onDeactivate: () => { - log('onDeactivate'); - }, - onFinalize: () => { - log('onFinalize'); - colorProgress.value = withTiming(0, { duration: 100 }); - }, - }); - - return ( - - - Tap count: {count} - - - ); -} - -function PagerMode(props: TapBoxProps) { - return ( - - - - - - - - Inner page 2 - - - - - Outer page 2 - - - ); -} - -function DrawerMode(props: TapBoxProps) { - return ( - ( - - Drawer - - )}> - - - ); -} +import React from 'react'; +import { Text } from 'react-native'; export default function NativeInterceptCancellationExample() { - const [mode, setMode] = useState('pager'); - const [count, setCount] = useState(0); - const log = useIndexedLogger(); - - const boxProps = { - count, - log, - onTap: () => setCount((c) => c + 1), - }; - - return ( - - - - Swipe the pager or drag the drawer open from the right edge, starting - on the box. The count must not change. - - - - - - - {mode === 'pager' ? ( - - ) : ( - - )} - - ); + return Sorry, this is a demo of Android-only native components; } - -type ModeButtonProps = { - mode: Mode; - current: Mode; - onSelect: (mode: Mode) => void; -}; - -function ModeButton({ mode, current, onSelect }: ModeButtonProps) { - return ( - onSelect(mode)}> - - {mode === 'pager' ? 'Pager' : 'Drawer'} - - - ); -} - -const styles = StyleSheet.create({ - flex: { flex: 1 }, - center: { alignItems: 'center', justifyContent: 'center' }, - header: { - padding: 12, - gap: 8, - backgroundColor: COLORS.offWhite, - }, - hint: { - textAlign: 'center', - opacity: 0.6, - fontSize: 14, - }, - buttons: { flexDirection: 'row', justifyContent: 'center', gap: 8 }, - button: { - paddingVertical: 8, - paddingHorizontal: 14, - borderRadius: 6, - backgroundColor: COLORS.KINDA_YELLOW, - }, - buttonActive: { backgroundColor: COLORS.YELLOW }, - buttonText: { fontWeight: '600', color: COLORS.NAVY }, - box: { - flex: 1, - alignItems: 'center', - justifyContent: 'center', - }, - boxText: { - fontSize: 20, - fontWeight: '700', - color: COLORS.offWhite, - }, -});