@amazon-devices/vega-carousel 0.1.3

package/dist/CarouselScrollable/CarouselSimple.d.ts

@@ -0,0 +1,71 @@
+import React from 'react';
+import { CarouselScrollableRef } from './CarouselScrollableRef';
+import { CarouselSimpleProps } from './CarouselSimpleProps';
+/**
+ * Type alias for a `CarouselScrollable` reference, since both versions of the list
+ * should support the same user API.
+ *
+ * @see {@link CarouselScrollableRef}
+ */
+export type CarouselSimpleRef = CarouselScrollableRef;
+/**
+ * The internal implementation of the {@link CarouselSimple} component.
+ *
+ * This implementation basically wraps a {@link CarouselScrollable} component for using
+ * it with a simple array of `ItemT` items.
+ *
+ * @see {@link CarouselSimple}
+ * @see {@link CarouselScrollable}
+ * @see {@link CarouselScrollableRef}
+ */
+declare function CarouselSimpleInner<ItemT, KeyT = React.Key>(props: CarouselSimpleProps<ItemT, KeyT>, ref?: React.Ref<CarouselSimpleRef>): React.JSX.Element;
+/**
+ * `CarouselSimple` is a wrapper around the {@link CarouselScrollable} component that
+ * focuses on simplicity over control.
+ *
+ * The goal of `CarouselSimple` is to define some opinionated and simple
+ * defaults for the {@link CarouselScrollable}.
+ *
+ * To start, the `CarouselSimple` requires a mandatory array of items
+ * (`ItemT[]`), and it will use it as a static data provider.
+ *
+ * You can certainly update the items in this component and achieve most of the
+ * behavior from {@link CarouselScrollable}, but if you realize that you're having to
+ * write a significant amount of code to do so, consider using {@link CarouselScrollable}
+ * directly.
+ *
+ * The next significant default used by `CarouselSimple`, is how it handles
+ * item's unique identifiers (or _keys_).
+ *
+ * By default, it will be a number equal to the item's index in the data array,
+ * but you can customize it to some special behavior that would give the
+ * component the stable IDs it needs.
+ *
+ * @example
+ * The following snippet represents the `CarouselSimple` usage in its basic
+ * form:
+ * ```tsx
+ * function MyComponent(dataArray: MyDataItem[]) {
+ *   const renderItem = React.useCallback(
+ *     (item: MyDataItem) => <View>{item.render()}</View>
+ *     []
+ *   )
+ *   return (
+ *     <CarouselSimple
+ *       data={dataArray}
+ *       renderItem={renderItem} />
+ *   )
+ * }
+ * ```
+ *
+ * If you need to use a different type of _key_ with the component, make sure
+ * you provide the proper implementation of the `getItemKey` function.
+ *
+ * For details on those, check their documentation.
+ *
+ * @see {@link CarouselSimpleInner}
+ * @see {@link CarouselSimpleProps}
+ * @see {@link CarouselSimpleRef}
+ */
+export declare const CarouselSimple: <ItemT, KeyT = string>(props: CarouselSimpleProps<ItemT, KeyT>, ref?: React.Ref<CarouselSimpleRef>) => React.JSX.Element;
+export {};

package/dist/CarouselScrollable/CarouselSimple.js

