expo-tvos-search 1.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Keiver Hernandez
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,197 @@
+# expo-tvos-search
+
+A native tvOS search component for Expo and React Native.
+
+This library provides a native tvOS search view using SwiftUI's `.searchable` modifier. It handles focus, keyboard navigation, and accessibility out of the box, providing a seamless search experience on Apple TV with a native fullscreen search interface.
+
+<p align="center">
+  <img src="screenshots/results.png" width="700" alt="TomoTV Search Results"/>
+</p>
+
+<table>
+  <tr>
+    <td align="center">
+      <img src="screenshots/default.png" width="280" alt="Search"/><br/>
+      <sub>Native Search</sub>
+    </td>
+    <td align="center">
+      <img src="screenshots/results.png" width="280" alt="Results"/><br/>
+      <sub>Results</sub>
+    </td>
+    <td align="center">
+      <img src="screenshots/no-results.png" width="280" alt="No Results"/><br/>
+      <sub>Empty State</sub>
+    </td>
+  </tr>
+</table>
+
+
+## Installation
+
+```bash
+npm install github:keiver/expo-tvos-search
+```
+
+Then rebuild your native project:
+
+```bash
+EXPO_TV=1 npx expo prebuild --clean
+npx expo run:ios
+```
+
+## Usage
+
+```tsx
+import { TvosSearchView, isNativeSearchAvailable } from 'expo-tvos-search';
+
+function SearchScreen() {
+  const [results, setResults] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleSearch = (event) => {
+    const query = event.nativeEvent.query;
+    // Fetch your results...
+  };
+
+  const handleSelect = (event) => {
+    const id = event.nativeEvent.id;
+    // Navigate to detail...
+  };
+
+  if (!isNativeSearchAvailable()) {
+    return <YourFallbackSearch />;
+  }
+
+  return (
+    <TvosSearchView
+      results={results}
+      columns={5}
+      placeholder="Search..."
+      isLoading={isLoading}
+      topInset={140}
+      onSearch={handleSearch}
+      onSelectItem={handleSelect}
+      style={{ flex: 1 }}
+    />
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `results` | `SearchResult[]` | `[]` | Array of search results |
+| `columns` | `number` | `5` | Number of columns in the grid |
+| `placeholder` | `string` | `"Search..."` | Search field placeholder |
+| `isLoading` | `boolean` | `false` | Shows loading indicator |
+| `showTitle` | `boolean` | `false` | Show title below each result |
+| `showSubtitle` | `boolean` | `false` | Show subtitle below title |
+| `showFocusBorder` | `boolean` | `false` | Show border on focused item |
+| `topInset` | `number` | `0` | Top padding (for tab bar clearance) |
+| `showTitleOverlay` | `boolean` | `true` | Show title overlay with gradient at bottom of card |
+| `enableMarquee` | `boolean` | `true` | Enable marquee scrolling for long titles |
+| `marqueeDelay` | `number` | `1.5` | Delay in seconds before marquee starts |
+| `onSearch` | `function` | required | Called when search text changes |
+| `onSelectItem` | `function` | required | Called when result is selected |
+
+## SearchResult Type
+
+```typescript
+interface SearchResult {
+  id: string;
+  title: string;
+  subtitle?: string;
+  imageUrl?: string;
+}
+```
+
+## Requirements
+
+- Expo SDK 51+
+- tvOS 15.0+
+- React Native TVOS
+
+## Troubleshooting
+
+### Native module not found
+
+If you see `requireNativeViewManager("ExpoTvosSearch") returned null`, the native module hasn't been built:
+
+```bash
+# Clean and rebuild with tvOS support
+EXPO_TV=1 npx expo prebuild --clean
+npx expo run:ios
+```
+
+### Images not loading
+
+1. Verify your image URLs are HTTPS (HTTP may be blocked by App Transport Security)
+2. Check that the Jellyfin API key is included in the URL query parameters
+3. For local development, ensure your server is accessible from the Apple TV
+
+### Focus issues
+
+If focus doesn't move correctly:
+
+1. Ensure `columns` prop matches your layout (default: 5)
+2. Check `topInset` if the first row is hidden under the tab bar
+3. The native `.searchable` modifier handles focus automatically - avoid wrapping in focusable containers
+
+### Marquee not scrolling
+
+If long titles don't scroll when focused:
+
+1. Verify `enableMarquee={true}` (default)
+2. Check `marqueeDelay` - scrolling starts after this delay (default: 1.5s)
+3. Text only scrolls if it overflows the card width
+
+## Testing
+
+Run TypeScript tests:
+
+```bash
+npm test                # Run tests once
+npm run test:watch      # Watch mode
+npm run test:coverage   # Generate coverage report
+```
+
+Tests cover:
+- `isNativeSearchAvailable()` behavior on different platforms
+- Component rendering when native module is unavailable
+- Event structure validation
+
+### Best Practices
+
+For optimal performance:
+- **Debounce search input**: Wait 300-500ms after typing stops before calling your API
+- **Batch result updates**: Update the entire `results` array at once rather than incrementally
+- **Limit image sizes**: Use appropriately sized poster images (280x420 is the card size)
+- **Cap result count**: Consider limiting to 50-100 results for smooth scrolling
+
+## Accessibility
+
+### Built-in Support
+
+The native SwiftUI implementation provides accessibility features automatically:
+- **Focus management**: tvOS focus system handles navigation
+- **VoiceOver**: Cards announce title and subtitle
+- **Button semantics**: Cards are properly identified as interactive elements
+- **Focus indicators**: Visual feedback for focused state
+
+### Remote Navigation
+
+The native `.searchable` modifier provides standard tvOS navigation:
+- **Swipe up/down**: Move between search field and results
+- **Swipe left/right**: Navigate between grid items
+- **Click (select)**: Open the focused result
+- **Menu button**: Exit search or navigate back
+
+Built for [TomoTV](https://github.com/keiver/tomotv), a Jellyfin client for Apple TV.
+
+Swift documentation references:
+- [.searchable modifier](https://developer.apple.com/documentation/SwiftUI/Creating-a-tvOS-media-catalog-app-in-SwiftUI)
+
+## License
+
+MIT

package/build/index.d.ts

@@ -0,0 +1,215 @@
+import React from "react";
+import { ViewStyle } from "react-native";
+/**
+ * Event payload for search text changes.
+ * Fired when the user types in the native search field.
+ */
+export interface SearchEvent {
+    nativeEvent: {
+        /** The current search query string entered by the user */
+        query: string;
+    };
+}
+/**
+ * Event payload for item selection.
+ * Fired when the user selects a search result.
+ */
+export interface SelectItemEvent {
+    nativeEvent: {
+        /** The unique identifier of the selected search result */
+        id: string;
+    };
+}
+/**
+ * Represents a single search result displayed in the grid.
+ */
+export interface SearchResult {
+    /** Unique identifier for the result (used in onSelectItem callback) */
+    id: string;
+    /** Primary display text for the result */
+    title: string;
+    /** Optional secondary text displayed below the title */
+    subtitle?: string;
+    /** Optional image URL for the result poster/thumbnail */
+    imageUrl?: string;
+}
+/**
+ * Props for the TvosSearchView component.
+ *
+ * @example
+ * ```tsx
+ * <TvosSearchView
+ *   results={searchResults}
+ *   columns={5}
+ *   placeholder="Search movies..."
+ *   isLoading={loading}
+ *   topInset={140}
+ *   onSearch={(e) => handleSearch(e.nativeEvent.query)}
+ *   onSelectItem={(e) => navigateTo(e.nativeEvent.id)}
+ *   style={{ flex: 1 }}
+ * />
+ * ```
+ */
+export interface TvosSearchViewProps {
+    /**
+     * Array of search results to display in the grid.
+     * Each result should have a unique `id`.
+     * Arrays larger than 500 items are truncated.
+     * Results with empty `id` or `title` are skipped.
+     * @maximum 500
+     */
+    results: SearchResult[];
+    /**
+     * Number of columns in the results grid.
+     * Values outside 1-10 range are clamped.
+     * @default 5
+     * @minimum 1
+     * @maximum 10
+     */
+    columns?: number;
+    /**
+     * Placeholder text shown in the search field when empty.
+     * @default "Search..."
+     */
+    placeholder?: string;
+    /**
+     * Whether to show a loading indicator.
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Show title text below each result card.
+     * @default false
+     */
+    showTitle?: boolean;
+    /**
+     * Show subtitle text below title.
+     * Requires `showTitle` to be true to be visible.
+     * @default false
+     */
+    showSubtitle?: boolean;
+    /**
+     * Show gold border on focused card.
+     * @default false
+     */
+    showFocusBorder?: boolean;
+    /**
+     * Extra top padding in points for tab bar clearance.
+     * Useful when the view is displayed under a navigation bar.
+     * Values outside 0-500 range are clamped.
+     * @default 0
+     * @minimum 0
+     * @maximum 500
+     */
+    topInset?: number;
+    /**
+     * Show title overlay with gradient at bottom of card.
+     * This displays the title on top of the image.
+     * @default true
+     */
+    showTitleOverlay?: boolean;
+    /**
+     * Enable marquee scrolling for long titles that overflow the card width.
+     * @default true
+     */
+    enableMarquee?: boolean;
+    /**
+     * Delay in seconds before marquee starts scrolling when item is focused.
+     * Values outside 0-60 range are clamped.
+     * @default 1.5
+     * @minimum 0
+     * @maximum 60
+     */
+    marqueeDelay?: number;
+    /**
+     * Text displayed when the search field is empty and no results are shown.
+     * @default "Search for movies and videos"
+     */
+    emptyStateText?: string;
+    /**
+     * Text displayed while searching (when loading with no results yet).
+     * @default "Searching..."
+     */
+    searchingText?: string;
+    /**
+     * Text displayed when search returns no results.
+     * @default "No results found"
+     */
+    noResultsText?: string;
+    /**
+     * Hint text displayed below the no results message.
+     * @default "Try a different search term"
+     */
+    noResultsHintText?: string;
+    /**
+     * Callback fired when the search text changes.
+     * Debounce this handler to avoid excessive API calls.
+     */
+    onSearch: (event: SearchEvent) => void;
+    /**
+     * Callback fired when a search result is selected.
+     * Use the `id` from the event to identify which result was selected.
+     */
+    onSelectItem: (event: SelectItemEvent) => void;
+    /**
+     * Optional style for the view container.
+     */
+    style?: ViewStyle;
+}
+/**
+ * Native tvOS search view component using SwiftUI's `.searchable` modifier.
+ *
+ * This component provides a native search experience on tvOS with proper focus
+ * handling and keyboard navigation. On non-tvOS platforms or when the native
+ * module is unavailable, it renders `null` - use `isNativeSearchAvailable()`
+ * to check availability and render a fallback.
+ *
+ * @example
+ * ```tsx
+ * import { TvosSearchView, isNativeSearchAvailable } from 'expo-tvos-search';
+ *
+ * function SearchScreen() {
+ *   const [results, setResults] = useState<SearchResult[]>([]);
+ *
+ *   if (!isNativeSearchAvailable()) {
+ *     return <FallbackSearchComponent />;
+ *   }
+ *
+ *   return (
+ *     <TvosSearchView
+ *       results={results}
+ *       onSearch={(e) => fetchResults(e.nativeEvent.query)}
+ *       onSelectItem={(e) => router.push(`/detail/${e.nativeEvent.id}`)}
+ *       style={{ flex: 1 }}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @param props - Component props
+ * @returns The native search view on tvOS, or `null` if unavailable
+ */
+export declare function TvosSearchView(props: TvosSearchViewProps): React.JSX.Element | null;
+/**
+ * Checks if the native tvOS search component is available.
+ *
+ * Returns `true` only when:
+ * - Running on tvOS (Platform.OS === "ios" && Platform.isTV)
+ * - The native module has been built (via `expo prebuild`)
+ * - expo-modules-core is properly installed
+ *
+ * Use this to conditionally render a fallback search implementation
+ * on non-tvOS platforms or when the native module is unavailable.
+ *
+ * @returns `true` if TvosSearchView will render, `false` if it will return null
+ *
+ * @example
+ * ```tsx
+ * if (!isNativeSearchAvailable()) {
+ *   return <ReactNativeSearchFallback />;
+ * }
+ * return <TvosSearchView {...props} />;
+ * ```
+ */
+export declare function isNativeSearchAvailable(): boolean;
+//# sourceMappingURL=index.d.ts.map

package/build/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAY,MAAM,cAAc,CAAC;AAEnD;;;GAGG;AACH,MAAM,WAAW,WAAW;IAC1B,WAAW,EAAE;QACX,0DAA0D;QAC1D,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;CACH;AAED;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B,WAAW,EAAE;QACX,0DAA0D;QAC1D,EAAE,EAAE,MAAM,CAAC;KACZ,CAAC;CACH;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,uEAAuE;IACvE,EAAE,EAAE,MAAM,CAAC;IACX,0CAA0C;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,wDAAwD;IACxD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,WAAW,mBAAmB;IAClC;;;;;;OAMG;IACH,OAAO,EAAE,YAAY,EAAE,CAAC;IAExB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;;OAGG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IAEvC;;;OAGG;IACH,YAAY,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAE/C;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAmBD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,4BAKxD;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,uBAAuB,IAAI,OAAO,CAEjD"}

package/build/index.js

@@ -0,0 +1,81 @@
+import React from "react";
+import { Platform } from "react-native";
+// Safely try to load the native view - it may not be available if:
+// 1. Running on a non-tvOS platform
+// 2. Native module hasn't been built yet (needs expo prebuild)
+// 3. expo-modules-core isn't properly installed
+let NativeView = null;
+if (Platform.OS === "ios" && Platform.isTV) {
+    try {
+        const { requireNativeViewManager } = require("expo-modules-core");
+        if (typeof requireNativeViewManager === "function") {
+            NativeView = requireNativeViewManager("ExpoTvosSearch");
+        }
+    }
+    catch {
+        // Native module not available - will fall back to React Native implementation
+    }
+}
+/**
+ * Native tvOS search view component using SwiftUI's `.searchable` modifier.
+ *
+ * This component provides a native search experience on tvOS with proper focus
+ * handling and keyboard navigation. On non-tvOS platforms or when the native
+ * module is unavailable, it renders `null` - use `isNativeSearchAvailable()`
+ * to check availability and render a fallback.
+ *
+ * @example
+ * ```tsx
+ * import { TvosSearchView, isNativeSearchAvailable } from 'expo-tvos-search';
+ *
+ * function SearchScreen() {
+ *   const [results, setResults] = useState<SearchResult[]>([]);
+ *
+ *   if (!isNativeSearchAvailable()) {
+ *     return <FallbackSearchComponent />;
+ *   }
+ *
+ *   return (
+ *     <TvosSearchView
+ *       results={results}
+ *       onSearch={(e) => fetchResults(e.nativeEvent.query)}
+ *       onSelectItem={(e) => router.push(`/detail/${e.nativeEvent.id}`)}
+ *       style={{ flex: 1 }}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @param props - Component props
+ * @returns The native search view on tvOS, or `null` if unavailable
+ */
+export function TvosSearchView(props) {
+    if (!NativeView) {
+        return null;
+    }
+    return React.createElement(NativeView, { ...props });
+}
+/**
+ * Checks if the native tvOS search component is available.
+ *
+ * Returns `true` only when:
+ * - Running on tvOS (Platform.OS === "ios" && Platform.isTV)
+ * - The native module has been built (via `expo prebuild`)
+ * - expo-modules-core is properly installed
+ *
+ * Use this to conditionally render a fallback search implementation
+ * on non-tvOS platforms or when the native module is unavailable.
+ *
+ * @returns `true` if TvosSearchView will render, `false` if it will return null
+ *
+ * @example
+ * ```tsx
+ * if (!isNativeSearchAvailable()) {
+ *   return <ReactNativeSearchFallback />;
+ * }
+ * return <TvosSearchView {...props} />;
+ * ```
+ */
+export function isNativeSearchAvailable() {
+    return NativeView !== null;
+}

package/expo-module.config.json

@@ -0,0 +1,9 @@
+{
+  "platforms": ["ios", "tvos"],
+  "ios": {
+    "modules": ["ExpoTvosSearchModule"]
+  },
+  "tvos": {
+    "modules": ["ExpoTvosSearchModule"]
+  }
+}

package/ios/ExpoTvosSearch.podspec

@@ -0,0 +1,16 @@
+Pod::Spec.new do |s|
+  s.name           = 'ExpoTvosSearch'
+  s.version        = '1.0.0'
+  s.summary        = 'Native tvOS search view with SwiftUI .searchable modifier'
+  s.description    = 'Provides a native tvOS search experience using SwiftUI searchable modifier for proper focus and keyboard navigation'
+  s.author         = 'Keiver Hernandez'
+  s.homepage       = 'https://github.com/keiver/expo-tvos-search'
+  s.license        = { :type => 'MIT', :file => '../LICENSE' }
+  s.source         = { :git => 'https://github.com/keiver/expo-tvos-search.git', :tag => s.version.to_s }
+
+  s.platforms      = { :ios => '15.1', :tvos => '15.0' }
+  s.swift_version  = '5.9'
+  s.source_files   = '*.swift'
+
+  s.dependency 'ExpoModulesCore'
+end

package/ios/ExpoTvosSearchModule.swift

@@ -0,0 +1,84 @@
+import ExpoModulesCore
+
+public class ExpoTvosSearchModule: Module {
+    // Validation constants
+    private static let minColumns = 1
+    private static let maxColumns = 10
+    private static let maxResults = 500
+    private static let maxMarqueeDelay: Double = 60.0
+    private static let maxStringLength = 500
+
+    public func definition() -> ModuleDefinition {
+        Name("ExpoTvosSearch")
+
+        View(ExpoTvosSearchView.self) {
+            Events("onSearch", "onSelectItem")
+
+            Prop("results") { (view: ExpoTvosSearchView, results: [[String: Any]]) in
+                // Limit results array size to prevent memory issues
+                let limitedResults = Array(results.prefix(Self.maxResults))
+                view.updateResults(limitedResults)
+            }
+
+            Prop("columns") { (view: ExpoTvosSearchView, columns: Int) in
+                // Clamp columns between min and max for safe grid layout
+                view.columns = min(max(Self.minColumns, columns), Self.maxColumns)
+            }
+
+            Prop("placeholder") { (view: ExpoTvosSearchView, placeholder: String) in
+                // Limit placeholder length to prevent layout issues
+                view.placeholder = String(placeholder.prefix(Self.maxStringLength))
+            }
+
+            Prop("isLoading") { (view: ExpoTvosSearchView, isLoading: Bool) in
+                view.isLoading = isLoading
+            }
+
+            Prop("showTitle") { (view: ExpoTvosSearchView, showTitle: Bool) in
+                view.showTitle = showTitle
+            }
+
+            Prop("showSubtitle") { (view: ExpoTvosSearchView, showSubtitle: Bool) in
+                view.showSubtitle = showSubtitle
+            }
+
+            Prop("showFocusBorder") { (view: ExpoTvosSearchView, showFocusBorder: Bool) in
+                view.showFocusBorder = showFocusBorder
+            }
+
+            Prop("topInset") { (view: ExpoTvosSearchView, topInset: Double) in
+                // Clamp to non-negative values (max 500 points reasonable for any screen)
+                view.topInset = CGFloat(min(max(0, topInset), 500))
+            }
+
+            Prop("showTitleOverlay") { (view: ExpoTvosSearchView, show: Bool) in
+                view.showTitleOverlay = show
+            }
+
+            Prop("enableMarquee") { (view: ExpoTvosSearchView, enable: Bool) in
+                view.enableMarquee = enable
+            }
+
+            Prop("marqueeDelay") { (view: ExpoTvosSearchView, delay: Double) in
+                // Clamp between 0 and maxMarqueeDelay seconds
+                view.marqueeDelay = min(max(0, delay), Self.maxMarqueeDelay)
+            }
+
+            Prop("emptyStateText") { (view: ExpoTvosSearchView, text: String) in
+                view.emptyStateText = String(text.prefix(Self.maxStringLength))
+            }
+
+            Prop("searchingText") { (view: ExpoTvosSearchView, text: String) in
+                view.searchingText = String(text.prefix(Self.maxStringLength))
+            }
+
+            Prop("noResultsText") { (view: ExpoTvosSearchView, text: String) in
+                view.noResultsText = String(text.prefix(Self.maxStringLength))
+            }
+
+            Prop("noResultsHintText") { (view: ExpoTvosSearchView, text: String) in
+                view.noResultsHintText = String(text.prefix(Self.maxStringLength))
+            }
+        }
+    }
+}