react-native-gesture-handler 3.0.0-beta.2 → 3.0.0-beta.4

package/src/specs/RNGestureHandlerDetectorNativeComponent.ts

@@ -1,12 +1,12 @@
-import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type { ViewProps } from 'react-native';
 import type {
-  Int32,
   DirectEventHandler,
-  UnsafeMixed,
   Double,
+  Int32,
+  UnsafeMixed,
   WithDefault,
 } from 'react-native/Libraries/Types/CodegenTypes';
-import type { ViewProps } from 'react-native';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
 
 type GestureHandlerEvent = Readonly<{
   handlerTag: Int32;
@@ -51,13 +51,25 @@ export interface VirtualChildrenProps {
 // @ts-expect-error WithDefault adds `| null` to the type, which doesn't align with ViewProps.pointerEvents
 // Using Exclude to remove null from the type makes the error go away, but breaks codegen.
 export interface NativeProps extends ViewProps {
-  onGestureHandlerEvent?: DirectEventHandler<GestureHandlerEvent>;
-  onGestureHandlerStateChange?: DirectEventHandler<GestureHandlerStateChangeEvent>;
-  onGestureHandlerTouchEvent?: DirectEventHandler<GestureHandlerTouchEvent>;
-  onGestureHandlerReanimatedEvent?: DirectEventHandler<GestureHandlerEvent>;
-  onGestureHandlerReanimatedStateChange?: DirectEventHandler<GestureHandlerStateChangeEvent>;
-  onGestureHandlerReanimatedTouchEvent?: DirectEventHandler<GestureHandlerTouchEvent>;
-  onGestureHandlerAnimatedEvent?: DirectEventHandler<GestureHandlerEvent>;
+  onGestureHandlerEvent?: DirectEventHandler<GestureHandlerEvent> | undefined;
+  onGestureHandlerStateChange?:
+    | DirectEventHandler<GestureHandlerStateChangeEvent>
+    | undefined;
+  onGestureHandlerTouchEvent?:
+    | DirectEventHandler<GestureHandlerTouchEvent>
+    | undefined;
+  onGestureHandlerReanimatedEvent?:
+    | DirectEventHandler<GestureHandlerEvent>
+    | undefined;
+  onGestureHandlerReanimatedStateChange?:
+    | DirectEventHandler<GestureHandlerStateChangeEvent>
+    | undefined;
+  onGestureHandlerReanimatedTouchEvent?:
+    | DirectEventHandler<GestureHandlerTouchEvent>
+    | undefined;
+  onGestureHandlerAnimatedEvent?:
+    | DirectEventHandler<GestureHandlerEvent>
+    | undefined;
 
   handlerTags: Int32[];
   moduleId: Int32;

package/src/specs/RNGestureHandlerRootViewNativeComponent.ts

@@ -1,6 +1,6 @@
-import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
-import type { Int32 } from 'react-native/Libraries/Types/CodegenTypes';
 import type { ViewProps } from 'react-native';
+import type { Int32 } from 'react-native/Libraries/Types/CodegenTypes';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
 
 // Publicly accessible type, moduleId is set internally
 export interface RootViewNativeProps extends ViewProps {

package/src/useIsScreenReaderEnabled.ts

@@ -0,0 +1,31 @@
+import { useEffect, useState } from 'react';
+import { AccessibilityInfo } from 'react-native';
+
+export function useIsScreenReaderEnabled() {
+  const [isEnabled, setIsEnabled] = useState(false);
+
+  useEffect(() => {
+    const checkStatus = async () => {
+      try {
+        const res = await AccessibilityInfo.isScreenReaderEnabled();
+        setIsEnabled(res);
+      } catch (error) {
+        console.warn('Could not read accessibility info: defaulting to false');
+      }
+    };
+
+    checkStatus();
+
+    const listener = AccessibilityInfo.addEventListener(
+      'screenReaderChanged',
+      (enabled) => {
+        setIsEnabled(enabled);
+      }
+    );
+
+    return () => {
+      listener.remove();
+    };
+  }, []);
+  return isEnabled;
+}

package/src/v3/NativeProxy.ts

@@ -1,6 +1,6 @@
 import { scheduleOperationToBeFlushed } from '../handlers/utils';
 import RNGestureHandlerModule from '../RNGestureHandlerModule';
-import {
+import type {
   BaseGestureConfig,
   GestureRelations,
   SingleGestureName,
@@ -22,9 +22,13 @@ export const NativeProxy = {
       config || {}
     );
   },
-  setGestureHandlerConfig: <THandlerData, TConfig>(
+  setGestureHandlerConfig: <
+    TConfig,
+    THandlerData,
+    TExtendedHandlerData extends THandlerData,
+  >(
     handlerTag: number,
-    newConfig: BaseGestureConfig<THandlerData, TConfig>
+    newConfig: BaseGestureConfig<TConfig, THandlerData, TExtendedHandlerData>
   ) => {
     scheduleOperationToBeFlushed(() => {
       RNGestureHandlerModule.setGestureHandlerConfig(handlerTag, newConfig);
@@ -33,9 +37,13 @@ export const NativeProxy = {
   // updateGestureHandlerConfig can be called on the UI thread when using
   // SharedValue binding. Therefore, it needs to be a worklet and we flush
   // immediately since we're likely already on the UI thread.
-  updateGestureHandlerConfig: <THandlerData, TConfig>(
+  updateGestureHandlerConfig: <
+    TConfig,
+    THandlerData,
+    TExtendedHandlerData extends THandlerData,
+  >(
     handlerTag: number,
-    newConfig: BaseGestureConfig<THandlerData, TConfig>
+    newConfig: BaseGestureConfig<TConfig, THandlerData, TExtendedHandlerData>
   ) => {
     'worklet';
     updateGestureHandlerConfig(handlerTag, newConfig);

package/src/v3/NativeProxy.web.ts

@@ -1,5 +1,5 @@
 import RNGestureHandlerModule from '../RNGestureHandlerModule';
-import {
+import type {
   BaseGestureConfig,
   GestureRelations,
   SingleGestureName,
@@ -17,15 +17,23 @@ export const NativeProxy = {
       config || {}
     );
   },
-  setGestureHandlerConfig: <THandlerData, TConfig>(
+  setGestureHandlerConfig: <
+    TConfig,
+    THandlerData,
+    TExtendedHandlerData extends THandlerData,
+  >(
     handlerTag: number,
-    newConfig: BaseGestureConfig<THandlerData, TConfig>
+    newConfig: BaseGestureConfig<TConfig, THandlerData, TExtendedHandlerData>
   ) => {
     RNGestureHandlerModule.setGestureHandlerConfig(handlerTag, newConfig);
   },
-  updateGestureHandlerConfig: <THandlerData, TConfig>(
+  updateGestureHandlerConfig: <
+    TConfig,
+    THandlerData,
+    TExtendedHandlerData extends THandlerData,
+  >(
     handlerTag: number,
-    newConfig: BaseGestureConfig<THandlerData, TConfig>
+    newConfig: BaseGestureConfig<TConfig, THandlerData, TExtendedHandlerData>
   ) => {
     RNGestureHandlerModule.updateGestureHandlerConfig(handlerTag, newConfig);
   },

package/src/v3/components/GestureButtons.tsx

@@ -1,23 +1,34 @@
 import React, { useRef } from 'react';
-import { Platform, StyleSheet, Animated } from 'react-native';
-import createNativeWrapper from '../createNativeWrapper';
+import { Animated, Platform, StyleSheet } from 'react-native';
+
 import GestureHandlerButton from '../../components/GestureHandlerButton';
+import createNativeWrapper from '../createNativeWrapper';
+import type { NativeHandlerData } from '../hooks/gestures/native/NativeTypes';
+import type { GestureEndEvent, GestureEvent } from '../types';
 import type {
   BaseButtonProps,
   BorderlessButtonProps,
+  RawButtonProps,
   RectButtonProps,
 } from './GestureButtonsProps';
 
-import type { GestureEvent } from '../types';
-import type { NativeViewHandlerData } from '../hooks/gestures/native/useNativeGesture';
-
-type CallbackEventType = GestureEvent<NativeViewHandlerData>;
+type CallbackEventType = GestureEvent<NativeHandlerData>;
+type EndCallbackEventType = GestureEndEvent<NativeHandlerData>;
 
-export const RawButton = createNativeWrapper(GestureHandlerButton, {
+/**
+ * @deprecated `RawButton` is deprecated, use `Clickable` instead
+ */
+export const RawButton = createNativeWrapper<
+  React.ComponentRef<typeof GestureHandlerButton>,
+  RawButtonProps
+>(GestureHandlerButton, {
   shouldCancelWhenOutside: false,
   shouldActivateOnStart: false,
 });
 
+/**
+ * @deprecated `BaseButton` is deprecated, use `Touchable` instead
+ */
 export const BaseButton = (props: BaseButtonProps) => {
   const longPressDetected = useRef(false);
   const longPressTimeout = useRef<ReturnType<typeof setTimeout> | undefined>(
@@ -34,43 +45,46 @@ export const BaseButton = (props: BaseButtonProps) => {
   };
 
   const onBegin = (e: CallbackEventType) => {
-    if (Platform.OS === 'android' && e.pointerInside) {
-      longPressDetected.current = false;
-      if (onLongPress) {
-        longPressTimeout.current = setTimeout(wrappedLongPress, delayLongPress);
-      }
+    if (!e.pointerInside) {
+      return;
     }
-  };
 
-  const onActivate = (e: CallbackEventType) => {
     onActiveStateChange?.(true);
 
-    if (Platform.OS !== 'android' && e.pointerInside) {
-      longPressDetected.current = false;
-      if (onLongPress) {
-        longPressTimeout.current = setTimeout(wrappedLongPress, delayLongPress);
-      }
+    longPressDetected.current = false;
+    if (onLongPress) {
+      longPressTimeout.current = setTimeout(wrappedLongPress, delayLongPress);
     }
 
+    props.onBegin?.(e);
+  };
+
+  const onActivate = (e: CallbackEventType) => {
     if (!e.pointerInside && longPressTimeout.current !== undefined) {
       clearTimeout(longPressTimeout.current);
       longPressTimeout.current = undefined;
     }
+
+    props.onActivate?.(e);
+  };
+
+  const onDeactivate = (e: EndCallbackEventType) => {
+    props.onDeactivate?.(e);
   };
 
-  const onDeactivate = (e: CallbackEventType, success: boolean) => {
+  const onFinalize = (e: EndCallbackEventType) => {
     onActiveStateChange?.(false);
 
-    if (success && !longPressDetected.current) {
+    if (!e.canceled && !longPressDetected.current) {
       onPress?.(e.pointerInside);
     }
-  };
 
-  const onFinalize = (_e: CallbackEventType) => {
     if (longPressTimeout.current !== undefined) {
       clearTimeout(longPressTimeout.current);
       longPressTimeout.current = undefined;
     }
+
+    props.onFinalize?.(e);
   };
 
   return (
@@ -97,9 +111,17 @@ const btnStyles = StyleSheet.create({
   },
 });
 
+/**
+ * @deprecated `RectButton` is deprecated, use `Touchable` with `activeUnderlayOpacity={0.7}` instead
+ */
 export const RectButton = (props: RectButtonProps) => {
-  const activeOpacity = props.activeOpacity ?? 0.105;
-  const underlayColor = props.underlayColor ?? 'black';
+  const {
+    children,
+    style,
+    activeOpacity = 0.105,
+    underlayColor = 'black',
+    ...rest
+  } = props;
 
   const opacity = useRef(new Animated.Value(0)).current;
 
@@ -111,8 +133,6 @@ export const RectButton = (props: RectButtonProps) => {
     props.onActiveStateChange?.(active);
   };
 
-  const { children, style, ...rest } = props;
-
   const resolvedStyle = StyleSheet.flatten(style ?? {});
 
   return (
@@ -139,6 +159,9 @@ export const RectButton = (props: RectButtonProps) => {
   );
 };
 
+/**
+ * @deprecated `BorderlessButton` is deprecated, use `Touchable` with `activeOpacity={0.3}` instead
+ */
 export const BorderlessButton = (props: BorderlessButtonProps) => {
   const activeOpacity = props.activeOpacity ?? 0.3;
   const opacity = useRef(new Animated.Value(1)).current;
@@ -151,11 +174,12 @@ export const BorderlessButton = (props: BorderlessButtonProps) => {
     props.onActiveStateChange?.(active);
   };
 
-  const { children, style, ...rest } = props;
+  const { children, style, ref, ...rest } = props;
 
   return (
     <AnimatedBaseButton
       {...rest}
+      ref={ref ?? null}
       onActiveStateChange={onActiveStateChange}
       style={[style, Platform.OS === 'ios' && { opacity }]}>
       {children}

package/src/v3/components/GestureButtonsProps.ts

@@ -1,155 +1,83 @@
-import * as React from 'react';
-import {
-  AccessibilityProps,
-  ColorValue,
-  LayoutChangeEvent,
-  StyleProp,
-  ViewStyle,
-} from 'react-native';
-import type { NativeViewGestureHandlerProps } from '../../handlers/NativeViewGestureHandler';
+import type { StyleProp, ViewStyle } from 'react-native';
 
-export interface RawButtonProps
-  extends NativeViewGestureHandlerProps,
-    AccessibilityProps {
-  /**
-   * Defines if more than one button could be pressed simultaneously. By default
-   * set true.
-   */
-  exclusive?: boolean;
-  // TODO: we should transform props in `createNativeWrapper`
-  /**
-   * Android only.
-   *
-   * Defines color of native ripple animation used since API level 21.
-   */
-  rippleColor?: number | ColorValue | null;
-
-  /**
-   * Android only.
-   *
-   * Defines radius of native ripple animation used since API level 21.
-   */
-  rippleRadius?: number | null;
-
-  /**
-   * Android only.
-   *
-   * Set this to true if you want the ripple animation to render outside the view bounds.
-   */
-  borderless?: boolean;
-
-  /**
-   * Android only.
-   *
-   * Defines whether the ripple animation should be drawn on the foreground of the view.
-   */
-  foreground?: boolean;
-
-  /**
-   * Android only.
-   *
-   * Set this to true if you don't want the system to play sound when the button is pressed.
-   */
-  touchSoundDisabled?: boolean;
-
-  /**
-   * Style object, use it to set additional styles.
-   */
-  style?: StyleProp<ViewStyle>;
-
-  /**
-   * Invoked on mount and layout changes.
-   */
-  onLayout?: (event: LayoutChangeEvent) => void;
-
-  /**
-   * Used for testing-library compatibility, not passed to the native component.
-   * @deprecated test-only props are deprecated and will be removed in the future.
-   */
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  testOnly_onPress?: Function | null;
-
-  /**
-   * Used for testing-library compatibility, not passed to the native component.
-   * @deprecated test-only props are deprecated and will be removed in the future.
-   */
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  testOnly_onPressIn?: Function | null;
-
-  /**
-   * Used for testing-library compatibility, not passed to the native component.
-   * @deprecated test-only props are deprecated and will be removed in the future.
-   */
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  testOnly_onPressOut?: Function | null;
-
-  /**
-   * Used for testing-library compatibility, not passed to the native component.
-   * @deprecated test-only props are deprecated and will be removed in the future.
-   */
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  testOnly_onLongPress?: Function | null;
-}
-interface ButtonWithRefProps {
-  ref?: React.RefObject<any>;
-}
+import type GestureHandlerButton from '../../components/GestureHandlerButton';
+import type { ButtonProps } from '../../components/GestureHandlerButton';
+import type { NativeWrapperProperties } from '../types/NativeWrapperType';
 
+/**
+ * @deprecated `RawButtonProps` is deprecated, use `ClickableProps` instead
+ */
+export interface RawButtonProps
+  extends Omit<
+      ButtonProps,
+      | 'defaultOpacity'
+      | 'defaultScale'
+      | 'defaultUnderlayOpacity'
+      | 'activeOpacity'
+      | 'activeScale'
+      | 'activeUnderlayOpacity'
+    >,
+    Omit<
+      NativeWrapperProperties<React.ComponentRef<typeof GestureHandlerButton>>,
+      'hitSlop' | 'enabled'
+    > {}
+
+/**
+ * @deprecated `BaseButtonProps` is deprecated, use `ClickableProps` instead
+ */
 export interface BaseButtonProps extends RawButtonProps {
   /**
    * Called when the button gets pressed (analogous to `onPress` in
    * `TouchableHighlight` from RN core).
    */
-  onPress?: (pointerInside: boolean) => void;
+  onPress?: ((pointerInside: boolean) => void) | undefined;
 
   /**
    * Called when the button gets pressed and is held for `delayLongPress`
    * milliseconds.
    */
-  onLongPress?: () => void;
+  onLongPress?: (() => void) | undefined;
 
   /**
    * Called when button changes from inactive to active and vice versa. It
    * passes active state as a boolean variable as a first parameter for that
    * method.
    */
-  onActiveStateChange?: (active: boolean) => void;
+  onActiveStateChange?: ((active: boolean) => void) | undefined;
   style?: StyleProp<ViewStyle>;
 
   /**
    * Delay, in milliseconds, after which the `onLongPress` callback gets called.
    * Defaults to 600.
    */
-  delayLongPress?: number;
+  delayLongPress?: number | undefined;
 }
-export interface BaseButtonWithRefProps
-  extends BaseButtonProps,
-    ButtonWithRefProps {}
 
+/**
+ * @deprecated `RectButtonProps` is deprecated, use `ClickableProps` instead
+ */
 export interface RectButtonProps extends BaseButtonProps {
   /**
    * Background color that will be dimmed when button is in active state.
    */
-  underlayColor?: string;
+  underlayColor?: string | undefined;
 
   /**
    * iOS only.
    *
    * Opacity applied to the underlay when button is in active state.
    */
-  activeOpacity?: number;
+  activeOpacity?: number | undefined;
 }
-export interface RectButtonWithRefProps
-  extends RectButtonProps,
-    ButtonWithRefProps {}
 
+/**
+ * @deprecated `BorderlessButtonProps` is deprecated, use `ClickableProps` instead
+ */
 export interface BorderlessButtonProps extends BaseButtonProps {
   /**
    * iOS only.
    *
    * Opacity applied to the button when it is in an active state.
    */
-  activeOpacity?: number;
+  activeOpacity?: number | undefined;
 }
-export interface BorderlessButtonWithRefProps
-  extends BorderlessButtonProps,
-    ButtonWithRefProps {}

package/src/v3/components/GestureComponents.tsx

@@ -1,30 +1,31 @@
-import React, {
-  PropsWithChildren,
-  ReactElement,
-  useState,
-  RefObject,
-} from 'react';
-import {
-  ScrollView as RNScrollView,
+import type { PropsWithChildren, ReactElement } from 'react';
+import React, { useState } from 'react';
+import type {
+  FlatListProps as RNFlatListProps,
+  RefreshControlProps as RNRefreshControlProps,
   ScrollViewProps as RNScrollViewProps,
-  Switch as RNSwitch,
   SwitchProps as RNSwitchProps,
-  TextInput as RNTextInput,
   TextInputProps as RNTextInputProps,
+} from 'react-native';
+import {
   FlatList as RNFlatList,
-  FlatListProps as RNFlatListProps,
   RefreshControl as RNRefreshControl,
+  ScrollView as RNScrollView,
+  Switch as RNSwitch,
+  TextInput as RNTextInput,
 } from 'react-native';
 
+import { ghQueueMicrotask } from '../../ghQueueMicrotask';
 import createNativeWrapper from '../createNativeWrapper';
-
-import { NativeWrapperProperties } from '../types/NativeWrapperType';
-import { NativeWrapperProps } from '../hooks/utils';
 import { GestureDetectorType } from '../detectors';
-import { NativeGesture } from '../hooks/gestures/native/useNativeGesture';
-import { ghQueueMicrotask } from '../../ghQueueMicrotask';
+import type { NativeGesture } from '../hooks/gestures/native/NativeTypes';
+import { NativeWrapperProps } from '../hooks/utils';
+import type { NativeWrapperProperties } from '../types/NativeWrapperType';
 
-export const RefreshControl = createNativeWrapper(
+export const RefreshControl = createNativeWrapper<
+  RNRefreshControl,
+  RNRefreshControlProps
+>(
   RNRefreshControl,
   {
     disallowInterruption: true,
@@ -36,7 +37,10 @@ export const RefreshControl = createNativeWrapper(
 // eslint-disable-next-line @typescript-eslint/no-redeclare
 export type RefreshControl = typeof RefreshControl & RNRefreshControl;
 
-const GHScrollView = createNativeWrapper<PropsWithChildren<RNScrollViewProps>>(
+const GHScrollView = createNativeWrapper<
+  RNScrollView,
+  PropsWithChildren<RNScrollViewProps>
+>(
   RNScrollView,
   {
     disallowInterruption: true,
@@ -46,13 +50,7 @@ const GHScrollView = createNativeWrapper<PropsWithChildren<RNScrollViewProps>>(
 );
 
 export const ScrollView = (
-  props: RNScrollViewProps &
-    NativeWrapperProperties & {
-      ref?: React.RefObject<RNScrollView | null>;
-      onGestureUpdate_CAN_CAUSE_INFINITE_RERENDER?: (
-        gesture: NativeGesture
-      ) => void;
-    }
+  props: RNScrollViewProps & NativeWrapperProperties<RNScrollView | null>
 ) => {
   const {
     refreshControl,
@@ -95,7 +93,7 @@ export const ScrollView = (
 // eslint-disable-next-line @typescript-eslint/no-redeclare
 export type ScrollView = typeof ScrollView & RNScrollView;
 
-export const Switch = createNativeWrapper<RNSwitchProps>(RNSwitch, {
+export const Switch = createNativeWrapper<RNSwitch, RNSwitchProps>(RNSwitch, {
   shouldCancelWhenOutside: false,
   shouldActivateOnStart: true,
   disallowInterruption: true,
@@ -104,7 +102,9 @@ export const Switch = createNativeWrapper<RNSwitchProps>(RNSwitch, {
 // eslint-disable-next-line @typescript-eslint/no-redeclare
 export type Switch = typeof Switch & RNSwitch;
 
-export const TextInput = createNativeWrapper<RNTextInputProps>(RNTextInput);
+export const TextInput = createNativeWrapper<RNTextInput, RNTextInputProps>(
+  RNTextInput
+);
 
 // eslint-disable-next-line @typescript-eslint/no-redeclare
 export type TextInput = typeof TextInput & RNTextInput;
@@ -175,14 +175,9 @@ export const FlatList = ((props) => {
 }) as <ItemT = any>(
   props: PropsWithChildren<
     Omit<RNFlatListProps<ItemT>, 'renderScrollComponent' | 'ref'> &
-      NativeWrapperProperties & {
-        ref?: RefObject<RNFlatList<ItemT> | null>;
-        onGestureUpdate_CAN_CAUSE_INFINITE_RERENDER?: (
-          gesture: NativeGesture
-        ) => void;
-      }
+      NativeWrapperProperties<RNFlatList<ItemT> | null>
   >
 ) => ReactElement | null;
 
 // eslint-disable-next-line @typescript-eslint/no-redeclare
-export type FlatList = typeof FlatList & RNFlatList;
+export type FlatList<ItemT = any> = typeof FlatList & RNFlatList<ItemT>;

package/src/v3/components/GestureComponents.web.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
+import type { FlatListProps } from 'react-native';
 import {
   FlatList as RNFlatList,
+  ScrollView as RNScrollView,
   Switch as RNSwitch,
   TextInput as RNTextInput,
-  ScrollView as RNScrollView,
-  FlatListProps,
   View,
 } from 'react-native';
 
@@ -32,12 +32,9 @@ export const DrawerLayoutAndroid = () => {
 // on functional components
 export const RefreshControl = createNativeWrapper(View);
 
-export const FlatList = React.forwardRef(
-  <ItemT,>(props: FlatListProps<ItemT>, ref: any) => (
-    <RNFlatList
-      ref={ref}
-      {...props}
-      renderScrollComponent={(scrollProps) => <ScrollView {...scrollProps} />}
-    />
-  )
+export const FlatList = <ItemT,>(props: FlatListProps<ItemT>) => (
+  <RNFlatList
+    {...props}
+    renderScrollComponent={(scrollProps) => <ScrollView {...scrollProps} />}
+  />
 );