@@ -0,0 +1,111 @@
+"use strict";
+/*
+ * Copyright (c) 2024 - 2025 Amazon.com, Inc. or its affiliates. All rights reserved.
+ *
+ * PROPRIETARY/CONFIDENTIAL. USE IS SUBJECT TO LICENSE TERMS.
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CarouselSimple = void 0;
+const react_1 = __importDefault(require("react"));
+const CarouselScrollable_1 = require("./CarouselScrollable");
+/**
+ * The internal implementation of the {@link CarouselSimple} component.
+ *
+ * This implementation basically wraps a {@link CarouselScrollable} component for using
+ * it with a simple array of `ItemT` items.
+ *
+ * @see {@link CarouselSimple}
+ * @see {@link CarouselScrollable}
+ * @see {@link CarouselScrollableRef}
+ */
+function CarouselSimpleInner(props, ref) {
+    const { data, getItemKey: getItemKeyProp } = props;
+    const hostRef = react_1.default.useRef(null);
+    react_1.default.useImperativeHandle(ref, () => {
+        // noinspection JSUnusedGlobalSymbols
+        return {
+            enableInputEvents(enable) {
+                if (hostRef.current) {
+                    hostRef.current.enableInputEvents(enable);
+                }
+            },
+            reset() {
+                if (hostRef.current) {
+                    hostRef.current.reset();
+                }
+            },
+            setSelectedItem(index, animated) {
+                if (hostRef.current) {
+                    hostRef.current.setSelectedItem(index, animated);
+                }
+            },
+            setOverflowItemsVisible(visible, animated) {
+                if (hostRef.current) {
+                    hostRef.current.setOverflowItemsVisible(visible, animated === true);
+                }
+            },
+            notifyDataChange(changes, animated) {
+                if (hostRef.current) {
+                    hostRef.current.notifyDataChange(changes, animated === true);
+                }
+            },
+        };
+    });
+    const getItem = react_1.default.useCallback((index) => data[index], [data]);
+    const getItemCount = react_1.default.useCallback(() => data.length, [data]);
+    const getItemKey = react_1.default.useCallback((item, index) => getItemKeyProp?.(item, index) ?? index, [getItemKeyProp]);
+    const notifyDataError = react_1.default.useCallback(() => false, []);
+    return (react_1.default.createElement(CarouselScrollable_1.CarouselScrollable, { ...props, getItem: getItem, getItemCount: getItemCount, getItemKey: getItemKey, notifyDataError: notifyDataError, ref: hostRef }));
+}
+/**
+ * `CarouselSimple` is a wrapper around the {@link CarouselScrollable} component that
+ * focuses on simplicity over control.
+ *
+ * The goal of `CarouselSimple` is to define some opinionated and simple
+ * defaults for the {@link CarouselScrollable}.
+ *
+ * To start, the `CarouselSimple` requires a mandatory array of items
+ * (`ItemT[]`), and it will use it as a static data provider.
+ *
+ * You can certainly update the items in this component and achieve most of the
+ * behavior from {@link CarouselScrollable}, but if you realize that you're having to
+ * write a significant amount of code to do so, consider using {@link CarouselScrollable}
+ * directly.
+ *
+ * The next significant default used by `CarouselSimple`, is how it handles
+ * item's unique identifiers (or _keys_).
+ *
+ * By default, it will be a number equal to the item's index in the data array,
+ * but you can customize it to some special behavior that would give the
+ * component the stable IDs it needs.
+ *
+ * @example
+ * The following snippet represents the `CarouselSimple` usage in its basic
+ * form:
+ * ```tsx
+ * function MyComponent(dataArray: MyDataItem[]) {
+ *   const renderItem = React.useCallback(
+ *     (item: MyDataItem) => <View>{item.render()}</View>
+ *     []
+ *   )
+ *   return (
+ *     <CarouselSimple
+ *       data={dataArray}
+ *       renderItem={renderItem} />
+ *   )
+ * }
+ * ```
+ *
+ * If you need to use a different type of _key_ with the component, make sure
+ * you provide the proper implementation of the `getItemKey` function.
+ *
+ * For details on those, check their documentation.
+ *
+ * @see {@link CarouselSimpleInner}
+ * @see {@link CarouselSimpleProps}
+ * @see {@link CarouselSimpleRef}
+ */
+exports.CarouselSimple = react_1.default.forwardRef(CarouselSimpleInner);

