From 460982c9c1be4c382c9bf712200f18d4ab989ceb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Fedyna?= Date: Tue, 1 Sep 2026 10:20:49 +0200 Subject: [PATCH] chore: inline Platform.OS checks --- example/src/DrawerItems.tsx | 7 +++---- example/src/Examples/CardExample.tsx | 7 +++---- .../Examples/Dialogs/DialogWithLoadingIndicator.tsx | 4 +--- example/src/Examples/TooltipExample.tsx | 3 +-- example/utils/index.ts | 2 -- src/components/Button/Button.tsx | 7 ++++--- src/components/Chip/Chip.tsx | 7 ++++--- src/components/Menu/Menu.tsx | 6 +++--- src/components/ProgressBar.tsx | 7 +++---- src/components/Tooltip/Tooltip.tsx | 10 ++++------ 10 files changed, 26 insertions(+), 34 deletions(-) diff --git a/example/src/DrawerItems.tsx b/example/src/DrawerItems.tsx index 94afa3136c..49bdd5f99d 100644 --- a/example/src/DrawerItems.tsx +++ b/example/src/DrawerItems.tsx @@ -17,7 +17,7 @@ import { useTheme, } from 'react-native-paper'; -import { dynamicThemeSupported, isWeb } from '../utils'; +import { dynamicThemeSupported } from '../utils'; import { PreferencesContext } from './PreferencesContext'; const DrawerItemsData = [ @@ -92,7 +92,6 @@ function DrawerItems() { const _setDrawerItem = (index: number) => setDrawerItemIndex(index); const { colors } = useTheme(); - const isIOS = Platform.OS === 'ios'; const expoGoExecution = Constants.executionEnvironment === ExecutionEnvironment.StoreClient; @@ -114,7 +113,7 @@ function DrawerItems() { } = preferences; const _handleToggleRTL = () => { - if (!isWeb && expoGoExecution) { + if (Platform.OS !== 'web' && expoGoExecution) { setShowRTLDialog(true); return; } @@ -222,7 +221,7 @@ function DrawerItems() { - {isIOS ? 'Highlight' : 'Ripple'} effect * + {Platform.OS === 'ios' ? 'Highlight' : 'Ripple'} effect * diff --git a/example/src/Examples/CardExample.tsx b/example/src/Examples/CardExample.tsx index 61c7ebe822..0982c80fa0 100644 --- a/example/src/Examples/CardExample.tsx +++ b/example/src/Examples/CardExample.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Alert, ScrollView, StyleSheet, View } from 'react-native'; +import { Alert, Platform, ScrollView, StyleSheet, View } from 'react-native'; import { Avatar, @@ -11,7 +11,6 @@ import { useTheme, } from 'react-native-paper'; -import { isWeb } from '../../utils'; import { PreferencesContext } from '../PreferencesContext'; import ScreenWrapper from '../ScreenWrapper'; @@ -144,7 +143,7 @@ const CardExample = () => { { - isWeb + Platform.OS === 'web' ? alert('The Chameleon is Pressed') : Alert.alert('The Chameleon is Pressed'); }} @@ -161,7 +160,7 @@ const CardExample = () => { { - isWeb + Platform.OS === 'web' ? alert('The City is Long Pressed') : Alert.alert('The City is Long Pressed'); }} diff --git a/example/src/Examples/Dialogs/DialogWithLoadingIndicator.tsx b/example/src/Examples/Dialogs/DialogWithLoadingIndicator.tsx index a28620e79c..d854dcb587 100644 --- a/example/src/Examples/Dialogs/DialogWithLoadingIndicator.tsx +++ b/example/src/Examples/Dialogs/DialogWithLoadingIndicator.tsx @@ -4,8 +4,6 @@ import { Dialog, Palette, Portal } from 'react-native-paper'; import { TextComponent } from './DialogTextComponent'; -const isIOS = Platform.OS === 'ios'; - const DialogWithLoadingIndicator = ({ visible, close, @@ -21,7 +19,7 @@ const DialogWithLoadingIndicator = ({ Loading..... diff --git a/example/src/Examples/TooltipExample.tsx b/example/src/Examples/TooltipExample.tsx index 8e0802d4a4..325e0f0113 100644 --- a/example/src/Examples/TooltipExample.tsx +++ b/example/src/Examples/TooltipExample.tsx @@ -15,7 +15,6 @@ import { Card, } from 'react-native-paper'; -import { isWeb } from '../../utils'; import ScreenWrapper from '../ScreenWrapper'; const MORE_ICON = Platform.OS === 'ios' ? 'dots-horizontal' : 'dots-vertical'; @@ -68,7 +67,7 @@ const TooltipExample = () => { A tooltip is displayed upon - {!isWeb + {Platform.OS !== 'web' ? ' tapping and holding a screen element or component' : ' hovering over a screen element or component'} . Continuously display the tooltip as long as the user long-presses or diff --git a/example/utils/index.ts b/example/utils/index.ts index 00f9f22bd6..f8c9675e41 100644 --- a/example/utils/index.ts +++ b/example/utils/index.ts @@ -60,8 +60,6 @@ export function inputReducer( } } -export const isWeb = Platform.OS === 'web'; - export const animatedFABExampleData = [ { id: '1', diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index bfc7782d66..207ae15f7b 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -200,7 +200,6 @@ const Button = ({ ); const { animation } = theme; const uppercase = uppercaseProp ?? false; - const isWeb = Platform.OS === 'web'; const hasPassedTouchHandler = hasTouchHandler({ onPress, @@ -235,7 +234,8 @@ const Button = ({ toValue: activeElevation, duration: 200 * scale, useNativeDriver: - isWeb || Platform.constants.reactNativeVersion.minor <= 72, + Platform.OS === 'web' || + Platform.constants.reactNativeVersion.minor <= 72, }).start(); } }; @@ -248,7 +248,8 @@ const Button = ({ toValue: initialElevation, duration: 150 * scale, useNativeDriver: - isWeb || Platform.constants.reactNativeVersion.minor <= 72, + Platform.OS === 'web' || + Platform.constants.reactNativeVersion.minor <= 72, }).start(); } }; diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx index b6482e9209..c70769c160 100644 --- a/src/components/Chip/Chip.tsx +++ b/src/components/Chip/Chip.tsx @@ -201,7 +201,6 @@ const Chip = ({ ...rest }: Props) => { const theme = useInternalTheme(themeOverrides); - const isWeb = Platform.OS === 'web'; const { current: elevation } = React.useRef( new Animated.Value(elevated ? 1 : 0) @@ -223,7 +222,8 @@ const Chip = ({ toValue: elevated ? 2 : 0, duration: 200 * scale, useNativeDriver: - isWeb || Platform.constants.reactNativeVersion.minor <= 72, + Platform.OS === 'web' || + Platform.constants.reactNativeVersion.minor <= 72, }).start(); }); @@ -234,7 +234,8 @@ const Chip = ({ toValue: elevated ? 1 : 0, duration: 150 * scale, useNativeDriver: - isWeb || Platform.constants.reactNativeVersion.minor <= 72, + Platform.OS === 'web' || + Platform.constants.reactNativeVersion.minor <= 72, }).start(); }); diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx index ec4c256dad..f84e1cd189 100644 --- a/src/components/Menu/Menu.tsx +++ b/src/components/Menu/Menu.tsx @@ -127,8 +127,6 @@ const isCoordinate = (anchor: any): anchor is { x: number; y: number } => typeof anchor?.x === 'number' && typeof anchor?.y === 'number'; -const isBrowser = () => Platform.OS === 'web' && 'document' in global; - /** * Menus display a list of choices on temporary elevated surfaces. Their placement varies based on the element that opens them. * @@ -258,7 +256,9 @@ const Menu = ({ const removeListeners = React.useCallback(() => { backHandlerSubscriptionRef.current?.remove(); dimensionsSubscriptionRef.current?.remove(); - isBrowser() && document.removeEventListener('keyup', handleKeypress); + Platform.OS === 'web' && + 'document' in global && + document.removeEventListener('keyup', handleKeypress); }, [handleKeypress]); const attachListeners = React.useCallback(() => { diff --git a/src/components/ProgressBar.tsx b/src/components/ProgressBar.tsx index c3a120b1fd..626c81bb99 100644 --- a/src/components/ProgressBar.tsx +++ b/src/components/ProgressBar.tsx @@ -79,7 +79,6 @@ const ProgressBar = ({ testID = 'progress-bar', ...rest }: Props) => { - const isWeb = Platform.OS === 'web'; const theme = useInternalTheme(themeOverrides); const { direction } = useLocale(); const isRTL = direction === 'rtl'; @@ -131,7 +130,7 @@ const ProgressBar = ({ duration: INDETERMINATE_DURATION, toValue: 1, // Animated.loop does not work if useNativeDriver is true on web - useNativeDriver: !isWeb, + useNativeDriver: Platform.OS !== 'web', isInteraction: false, }); } @@ -148,7 +147,7 @@ const ProgressBar = ({ isInteraction: false, }).start(); } - }, [fade, scale, indeterminate, timer, progress, isWeb]); + }, [fade, scale, indeterminate, timer, progress]); const stopAnimation = React.useCallback(() => { // Stop indeterminate animation @@ -200,7 +199,7 @@ const ProgressBar = ({ aria-valuemin={indeterminate ? undefined : 0} aria-valuemax={indeterminate ? undefined : 100} aria-valuenow={indeterminate ? undefined : Math.round(progress * 100)} - style={isWeb && styles.webContainer} + style={Platform.OS === 'web' && styles.webContainer} testID={testID} > { - const isWeb = Platform.OS === 'web'; - const theme = useInternalTheme(themeOverrides); const [visible, setVisible] = React.useState(false); @@ -120,7 +118,7 @@ const Tooltip = ({ hideTooltipTimer.current = []; } - if (isWeb) { + if (Platform.OS === 'web') { const id = setTimeout(() => { touched.current = true; setVisible(true); @@ -130,7 +128,7 @@ const Tooltip = ({ touched.current = true; setVisible(true); } - }, [isWeb, enterTouchDelay]); + }, [enterTouchDelay]); const handleTouchEnd = React.useCallback(() => { touched.current = false; @@ -236,11 +234,11 @@ const Tooltip = ({ {React.cloneElement(children, { ...rest, - ...(isWeb ? webPressProps : mobilePressProps), + ...(Platform.OS === 'web' ? webPressProps : mobilePressProps), })}