expo-tvos-search 1.2.0 → 1.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +26 -35
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
# expo-tvos-search
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
[](https://www.npmjs.com/package/expo-tvos-search)
|
|
4
|
+
[](https://opensource.org/licenses/MIT)
|
|
5
|
+
[](https://github.com/keiver/expo-tvos-search/actions)
|
|
4
6
|
|
|
5
|
-
|
|
7
|
+
A native tvOS search component for Expo and React Native using SwiftUI's `.searchable` modifier. Handles focus, keyboard navigation, and accessibility out of the box.
|
|
6
8
|
|
|
7
9
|
<p align="center">
|
|
8
10
|
<img src="screenshots/results.png" width="700" alt="TomoTV Search Results"/>
|
|
@@ -29,7 +31,13 @@ This library provides a native tvOS search view using SwiftUI's `.searchable` mo
|
|
|
29
31
|
## Installation
|
|
30
32
|
|
|
31
33
|
```bash
|
|
32
|
-
|
|
34
|
+
npx expo install expo-tvos-search
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
Or install from GitHub:
|
|
38
|
+
|
|
39
|
+
```bash
|
|
40
|
+
npx expo install github:keiver/expo-tvos-search
|
|
33
41
|
```
|
|
34
42
|
|
|
35
43
|
Then rebuild your native project:
|
|
@@ -92,6 +100,10 @@ function SearchScreen() {
|
|
|
92
100
|
| `showTitleOverlay` | `boolean` | `true` | Show title overlay with gradient at bottom of card |
|
|
93
101
|
| `enableMarquee` | `boolean` | `true` | Enable marquee scrolling for long titles |
|
|
94
102
|
| `marqueeDelay` | `number` | `1.5` | Delay in seconds before marquee starts |
|
|
103
|
+
| `emptyStateText` | `string` | `"Search for movies and videos"` | Text shown when search field is empty |
|
|
104
|
+
| `searchingText` | `string` | `"Searching..."` | Text shown during search |
|
|
105
|
+
| `noResultsText` | `string` | `"No results found"` | Text shown when no results found |
|
|
106
|
+
| `noResultsHintText` | `string` | `"Try a different search term"` | Hint text below no results message |
|
|
95
107
|
| `onSearch` | `function` | required | Called when search text changes |
|
|
96
108
|
| `onSelectItem` | `function` | required | Called when result is selected |
|
|
97
109
|
|
|
@@ -106,8 +118,18 @@ interface SearchResult {
|
|
|
106
118
|
}
|
|
107
119
|
```
|
|
108
120
|
|
|
121
|
+
## Result Handling
|
|
122
|
+
|
|
123
|
+
The native implementation applies the following validation and constraints:
|
|
124
|
+
|
|
125
|
+
- **Maximum results**: The results array is capped at 500 items. Any results beyond this limit are silently ignored.
|
|
126
|
+
- **Required fields**: Results with empty `id` or `title` are automatically filtered out and not displayed.
|
|
127
|
+
- **Image URL schemes**: Only HTTP and HTTPS URLs are accepted for `imageUrl`. Other URL schemes (e.g., `file://`, `data:`) are rejected.
|
|
128
|
+
- **HTTPS recommended**: HTTP URLs may be blocked by App Transport Security on tvOS unless explicitly allowed in Info.plist.
|
|
129
|
+
|
|
109
130
|
## Requirements
|
|
110
131
|
|
|
132
|
+
- Node.js 18.0+
|
|
111
133
|
- Expo SDK 51+
|
|
112
134
|
- tvOS 15.0+
|
|
113
135
|
- React Native TVOS
|
|
@@ -127,7 +149,7 @@ npx expo run:ios
|
|
|
127
149
|
### Images not loading
|
|
128
150
|
|
|
129
151
|
1. Verify your image URLs are HTTPS (HTTP may be blocked by App Transport Security)
|
|
130
|
-
2.
|
|
152
|
+
2. Ensure required authentication parameters are included in image URLs
|
|
131
153
|
3. For local development, ensure your server is accessible from the Apple TV
|
|
132
154
|
|
|
133
155
|
### Focus issues
|
|
@@ -161,37 +183,6 @@ Tests cover:
|
|
|
161
183
|
- Component rendering when native module is unavailable
|
|
162
184
|
- Event structure validation
|
|
163
185
|
|
|
164
|
-
### Best Practices
|
|
165
|
-
|
|
166
|
-
For optimal performance:
|
|
167
|
-
- **Debounce search input**: Wait 300-500ms after typing stops before calling your API
|
|
168
|
-
- **Batch result updates**: Update the entire `results` array at once rather than incrementally
|
|
169
|
-
- **Limit image sizes**: Use appropriately sized poster images (280x420 is the card size)
|
|
170
|
-
- **Cap result count**: Consider limiting to 50-100 results for smooth scrolling
|
|
171
|
-
|
|
172
|
-
## Accessibility
|
|
173
|
-
|
|
174
|
-
### Built-in Support
|
|
175
|
-
|
|
176
|
-
The native SwiftUI implementation provides accessibility features automatically:
|
|
177
|
-
- **Focus management**: tvOS focus system handles navigation
|
|
178
|
-
- **VoiceOver**: Cards announce title and subtitle
|
|
179
|
-
- **Button semantics**: Cards are properly identified as interactive elements
|
|
180
|
-
- **Focus indicators**: Visual feedback for focused state
|
|
181
|
-
|
|
182
|
-
### Remote Navigation
|
|
183
|
-
|
|
184
|
-
The native `.searchable` modifier provides standard tvOS navigation:
|
|
185
|
-
- **Swipe up/down**: Move between search field and results
|
|
186
|
-
- **Swipe left/right**: Navigate between grid items
|
|
187
|
-
- **Click (select)**: Open the focused result
|
|
188
|
-
- **Menu button**: Exit search or navigate back
|
|
189
|
-
|
|
190
|
-
Built for [TomoTV](https://github.com/keiver/tomotv), a Jellyfin client for Apple TV.
|
|
191
|
-
|
|
192
|
-
Swift documentation references:
|
|
193
|
-
- [.searchable modifier](https://developer.apple.com/documentation/SwiftUI/Creating-a-tvOS-media-catalog-app-in-SwiftUI)
|
|
194
|
-
|
|
195
186
|
## License
|
|
196
187
|
|
|
197
188
|
MIT
|