package/dist/CarouselScrollable/CarouselSimpleProps.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { CarouselScrollableProps } from './CarouselScrollableProps';
+import { GetItemKeyFunc } from '../CarouselData';
+/**
+ * Configurable properties of a {@link CarouselSimple}.
+ *
+ * Any change in the attributes of this interface will result in a visual or
+ * behavioral change of the affected list.
+ *
+ * These properties are a subset of the `CarouselScrollableProps` that allow us to
+ * have the minimal number of mandatory properties for the user.
+ *
+ * @template ItemT The type of data items the list will use to render its items.
+ * @template KeyT The type used as items unique identifiers (also called _keys_,
+ *           or _stable IDs_) in the list;
+ *
+ * @see {@link CarouselSimple}
+ */
+export interface CarouselSimpleProps<ItemT, KeyT = React.Key> extends Omit<CarouselScrollableProps<ItemT, KeyT>, 'getItem' | 'getItemKey' | 'notifyDataError' | 'registerDataObserver' | 'dataAdapter'> {
+    data: Array<ItemT>;
+    /**
+     * Optional function that takes an item and its index, and returns its key.
+     *
+     * @function
+     * @default (item: ItemT, index: number) => index as KeyT
+     * @see {@link GetItemKeyFunc}
+     */
+    getItemKey?: GetItemKeyFunc<ItemT, KeyT>;
+}

package/dist/CarouselScrollable/CarouselSimpleProps.js

