Inline Platform.OS checks

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() {
             <TouchableRipple onPress={toggleRippleEffect}>
               <View style={[styles.preference, styles.v3Preference]}>
                 <Text variant="labelLarge">
-                  {isIOS ? 'Highlight' : 'Ripple'} effect *
+                  {Platform.OS === 'ios' ? 'Highlight' : 'Ripple'} effect *
                 </Text>
                 <View pointerEvents="none">
                   <Switch value={rippleEffectEnabled} />

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 = () => {
         <Card
           style={styles.card}
           onPress={() => {
-            isWeb
+            Platform.OS === 'web'
               ? alert('The Chameleon is Pressed')
               : Alert.alert('The Chameleon is Pressed');
           }}
@@ -161,7 +160,7 @@ const CardExample = () => {
         <Card
           style={styles.card}
           onLongPress={() => {
-            isWeb
+            Platform.OS === 'web'
               ? alert('The City is Long Pressed')
               : Alert.alert('The City is Long Pressed');
           }}

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 = ({
           <View style={styles.flexing}>
             <ActivityIndicator
               color={Palette.tertiary30}
-              size={isIOS ? 'large' : 48}
+              size={Platform.OS === 'ios' ? 'large' : 48}
               style={styles.marginRight}
             />
             <TextComponent>Loading.....</TextComponent>

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 = () => {
       <ScreenWrapper>
         <Banner visible>
           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

example/utils/index.ts

@@ -60,8 +60,6 @@ export function inputReducer<T extends keyof State>(
   }
 }
 
-export const isWeb = Platform.OS === 'web';
-
 export const animatedFABExampleData = [
   {
     id: '1',

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();
     }
   };

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<Animated.Value>(
     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();
   });
 

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(() => {

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}
     >
       <Animated.View

src/components/Tooltip/Tooltip.tsx

@@ -71,8 +71,6 @@ const Tooltip = ({
   titleMaxFontSizeMultiplier,
   ...rest
 }: Props) => {
-  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 = ({
       <Pressable
         ref={childrenWrapperRef}
         style={styles.pressContainer}
-        {...(isWeb ? webPressProps : mobilePressProps)}
+        {...(Platform.OS === 'web' ? webPressProps : mobilePressProps)}
       >
         {React.cloneElement(children, {
           ...rest,
-          ...(isWeb ? webPressProps : mobilePressProps),
+          ...(Platform.OS === 'web' ? webPressProps : mobilePressProps),
         })}
       </Pressable>
     </>