@react-navigation/elements 2.0.0-alpha.1 → 2.0.0-alpha.3

package/src/Label/Label.tsx

@@ -1,13 +1,13 @@
-import { useTheme } from '@react-navigation/native';
 import * as React from 'react';
 import {
-  StyleProp,
+  type StyleProp,
   StyleSheet,
-  Text,
-  TextProps,
-  TextStyle,
+  type TextProps,
+  type TextStyle,
 } from 'react-native';
 
+import { Text } from '../Text';
+
 type Props = Omit<TextProps, 'style'> & {
   tintColor?: string;
   children?: string;
@@ -15,18 +15,11 @@ type Props = Omit<TextProps, 'style'> & {
 };
 
 export function Label({ tintColor, style, ...rest }: Props) {
-  const { colors, fonts } = useTheme();
-
   return (
     <Text
       numberOfLines={1}
       {...rest}
-      style={[
-        fonts.regular,
-        styles.label,
-        { color: tintColor === undefined ? colors.text : tintColor },
-        style,
-      ]}
+      style={[styles.label, tintColor != null && { color: tintColor }, style]}
     />
   );
 }

package/src/MaskedViewNative.tsx

@@ -16,6 +16,7 @@ let RNCMaskedView: MaskedViewType | undefined;
 try {
   // Add try/catch to support usage even if it's not installed, since it's optional.
   // Newer versions of Metro will handle it properly.
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
   RNCMaskedView = require('@react-native-masked-view/masked-view').default;
 } catch (e) {
   // Ignore

package/src/MissingIcon.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StyleProp, StyleSheet, Text, TextStyle } from 'react-native';
+import { type StyleProp, StyleSheet, Text, type TextStyle } from 'react-native';
 
 type Props = {
   color?: string;

package/src/PlatformPressable.tsx

@@ -3,18 +3,19 @@ import * as React from 'react';
 import {
   Animated,
   Easing,
-  GestureResponderEvent,
+  type GestureResponderEvent,
   Platform,
   Pressable,
-  PressableProps,
-  StyleProp,
-  ViewStyle,
+  type PressableProps,
+  type StyleProp,
+  type ViewStyle,
 } from 'react-native';
 
 export type Props = Omit<PressableProps, 'style'> & {
   pressColor?: string;
   pressOpacity?: number;
   style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  href?: string;
   children: React.ReactNode;
 };
 
@@ -28,6 +29,8 @@ const ANDROID_SUPPORTS_RIPPLE =
  * PlatformPressable provides an abstraction on top of Pressable to handle platform differences.
  */
 export function PlatformPressable({
+  disabled,
+  onPress,
   onPressIn,
   onPressOut,
   android_ripple,
@@ -52,6 +55,26 @@ export function PlatformPressable({
     }).start();
   };
 
+  const handlePress = (e: GestureResponderEvent) => {
+    // @ts-expect-error: these properties exist on web, but not in React Native
+    const hasModifierKey = e.metaKey || e.altKey || e.ctrlKey || e.shiftKey; // ignore clicks with modifier keys
+    // @ts-expect-error: these properties exist on web, but not in React Native
+    const isLeftClick = e.button == null || e.button === 0; // only handle left clicks
+    const isSelfTarget = [undefined, null, '', 'self'].includes(
+      // @ts-expect-error: these properties exist on web, but not in React Native
+      e.currentTarget?.target
+    ); // let browser handle "target=_blank" etc.
+
+    if (Platform.OS === 'web' && rest.href != null) {
+      if (!hasModifierKey && isLeftClick && isSelfTarget) {
+        e.preventDefault();
+        onPress?.(e);
+      }
+    } else {
+      onPress?.(e);
+    }
+  };
+
   const handlePressIn = (e: GestureResponderEvent) => {
     animateTo(pressOpacity, 0);
     onPressIn?.(e);
@@ -64,6 +87,11 @@ export function PlatformPressable({
 
   return (
     <AnimatedPressable
+      accessible
+      accessibilityRole={
+        Platform.OS === 'web' && rest.href != null ? 'link' : 'button'
+      }
+      onPress={disabled ? undefined : handlePress}
       onPressIn={handlePressIn}
       onPressOut={handlePressOut}
       android_ripple={

package/src/ResourceSavingView.tsx

@@ -1,5 +1,11 @@
 import * as React from 'react';
-import { Platform, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+import {
+  Platform,
+  type StyleProp,
+  StyleSheet,
+  View,
+  type ViewStyle,
+} from 'react-native';
 
 type Props = {
   visible: boolean;

package/src/SafeAreaProviderCompat.tsx

@@ -2,10 +2,10 @@ import * as React from 'react';
 import {
   Dimensions,
   Platform,
-  StyleProp,
+  type StyleProp,
   StyleSheet,
   View,
-  ViewStyle,
+  type ViewStyle,
 } from 'react-native';
 import {
   initialWindowMetrics,

package/src/Screen.tsx

@@ -1,12 +1,18 @@
 import {
   NavigationContext,
-  NavigationProp,
+  type NavigationProp,
   NavigationRouteContext,
-  ParamListBase,
-  RouteProp,
+  type ParamListBase,
+  type RouteProp,
 } from '@react-navigation/native';
 import * as React from 'react';
-import { Animated, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+import {
+  Animated,
+  type StyleProp,
+  StyleSheet,
+  View,
+  type ViewStyle,
+} from 'react-native';
 import {
   useSafeAreaFrame,
   useSafeAreaInsets,

package/src/Text.tsx

@@ -0,0 +1,14 @@
+import { useTheme } from '@react-navigation/native';
+import * as React from 'react';
+import { Text as NativeText, type TextProps } from 'react-native';
+
+export function Text({ style, ...rest }: TextProps) {
+  const { colors, fonts } = useTheme();
+
+  return (
+    <NativeText
+      {...rest}
+      style={[{ color: colors.text }, fonts.regular, style]}
+    />
+  );
+}

package/src/getNamedContext.tsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 const contexts = '__react_navigation__elements_contexts';
 
 declare global {
+  // eslint-disable-next-line no-var
   var __react_navigation__elements_contexts: Map<string, React.Context<any>>;
 }
 

package/src/index.tsx

@@ -1,4 +1,5 @@
 export { Background } from './Background';
+export { Button } from './Button';
 export { getDefaultSidebarWidth } from './getDefaultSidebarWidth';
 export { getDefaultHeaderHeight } from './Header/getDefaultHeaderHeight';
 export { getHeaderTitle } from './Header/getHeaderTitle';
@@ -17,6 +18,7 @@ export { PlatformPressable } from './PlatformPressable';
 export { ResourceSavingView } from './ResourceSavingView';
 export { SafeAreaProviderCompat } from './SafeAreaProviderCompat';
 export { Screen } from './Screen';
+export { Text } from './Text';
 
 export const Assets = [
   // eslint-disable-next-line import/no-commonjs

package/src/types.tsx

@@ -179,6 +179,10 @@ export type HeaderBackButtonProps = HeaderButtonProps & {
    * Function which returns a React Element to display custom image in header's back button.
    */
   backImage?: (props: { tintColor: string }) => React.ReactNode;
+  /**
+   * The `href` to use for the anchor tag on web
+   */
+  href?: string;
   /**
    * Label text for the button. Usually the title of the previous screen.
    * By default, this is only shown on iOS.