@@ -0,0 +1,7 @@
+"use strict";
+/*
+ * Copyright (c) 2024 - 2025 Amazon.com, Inc. or its affiliates. All rights reserved.
+ *
+ * PROPRIETARY/CONFIDENTIAL. USE IS SUBJECT TO LICENSE TERMS.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/CarouselScrollable/index.d.ts

@@ -0,0 +1,6 @@
+export * from './CarouselScrollableTypes';
+export * from './CarouselScrollableProps';
+export * from './CarouselScrollableRef';
+export * from './CarouselScrollable';
+export * from './CarouselSimple';
+export * from './CarouselSimpleProps';

package/dist/CarouselScrollable/index.js

@@ -0,0 +1,27 @@
+"use strict";
+/*
+ * Copyright (c) 2024 - 2025 Amazon.com, Inc. or its affiliates. All rights reserved.
+ *
+ * PROPRIETARY/CONFIDENTIAL. USE IS SUBJECT TO LICENSE TERMS.
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./CarouselScrollableTypes"), exports);
+__exportStar(require("./CarouselScrollableProps"), exports);
+__exportStar(require("./CarouselScrollableRef"), exports);
+__exportStar(require("./CarouselScrollable"), exports);
+__exportStar(require("./CarouselSimple"), exports);
+__exportStar(require("./CarouselSimpleProps"), exports);

package/dist/CarouselScrollable/native/CarouselNativeHostComponent.d.ts

@@ -0,0 +1,109 @@
+import type { HostComponent, ViewProps, NativeSyntheticEvent } from 'react-native';
+import { CarouselDataChange } from '../../CarouselData';
+import { CarouselScrollableConfigProps, CarouselScrollableInfoProps } from '../CarouselScrollableProps';
+/**
+ * Type representing a native "Selection Changed" event that is emitted from the
+ * native layer.
+ */
+export type CarouselNativeHostComponentInternalSelectionChangedEvent = {
+    /**
+     * The current index of the first item mounted on the native {@link CarouselScrollable}
+     * component.
+     */
+    renderFirstIndex: number;
+    /**
+     * The current index of the last item mounted on the native {@link CarouselScrollable}
+     * component.
+     */
+    renderLastIndex: number;
+    /**
+     * The data index for the item that just got selected in the native layer.
+     */
+    selectedIndex: number;
+};
+/**
+ * The "selection changed" event emitted by the native layer.
+ *
+ * Check the internal type documentation
+ * ({@link CarouselNativeHostComponentInternalSelectionChangedEvent}) for
+ * details.
+ *
+ * @see {@link CarouselNativeHostComponentInternalSelectionChangedEvent}
+ */
+export type CarouselNativeHostComponentSelectionChangedEvent = NativeSyntheticEvent<CarouselNativeHostComponentInternalSelectionChangedEvent>;
+/**
+ * This type represents the native "Selection Change" event callback function
+ * the framework call when it receives the "Selection Change" event from the
+ * native layer.
+ *
+ * @param {CarouselNativeHostComponentSelectionChangedEvent} nativeEvent The
+ *        framework native component event that wraps our "Selection Change"
+ *        event before delivering it to the callback function.
+ *
+ * @see {@link CarouselNativeHostComponentSelectionChangedEvent}
+ */
+export type OnCarouselNativeHostComponentSelectionChangedCallback = (nativeEvent: CarouselNativeHostComponentSelectionChangedEvent) => void;
+/**
+ * This type represents all values that can be passed to the native component on
+ * a JSX declaration.
+ *
+ * Note, though, that these properties will not all be passed down to the native
+ * layer. Only properties with `true` values from the `validAttributes` object,
+ * passed to the {@link registerGeneratedViewConfig} will be attempted to be
+ * passed down. React Native might still decide to not forward a property if it
+ * uses some of the reserved names (e.g.; "id").
+ *
+ * @see {@link ViewProps}
+ * @see {@link CarouselScrollableConfigProps}
+ */
+export type CarouselNativeHostComponentProps = Omit<ViewProps, 'id'> & CarouselScrollableInfoProps & Omit<CarouselScrollableConfigProps, 'focusedItemScaleFactor' | 'shiftItemsOnSelection' | 'scaleOnPress'> & {
+    relativeInitialStartIndex: number;
+    dataStartIndex: number;
+    dataLimitIndex: number;
+    scaleItemOnPress: boolean;
+    scaleItemOnSelection: boolean;
+    shiftItemsOnSelection: boolean;
+    /**
+     * Callback function called whenever the Native Component emits the
+     * `selectionChanged` event.
+     *
+     * @see {@link OnCarouselNativeHostComponentSelectionChangedCallback}
+     *
+     */
+    onSelectionChanged: OnCarouselNativeHostComponentSelectionChangedCallback;
+};
+/**
+ * Helper constant to be used as the JSX component for the Native List Component
+ * in this package.
+ */
+export declare const CarouselNativeHostComponent: HostComponent<CarouselNativeHostComponentProps>;
+/**
+ * Contract type for the Native Component accepted commands.
+ *
+ * For details on what each function her do, check the {@link CarouselScrollableRef}
+ * documentation.
+ *
+ * @see {@link CarouselNativeHostComponentCommandsDefaults}
+ * @see {@link CarouselScrollableRef}
+ */
+export type CarouselNativeHostComponentCommandsContract = {
+    enableInputEvents: (hostComponent: HostComponent<CarouselNativeHostComponentProps>, enable: boolean) => void;
+    setSelectedItem: (hostComponent: HostComponent<CarouselNativeHostComponentProps>, index: number, animated: boolean) => void;
+    setOverflowItemsVisible: (hostComponent: HostComponent<CarouselNativeHostComponentProps>, visible: boolean, animated?: boolean) => void;
+    notifyDataChange: (hostComponent: HostComponent<CarouselNativeHostComponentProps>, changes: Array<CarouselDataChange>, animated?: boolean) => void;
+    reset: (hostComponent: HostComponent<CarouselNativeHostComponentProps>) => void;
+};
+/**
+ * Helper constant to register the
+ * {@link CarouselNativeHostComponentCommandsContract} as native functions.
+ *
+ * This has no use during run-time, but it exists to strongly type our commands
+ * function, since any modern IDE would highlight an error if one adds or
+ * removes a function from the contract.
+ */
+export declare const CarouselNativeHostComponentCommandsDefaults: CarouselNativeHostComponentCommandsContract;
+/**
+ * This constant holds the Native Turbo Module RPC interface for the available
+ * commands on the {@link CarouselNativeHostComponent}.
+ */
+export declare const CarouselNativeHostComponentCommands: CarouselNativeHostComponentCommandsContract;

package/dist/CarouselScrollable/native/CarouselNativeHostComponent.js

