@applicaster/zapp-react-native-ui-components 12.0.27-alpha.7708038842 → 12.0.27-rc.1

package/Components/Cell/Cell.tsx

@@ -14,10 +14,7 @@ import { BaseFocusable } from "../BaseFocusable";
 import { AccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager";
 
 type Props = {
-  item: {
-    id: string;
-    title: string;
-  };
+  item: ZappEntry;
   index: number;
   shouldScrollHorizontally: (arg1: [any]) => boolean | null | undefined;
   shouldScrollVertically: (...args: any) => boolean | null | undefined;
@@ -83,7 +80,9 @@ const touchableStyles = {
 } as const;
 
 export class CellComponent extends React.Component<Props, State> {
-  constructor(props) {
+  accessibilityManager: AccessibilityManager;
+
+  constructor(props: Props) {
     super(props);
     this.onPress = this.onPress.bind(this);
     this.onFocus = this.onFocus.bind(this);
@@ -94,11 +93,15 @@ export class CellComponent extends React.Component<Props, State> {
     this.scrollToIndex = this.scrollToIndex.bind(this);
 
     this.state = {
-      hasFocusableInside: props.CellRenderer.hasFocusableInside?.(props.item),
+      hasFocusableInside: props.CellRenderer.hasFocusableInside?.(
+        props.item as Record<string, any>
+      ),
     };
+
+    this.accessibilityManager = AccessibilityManager.getInstance();
   }
 
-  setScreenLayout(componentAnchorPointY, screenLayout) {
+  setScreenLayout(componentAnchorPointY: number, screenLayout: any) {
     if (componentAnchorPointY && screenLayout) {
       const updateLayout =
         componentAnchorPointY !== screenLayout?.componentAnchorPointY;
@@ -200,7 +203,7 @@ export class CellComponent extends React.Component<Props, State> {
     if (prevProps.item !== this.props.item) {
       this.setState({
         hasFocusableInside: this.props.CellRenderer.hasFocusableInside?.(
-          this.props.item
+          this.props.item as Record<string, any>
         ),
       });
     }
@@ -270,20 +273,21 @@ export class CellComponent extends React.Component<Props, State> {
           style={baseCellStyles}
           isFocusable={isFocusable}
           skipFocusManagerRegistration={skipFocusManagerRegistration}
+          {...this.accessibilityManager.getButtonAccessibilityProps(
+            item?.extensions?.accessibility?.label || item?.title
+          )}
         >
           {(focused, event) => {
             const isFocused = this.isCellFocused(focused);
 
             if (isFocused) {
-              const accessibilityManager = AccessibilityManager.getInstance();
-
               const accessibilityTitle =
                 item?.extensions?.accessibility?.label || item?.title || "";
 
               const accessibilityHint =
                 item?.extensions?.accessibility?.hint || "";
 
-              accessibilityManager.readText({
+              this.accessibilityManager.readText({
                 text: `${accessibilityTitle} ${accessibilityHint}`,
               });
             }

package/Components/Focusable/Focusable.tsx

@@ -121,7 +121,7 @@ class Focusable extends BaseFocusable<Props> {
   }
 
   render() {
-    const { children, style } = this.props;
+    const { children, style, ...otherProps } = this.props;
     const { focused } = this.state;
 
     const id = this.getId();
@@ -139,6 +139,7 @@ class Focusable extends BaseFocusable<Props> {
         data-testid={focusableId}
         focused-teststate={focused ? "focused" : "default"}
         style={style}
+        {...otherProps}
       >
         {children(focused, { mouse: this.mouse })}
       </div>

package/Components/River/ComponentsMap/ComponentsMap.tsx

@@ -75,6 +75,21 @@ function ComponentsMapComponent(props: Props) {
 
   const [flatListHeight, setFlatListHeight] = React.useState(null);
 
+  const {
+    isAnyLoading,
+    isAllLoaded,
+    waitForAllComponents,
+    onLoadFinished,
+    onLoadFailed,
+    shouldShowLoadingError,
+    isAnyLoaded,
+    arePreviousComponentsLoaded,
+  } = useLoadingState(feed?.entry?.length || components.length);
+
+  const theme = useTheme();
+
+  const logTimestamp = useProfilerLogging();
+
   const riverComponents = React.useMemo(() => {
     if (feed?.entry?.length < components.length) {
       return R.slice(0, feed?.entry?.length, components);
@@ -83,42 +98,55 @@ function ComponentsMapComponent(props: Props) {
     return components;
   }, [components, feed]);
 
-  const logTimestamp = useProfilerLogging();
-
-  const onLoadDone = React.useCallback(() => {
-    logTimestamp(riverId?.toString());
-  }, [logTimestamp]);
-
-  const { loadingState, onLoadFinished, onLoadFailed, shouldShowLoadingError } =
-    useLoadingState(riverComponents.length, onLoadDone);
-
-  const theme = useTheme();
-
   const renderRiverItem = React.useCallback(
     ({ item, index }) => {
-      const riverItemProps = {
-        riverId,
-        item,
-        index,
-        isScreenWrappedInContainer,
-        feed,
-        groupId,
-        onLoadFailed,
-        onLoadFinished,
-        getStaticComponentFeed,
-        isLast: isLast(index, riverComponents.length),
-        loadingState,
+      const readyToBeDisplayed = arePreviousComponentsLoaded(index);
+
+      const styles = {
+        display: !readyToBeDisplayed ? "none" : ("flex" as "none" | "flex"),
       };
 
       return (
-        <ScreenLoadingMeasurementsListItemWrapper index={index}>
-          <RiverItem {...riverItemProps} />
-        </ScreenLoadingMeasurementsListItemWrapper>
+        <View style={styles}>
+          <ScreenLoadingMeasurementsListItemWrapper index={index}>
+            <RiverItem
+              {...{
+                readyToBeDisplayed,
+                riverId,
+                item,
+                index,
+                isScreenWrappedInContainer,
+                feed,
+                groupId,
+                onLoadFailed,
+                onLoadFinished,
+                getStaticComponentFeed,
+                isLast: isLast(index, riverComponents.length),
+              }}
+            />
+          </ScreenLoadingMeasurementsListItemWrapper>
+        </View>
       );
     },
-    [feed, getStaticComponentFeed, onLoadFailed, onLoadFinished]
+    [
+      feed,
+      getStaticComponentFeed,
+      arePreviousComponentsLoaded,
+      onLoadFailed,
+      onLoadFinished,
+    ]
   );
 
+  const renderFooter = React.useCallback(() => {
+    return (
+      <RiverFooter
+        visible={isAnyLoading}
+        flatListHeight={flatListHeight}
+        isAnyLoaded={isAnyLoaded || waitForAllComponents}
+      />
+    );
+  }, [flatListHeight, isAnyLoading, isAnyLoaded]);
+
   const screenStyle = React.useMemo(
     () => ({
       paddingTop: ifEmptyUseFallback(
@@ -156,6 +184,12 @@ function ComponentsMapComponent(props: Props) {
 
   usePipesCacheReset(riverId, riverComponents);
 
+  React.useEffect(() => {
+    if (isAllLoaded) {
+      logTimestamp(riverId?.toString());
+    }
+  }, [isAllLoaded]);
+
   const refreshControl = React.useMemo(
     () =>
       pullToRefreshEnabled ? (
@@ -251,11 +285,6 @@ function ComponentsMapComponent(props: Props) {
     }
   }, []);
 
-  const contentContainerStyle = React.useMemo(
-    () => (isScreenWrappedInContainer ? {} : screenStyle),
-    [isScreenWrappedInContainer, screenStyle]
-  );
-
   if (shouldShowLoadingError) {
     return <RiverError />;
   }
@@ -267,7 +296,7 @@ function ComponentsMapComponent(props: Props) {
     <View style={styles.container}>
       <ScreenLoadingMeasurements
         riverId={riverId}
-        numberOfComponents={riverComponents.length}
+        numberOfComponents={feed?.entry?.length || components.length}
       >
         <ViewportTracker>
           <FlatList
@@ -289,13 +318,10 @@ function ComponentsMapComponent(props: Props) {
             keyExtractor={keyExtractor}
             renderItem={renderRiverItem}
             data={riverComponents}
-            contentContainerStyle={contentContainerStyle}
-            ListFooterComponent={
-              <RiverFooter
-                flatListHeight={flatListHeight}
-                loadingState={loadingState}
-              />
+            contentContainerStyle={
+              isScreenWrappedInContainer ? {} : screenStyle
             }
+            ListFooterComponent={renderFooter}
             refreshControl={refreshControl}
             onScrollBeginDrag={onScrollBeginDrag}
             onScroll={onScroll}

package/Components/River/ComponentsMap/hooks/useLoadingState.ts

@@ -1,99 +1,47 @@
 import * as React from "react";
-import { isNil, set, lensIndex, T, slice } from "ramda";
-import { BehaviorSubject } from "rxjs";
-import { useRefWithInitialValue } from "@applicaster/zapp-react-native-utils/reactHooks/state/useRefWithInitialValue";
+import * as R from "ramda";
+
+const allTrue = R.all(R.equals(true));
+const anyFalse = R.any(R.equals(false));
+const anyTrue = R.any(R.equals(true));
 
 const reducer = (state, { payload }) => {
-  if (!isNil(payload) && !state[payload]) {
-    return set(lensIndex(payload), true)(state);
+  if (!R.isNil(payload) && !state[payload]) {
+    return R.set(R.lensIndex(payload), true)(state);
   }
 
   return state;
 };
 
-type LoadingState = {
-  index: number;
-  done: boolean;
-  waitForAllComponents: boolean;
-};
-
 type Return = {
-  loadingState: BehaviorSubject<LoadingState>;
+  isAnyLoading: boolean;
+  isAllLoaded: boolean;
+  waitForAllComponents: boolean;
   onLoadFinished: (index: number) => void;
   onLoadFailed: ({ error, index }: { error: Error; index: number }) => void;
   shouldShowLoadingError: boolean;
+  isAnyLoaded: boolean;
   arePreviousComponentsLoaded: (index: number) => boolean;
 };
 
-// TODO: Take this value from Zapp configuration, when feature is added to GeneralScreen
-const SHOULD_FAIL_ON_COMPONENT_LOADING = false;
-
-const createLoadingStateObservable = () =>
-  new BehaviorSubject<LoadingState>({
-    index: -1,
-    done: false,
-    waitForAllComponents: SHOULD_FAIL_ON_COMPONENT_LOADING,
-  });
-
-export const useLoadingState = (
-  count: number,
-  onLoadDone: () => void
-): Return => {
-  const componentStateRef = React.useRef(new Array(count).fill(false));
-  const [loadingError, setLoadingError] = React.useState(null);
-
-  const loadingState = useRefWithInitialValue<BehaviorSubject<LoadingState>>(
-    createLoadingStateObservable
-  );
-
-  const arePreviousComponentsLoaded = React.useCallback((index) => {
-    if (index === 0) {
-      return true;
-    }
+type Action = { payload: { index: number } };
 
-    const componentsBefore = slice(0, index, componentStateRef.current);
-
-    return componentsBefore.every(T);
-  }, []);
+type Loaded = true;
+type Loading = false;
 
-  const dispatch = React.useCallback(({ payload }) => {
-    const newState = reducer(componentStateRef.current, { payload });
-    componentStateRef.current = newState;
-    const isDone = arePreviousComponentsLoaded(count - 1);
+type LoadingState = Array<Loaded | Loading>;
 
-    const state = loadingState.current.getValue();
-
-    // Fix: Only advance index sequentially, don't jump to highest loaded component
-    let newIndex = state.index;
-
-    if (payload === state.index + 1) {
-      // Only advance if this is the next sequential component
-      newIndex = payload;
-    } else if (payload < state.index) {
-      // If a lower index loads after higher ones, don't change the index
-      // This prevents the race condition that causes unmounting
-      newIndex = state.index;
-    }
-
-    const newLoadingState = {
-      ...state,
-      index: newIndex,
-      done: isDone,
-    };
+// TODO: Take this value from Zapp configuration, when feature is added to GeneralScreen
+const SHOULD_FAIL_ON_COMPONENT_LOADING = false;
 
-    loadingState.current.next(newLoadingState);
+export const useLoadingState = (count: number): Return => {
+  const [loadingError, setLoadingError] = React.useState(null);
 
-    if (isDone) {
-      onLoadDone();
-    }
-  }, []);
+  const [componentsState, dispatch] = React.useReducer<
+    React.Reducer<LoadingState, Action>
+  >(reducer, new Array(count).fill(false));
 
   const handleComponentLoaded = React.useCallback((index) => {
-    // Prevent duplicate loading events - if component is already loaded, ignore
-    if (componentStateRef.current[index]) {
-      return;
-    }
-
     dispatch({ payload: index });
   }, []);
 
@@ -107,26 +55,35 @@ export const useLoadingState = (
   );
 
   const handleComponentLoadErrorWhenNoNeedToFail = React.useCallback(
-    ({ index }) => handleComponentLoaded(index),
+    ({ index }) => {
+      handleComponentLoaded(index);
+    },
     []
   );
 
-  return React.useMemo(
-    () => ({
-      loadingState: loadingState.current,
-      onLoadFinished: handleComponentLoaded,
-      onLoadFailed: SHOULD_FAIL_ON_COMPONENT_LOADING
-        ? handleComponentLoadErrorWhenNeedToFail
-        : handleComponentLoadErrorWhenNoNeedToFail,
-      shouldShowLoadingError: SHOULD_FAIL_ON_COMPONENT_LOADING && loadingError,
-      arePreviousComponentsLoaded,
-    }),
-    [
-      loadingError,
-      handleComponentLoaded,
-      handleComponentLoadErrorWhenNeedToFail,
-      handleComponentLoadErrorWhenNoNeedToFail,
-      arePreviousComponentsLoaded,
-    ]
+  const arePreviousComponentsLoaded = React.useCallback(
+    (index) => {
+      if (index === 0) {
+        return true;
+      }
+
+      const componentsBefore = R.slice(0, index, componentsState);
+
+      return allTrue(componentsBefore);
+    },
+    [componentsState]
   );
+
+  return {
+    isAnyLoading: anyFalse(componentsState),
+    isAllLoaded: allTrue(componentsState),
+    onLoadFinished: handleComponentLoaded,
+    onLoadFailed: SHOULD_FAIL_ON_COMPONENT_LOADING
+      ? handleComponentLoadErrorWhenNeedToFail
+      : handleComponentLoadErrorWhenNoNeedToFail,
+    shouldShowLoadingError: SHOULD_FAIL_ON_COMPONENT_LOADING && loadingError,
+    isAnyLoaded: anyTrue(componentsState),
+    waitForAllComponents: SHOULD_FAIL_ON_COMPONENT_LOADING,
+    arePreviousComponentsLoaded,
+  };
 };

package/Components/River/RiverFooter.tsx

@@ -1,23 +1,11 @@
-import React, { useCallback } from "react";
+import React from "react";
 import { StyleSheet, View } from "react-native";
 import { Spinner } from "@applicaster/zapp-react-native-ui-components/Components/Spinner";
-import type { Subject } from "rxjs";
-import { useStateFromSubscribe } from "@applicaster/zapp-react-native-utils/reactHooks/state/useStateFromSubscribe";
-
-type LoadingState = {
-  waitForAllComponents: boolean;
-  index: number;
-  done: boolean;
-};
-
-type State = {
-  visible: boolean;
-  isAnyLoaded: boolean;
-};
 
 type Props = {
+  visible?: boolean;
   flatListHeight?: number;
-  loadingState: Subject<LoadingState>;
+  isAnyLoaded: boolean;
 };
 
 const FOOTER_COMPONENT_HEIGHT = 200;
@@ -31,35 +19,17 @@ const footerStyles = StyleSheet.create({
 });
 
 function RiverFooterComponent(props: Props) {
-  const { flatListHeight, loadingState } = props;
-
-  const { visible, isAnyLoaded } = useStateFromSubscribe<LoadingState, State>(
-    loadingState,
-    useCallback(
-      ({ index, done, waitForAllComponents }, setState) =>
-        setState(() => ({
-          visible: !done,
-          isAnyLoaded: index >= 0 || waitForAllComponents,
-        })),
-      []
-    ),
-    {
-      visible: true,
-      isAnyLoaded: false,
-    }
-  );
+  const { visible = true, flatListHeight, isAnyLoaded } = props;
 
   if (!visible) return null;
 
   return (
     <View
-      renderToHardwareTextureAndroid
-      style={[
-        footerStyles.container,
-        {
-          height: isAnyLoaded ? FOOTER_COMPONENT_HEIGHT : flatListHeight,
-        },
-      ]}
+      renderToHardwareTextureAndroid={true}
+      style={{
+        ...footerStyles.container,
+        height: isAnyLoaded ? FOOTER_COMPONENT_HEIGHT : flatListHeight,
+      }}
     >
       <Spinner size={isAnyLoaded ? "small" : "large"} />
     </View>

package/Components/River/RiverItem.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React from "react";
 import * as R from "ramda";
 
 import { applyDecorators } from "../../Decorators";
@@ -11,7 +11,6 @@ import {
 import { riverLogger } from "./logger";
 import { tvPluginsWithCellRenderer } from "../../const";
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
-import type { BehaviorSubject } from "rxjs";
 
 export type RiverItemType = {
   item: ZappUIComponent;
@@ -25,7 +24,6 @@ export type RiverItemType = {
   getStaticComponentFeed: GeneralContentScreenProps["getStaticComponentFeed"];
   readyToBeDisplayed?: boolean;
   isLast: boolean;
-  loadingState: BehaviorSubject<{ index: number }>;
 };
 
 function getFeedUrl(feed: ZappFeed, index: number) {
@@ -38,37 +36,6 @@ function getFeedUrl(feed: ZappFeed, index: number) {
   }
 }
 
-const isNextIndex = (index, readyIndex) => {
-  return readyIndex + 1 >= index;
-};
-
-/**
- * useLoadingState for RiverItemComponent
- * takes currentIndex and loadingState as arguments
- **/
-const useLoadingState = (
-  currentIndex: number,
-  loadingState: RiverItemType["loadingState"]
-) => {
-  const [readyToBeDisplayed, setReadyToBeDisplayed] = React.useState(
-    isNextIndex(currentIndex, loadingState.getValue().index)
-  );
-
-  useEffect(() => {
-    const subscription = loadingState.subscribe(({ index }) => {
-      if (isNextIndex(currentIndex, index)) {
-        setReadyToBeDisplayed(true);
-      }
-    });
-
-    return () => {
-      subscription.unsubscribe();
-    };
-  }, [currentIndex]);
-
-  return readyToBeDisplayed;
-};
-
 function RiverItemComponent(props: RiverItemType) {
   const {
     item,
@@ -80,12 +47,10 @@ function RiverItemComponent(props: RiverItemType) {
     onLoadFinished,
     onLoadFailed,
     getStaticComponentFeed,
+    readyToBeDisplayed,
     isLast,
-    loadingState,
   } = props;
 
-  const readyToBeDisplayed = useLoadingState(index, loadingState);
-
   const feedUrl = getFeedUrl(feed, index);
 
   const Component = useComponentResolver(
@@ -125,10 +90,6 @@ function RiverItemComponent(props: RiverItemType) {
     }
   }, []);
 
-  if (!readyToBeDisplayed) {
-    return null;
-  }
-
   if (Component === null || typeof Component === "undefined") {
     riverLogger.warning({
       message: `Component ${item.component_type} is null - skipping rendering`,
@@ -150,7 +111,7 @@ function RiverItemComponent(props: RiverItemType) {
       component={item}
       componentIndex={index}
       onLoadFailed={onLoadFailed}
-      onLoadFinished={() => onLoadFinished(index)}
+      onLoadFinished={() => onLoadFinished(index)} // Keeping it here to don't break the plugins.
       groupId={groupId}
       feedUrl={feedUrl}
       isLast={isLast}

package/Components/River/__tests__/__snapshots__/componentsMap.test.js.snap

@@ -17,90 +17,7 @@ exports[`componentsMap renders renders components map correctly 1`] = `
     }
   >
     <RCTScrollView
-      ListFooterComponent={
-        <Memo(RiverFooterComponent)
-          flatListHeight={null}
-          loadingState={
-            BehaviorSubject {
-              "_value": Object {
-                "done": false,
-                "index": -1,
-                "waitForAllComponents": false,
-              },
-              "closed": false,
-              "currentObservers": null,
-              "hasError": false,
-              "isStopped": false,
-              "observers": Array [
-                SafeSubscriber {
-                  "_finalizers": Array [
-                    Subscription {
-                      "_finalizers": null,
-                      "_parentage": [Circular],
-                      "closed": false,
-                      "initialTeardown": [Function],
-                    },
-                  ],
-                  "_parentage": null,
-                  "closed": false,
-                  "destination": ConsumerObserver {
-                    "partialObserver": Object {
-                      "complete": undefined,
-                      "error": undefined,
-                      "next": [Function],
-                    },
-                  },
-                  "initialTeardown": undefined,
-                  "isStopped": false,
-                },
-                SafeSubscriber {
-                  "_finalizers": Array [
-                    Subscription {
-                      "_finalizers": null,
-                      "_parentage": [Circular],
-                      "closed": false,
-                      "initialTeardown": [Function],
-                    },
-                  ],
-                  "_parentage": null,
-                  "closed": false,
-                  "destination": ConsumerObserver {
-                    "partialObserver": Object {
-                      "complete": undefined,
-                      "error": undefined,
-                      "next": [Function],
-                    },
-                  },
-                  "initialTeardown": undefined,
-                  "isStopped": false,
-                },
-                SafeSubscriber {
-                  "_finalizers": Array [
-                    Subscription {
-                      "_finalizers": null,
-                      "_parentage": [Circular],
-                      "closed": false,
-                      "initialTeardown": [Function],
-                    },
-                  ],
-                  "_parentage": null,
-                  "closed": false,
-                  "destination": ConsumerObserver {
-                    "partialObserver": Object {
-                      "complete": undefined,
-                      "error": undefined,
-                      "next": [Function],
-                    },
-                  },
-                  "initialTeardown": undefined,
-                  "isStopped": false,
-                },
-              ],
-              "thrownError": null,
-            }
-          }
-        />
-      }
+      ListFooterComponent={[Function]}
       contentContainerStyle={
         Object {
           "paddingBottom": undefined,
@@ -163,14 +80,22 @@ exports[`componentsMap renders renders components map correctly 1`] = `
           style={null}
         >
           <View
-            onLayout={[Function]}
             style={
               Object {
-                "flex": 1,
+                "display": "flex",
               }
             }
           >
-            <View />
+            <View
+              onLayout={[Function]}
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View />
+            </View>
           </View>
         </View>
         <View
@@ -178,13 +103,23 @@ exports[`componentsMap renders renders components map correctly 1`] = `
           style={null}
         >
           <View
-            onLayout={[Function]}
             style={
               Object {
-                "flex": 1,
+                "display": "none",
               }
             }
-          />
+          >
+            <View
+              onLayout={[Function]}
+              style={
+                Object {
+                  "flex": 1,
+                }
+              }
+            >
+              <View />
+            </View>
+          </View>
         </View>
         <View
           onLayout={[Function]}
@@ -192,16 +127,12 @@ exports[`componentsMap renders renders components map correctly 1`] = `
           <View
             renderToHardwareTextureAndroid={true}
             style={
-              Array [
-                Object {
-                  "alignItems": "center",
-                  "justifyContent": "center",
-                  "width": "100%",
-                },
-                Object {
-                  "height": null,
-                },
-              ]
+              Object {
+                "alignItems": "center",
+                "height": null,
+                "justifyContent": "center",
+                "width": "100%",
+              }
             }
           >
             <ActivityIndicator

package/Components/River/__tests__/componentsMap.test.js

@@ -1,5 +1,6 @@
 import React from "react";
-import { cleanup, render } from "@testing-library/react-native";
+import TestRenderer from "react-test-renderer";
+import { cleanup } from "@testing-library/react-native";
 import { Provider } from "react-redux";
 import configureStore from "redux-mock-store";
 
@@ -141,12 +142,12 @@ describe("componentsMap", () => {
       .spyOn(themeUtils, "useTheme")
       .mockImplementation(() => () => theme);
 
-    const { toJSON } = render(
+    const wrapper = TestRenderer.create(
       <Provider store={store}>
         <ComponentsMap {...props} />
       </Provider>
     );
 
-    expect(toJSON()).toMatchSnapshot();
+    expect(wrapper.toJSON()).toMatchSnapshot();
   });
 });

package/Components/TextInputTv/index.tsx

@@ -4,6 +4,7 @@ import { Appearance, Platform, StyleSheet, TextInput } from "react-native";
 import { isFunction } from "@applicaster/zapp-react-native-utils/functionUtils";
 import { isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useIsRTL } from "@applicaster/zapp-react-native-utils/localizationUtils";
+import { useAccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager/hooks";
 
 type Props = Partial<{
   style: any;
@@ -42,6 +43,8 @@ function TextInputTV(props: Props, ref) {
   const [colorScheme, setColorScheme] = useState(getInitialColorScheme());
   const isRTL = useIsRTL();
 
+  const accessibilityManager = useAccessibilityManager({});
+
   const onColorChange = useCallback(
     ({ colorScheme: color }) => {
       if (color !== colorScheme) {
@@ -153,6 +156,13 @@ function TextInputTV(props: Props, ref) {
       ])
     )(props);
 
+  const getAccessibilityProps = () => {
+    return {
+      accessibilityProps:
+        accessibilityManager.getInputAccessibilityProps("Search"),
+    };
+  };
+
   const inputProps = {
     ...getProps(),
     ...getStyle(),
@@ -161,6 +171,7 @@ function TextInputTV(props: Props, ref) {
     ...getSecureTextEntry(),
     ...getOnEndEditing(),
     ...getOnPress(),
+    ...getAccessibilityProps(),
   };
 
   if (

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "12.0.27-alpha.7708038842",
+  "version": "12.0.27-rc.1",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -34,10 +34,10 @@
     "redux-mock-store": "^1.5.3"
   },
   "dependencies": {
-    "@applicaster/applicaster-types": "12.0.27-alpha.7708038842",
-    "@applicaster/zapp-react-native-bridge": "12.0.27-alpha.7708038842",
-    "@applicaster/zapp-react-native-redux": "12.0.27-alpha.7708038842",
-    "@applicaster/zapp-react-native-utils": "12.0.27-alpha.7708038842",
+    "@applicaster/applicaster-types": "12.0.27-rc.1",
+    "@applicaster/zapp-react-native-bridge": "12.0.27-rc.1",
+    "@applicaster/zapp-react-native-redux": "12.0.27-rc.1",
+    "@applicaster/zapp-react-native-utils": "12.0.27-rc.1",
     "promise": "^8.3.0",
     "react-router-native": "^5.1.2",
     "url": "^0.11.0",