@@ -0,0 +1,82 @@
+"use strict";
+/*
+ * Copyright (c) 2024 - 2025 Amazon.com, Inc. or its affiliates. All rights reserved.
+ *
+ * PROPRIETARY/CONFIDENTIAL. USE IS SUBJECT TO LICENSE TERMS.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CarouselNativeHostComponentCommands = exports.CarouselNativeHostComponentCommandsDefaults = exports.CarouselNativeHostComponent = void 0;
+const utils_1 = require("../../utils");
+/**
+ * Constant holding the Native Carousel component to be used in JSX
+ * declarations.
+ */
+const nativeComponentName = 'CarouselNative';
+const validAttributes = {
+    uniqueId: true,
+    orientation: true,
+    renderedItemsCount: true,
+    navigableScrollOffset: true,
+    itemPadding: true,
+    itemPaddingOnFocus: true,
+    initialStartIndex: true,
+    relativeInitialStartIndex: true,
+    numOffsetItems: true,
+    showSelectionBorder: true,
+    selectionBorderStyle: true,
+    selectionBorderStrategy: true,
+    trapFocusOnOrientation: true,
+    offsetNestedSelectionShift: true,
+    scaleItemOnPress: true,
+    scaleItemOnSelection: true,
+    shiftItemsOnSelection: true,
+    selectionStrategy: true,
+    pinnedFocusOffset: true,
+    hideItemsBeforeSelection: true,
+    discardLastFocus: true,
+    scaleOrigin: true,
+    shouldSelectedOverlap: true,
+    itemPressedDuration: true,
+    itemScrollDuration: true,
+    containerFocusChangeDuration: true,
+    dataStartIndex: true,
+    dataLimitIndex: true,
+    hasPreferredFocus: true,
+};
+/**
+ * Helper constant to be used as the JSX component for the Native List Component
+ * in this package.
+ */
+exports.CarouselNativeHostComponent = nativeComponentName;
+/**
+ * Helper constant to register the
+ * {@link CarouselNativeHostComponentCommandsContract} as native functions.
+ *
+ * This has no use during run-time, but it exists to strongly type our commands
+ * function, since any modern IDE would highlight an error if one adds or
+ * removes a function from the contract.
+ */
+exports.CarouselNativeHostComponentCommandsDefaults = {
+    enableInputEvents: () => { },
+    notifyDataChange: () => { },
+    setOverflowItemsVisible: () => { },
+    setSelectedItem: () => { },
+    reset: () => { },
+};
+// With our properties and component name defined, we can register it as a
+// native component on the React Native framework.
+(0, utils_1.registerGeneratedViewConfig)(nativeComponentName, {
+    uiViewClassName: nativeComponentName,
+    validAttributes,
+    directEventTypes: (0, utils_1.buildDirectEvents)({
+        selectionChanged: 'top',
+        pivotChanged: 'top',
+    }),
+});
+/**
+ * This constant holds the Native Turbo Module RPC interface for the available
+ * commands on the {@link CarouselNativeHostComponent}.
+ */
+exports.CarouselNativeHostComponentCommands = (0, utils_1.codegenNativeCommands)({
+    supportedCommands: Object.keys(exports.CarouselNativeHostComponentCommandsDefaults),
+});

package/dist/CarouselScrollable/native/CarouselNativeItemHostComponent.d.ts

@@ -0,0 +1,94 @@
+import type { HostComponent, ViewProps, NativeSyntheticEvent } from 'react-native';
+/**
+ * Type representing a native "Bind" event that is emitted from the native
+ * layer.
+ */
+export type CarouselNativeItemHostComponentInternalBindEvent = {
+    /**
+     * The target index for the bind.
+     */
+    index: number;
+};
+/**
+ * Type representing a native "Refresh" event that is emitted from the native
+ * layer.
+ */
+export type CarouselNativeItemHostComponentInternalRefreshEvent = {
+    /**
+     * Optional target index for the refresh.
+     */
+    index?: number;
+};
+/**
+ * The "Bind" event emitted by the native layer.
+ *
+ * Check the internal type documentation
+ * ({@link CarouselNativeItemHostComponentInternalBindEvent}) for details.
+ *
+ * @see {@link CarouselNativeItemHostComponentInternalBindEvent}
+ */
+export type CarouselNativeItemHostComponentBindEvent = NativeSyntheticEvent<CarouselNativeItemHostComponentInternalBindEvent>;
+/**
+ * The "Refresh" event emitted by the native layer.
+ *
+ * Check the internal type documentation
+ * ({@link CarouselNativeItemHostComponentInternalRefreshEvent}) for details.
+ *
+ * @see {@link CarouselNativeItemHostComponentInternalRefreshEvent}
+ */
+export type CarouselNativeItemHostComponentRefreshEvent = NativeSyntheticEvent<CarouselNativeItemHostComponentInternalRefreshEvent>;
+/**
+ * This type represents all values that can be passed to the native component on
+ * a JSX declaration.
+ *
+ * Note, though, that these properties will not all be passed down to the native
+ * layer. Only properties with `true` values from the `validAttributes` object,
+ * passed to the {@link registerGeneratedViewConfig} will be attempted to be
+ * passed down. React Native might still decide to not forward a property if it
+ * uses some of the reserved names (e.g.; "id").
+ *
+ * @see {@link ViewProps}
+ */
+export interface CarouselNativeItemHostComponentProps extends Omit<ViewProps, 'id'> {
+    parentId?: string;
+    /**
+     * The data index associated with this item component.
+     */
+    dataIndex?: number;
+    showSelectionBorder: boolean;
+    selectionBorderWidth: number;
+    selectionBorderRadius: number;
+    selectionBorderColor: number;
+    selectionBorderStrokeWidth: number;
+    selectionBorderStrokeRadius: number;
+    selectionBorderStrokeColor: number;
+    selectionBorderStrategy: number;
+    /**
+     * A scale multiplier to be applied to this item component when it gets
+     * activated (e.g., the user presses down the select button on the device's
+     * remote control).
+     */
+    pressedItemScaleFactor: number;
+    /**
+     * A scale multiplier to be applied to this item component when it gets
+     * selected.
+     */
+    focusedItemScaleFactor: number;
+    shiftItemsWidthScaleFactor: number;
+    shiftItemsHeightScaleFactor: number;
+    /**
+     * Callback called by the native layer whenever it needs to request this item
+     * to be bound to a different index.
+     *
+     * @param {CarouselNativeItemHostComponentBindEvent} nativeEvent The native
+     *        event object.
+     *
+     * @see {@link CarouselNativeItemHostComponentBindEvent}
+     */
+    onBind: (nativeEvent: CarouselNativeItemHostComponentBindEvent) => void;
+}
+/**
+ * Helper constant to be used as the JSX component for a Native List Component
+ * Item in this package.
+ */
+export declare const CarouselNativeItemHost: HostComponent<CarouselNativeItemHostComponentProps>;

package/dist/CarouselScrollable/native/CarouselNativeItemHostComponent.js

@@ -0,0 +1,42 @@
+"use strict";
+/*
+ * Copyright (c) 2024 - 2025 Amazon.com, Inc. or its affiliates. All rights reserved.
+ *
+ * PROPRIETARY/CONFIDENTIAL. USE IS SUBJECT TO LICENSE TERMS.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CarouselNativeItemHost = void 0;
+const utils_1 = require("../../utils");
+/**
+ * Constant holding the Native Carousel component to be used in JSX
+ * declarations.
+ */
+const nativeComponentName = 'CarouselNativeItem';
+const validAttributes = {
+    parentId: true,
+    dataIndex: true,
+    showSelectionBorder: true,
+    selectionBorderWidth: true,
+    selectionBorderRadius: true,
+    selectionBorderColor: true,
+    selectionBorderStrokeWidth: true,
+    selectionBorderStrokeRadius: true,
+    selectionBorderStrokeColor: true,
+    selectionBorderStrategy: true,
+    pressedItemScaleFactor: true,
+    focusedItemScaleFactor: true,
+    shiftItemsWidthScaleFactor: true,
+    shiftItemsHeightScaleFactor: true,
+};
+/**
+ * Helper constant to be used as the JSX component for a Native List Component
+ * Item in this package.
+ */
+exports.CarouselNativeItemHost = nativeComponentName;
+// With our properties and component name defined, we can register it as a
+// native component on the React Native framework.
+(0, utils_1.registerGeneratedViewConfig)(nativeComponentName, {
+    uiViewClassName: nativeComponentName,
+    validAttributes,
+    directEventTypes: (0, utils_1.buildDirectEvents)({ bind: 'top' }),
+});