expo-tvos-search 1.2.2 → 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 +18 -38
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,13 +1,10 @@
|
|
|
1
1
|
# expo-tvos-search
|
|
2
2
|
|
|
3
3
|
[](https://www.npmjs.com/package/expo-tvos-search)
|
|
4
|
-
[](https://www.npmjs.com/package/expo-tvos-search)
|
|
5
4
|
[](https://opensource.org/licenses/MIT)
|
|
6
5
|
[](https://github.com/keiver/expo-tvos-search/actions)
|
|
7
6
|
|
|
8
|
-
A native tvOS search component for Expo and React Native.
|
|
9
|
-
|
|
10
|
-
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.
|
|
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.
|
|
11
8
|
|
|
12
9
|
<p align="center">
|
|
13
10
|
<img src="screenshots/results.png" width="700" alt="TomoTV Search Results"/>
|
|
@@ -34,13 +31,13 @@ This library provides a native tvOS search view using SwiftUI's `.searchable` mo
|
|
|
34
31
|
## Installation
|
|
35
32
|
|
|
36
33
|
```bash
|
|
37
|
-
|
|
34
|
+
npx expo install expo-tvos-search
|
|
38
35
|
```
|
|
39
36
|
|
|
40
37
|
Or install from GitHub:
|
|
41
38
|
|
|
42
39
|
```bash
|
|
43
|
-
|
|
40
|
+
npx expo install github:keiver/expo-tvos-search
|
|
44
41
|
```
|
|
45
42
|
|
|
46
43
|
Then rebuild your native project:
|
|
@@ -103,6 +100,10 @@ function SearchScreen() {
|
|
|
103
100
|
| `showTitleOverlay` | `boolean` | `true` | Show title overlay with gradient at bottom of card |
|
|
104
101
|
| `enableMarquee` | `boolean` | `true` | Enable marquee scrolling for long titles |
|
|
105
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 |
|
|
106
107
|
| `onSearch` | `function` | required | Called when search text changes |
|
|
107
108
|
| `onSelectItem` | `function` | required | Called when result is selected |
|
|
108
109
|
|
|
@@ -117,8 +118,18 @@ interface SearchResult {
|
|
|
117
118
|
}
|
|
118
119
|
```
|
|
119
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
|
+
|
|
120
130
|
## Requirements
|
|
121
131
|
|
|
132
|
+
- Node.js 18.0+
|
|
122
133
|
- Expo SDK 51+
|
|
123
134
|
- tvOS 15.0+
|
|
124
135
|
- React Native TVOS
|
|
@@ -138,7 +149,7 @@ npx expo run:ios
|
|
|
138
149
|
### Images not loading
|
|
139
150
|
|
|
140
151
|
1. Verify your image URLs are HTTPS (HTTP may be blocked by App Transport Security)
|
|
141
|
-
2.
|
|
152
|
+
2. Ensure required authentication parameters are included in image URLs
|
|
142
153
|
3. For local development, ensure your server is accessible from the Apple TV
|
|
143
154
|
|
|
144
155
|
### Focus issues
|
|
@@ -172,37 +183,6 @@ Tests cover:
|
|
|
172
183
|
- Component rendering when native module is unavailable
|
|
173
184
|
- Event structure validation
|
|
174
185
|
|
|
175
|
-
### Best Practices
|
|
176
|
-
|
|
177
|
-
For optimal performance:
|
|
178
|
-
- **Debounce search input**: Wait 300-500ms after typing stops before calling your API
|
|
179
|
-
- **Batch result updates**: Update the entire `results` array at once rather than incrementally
|
|
180
|
-
- **Limit image sizes**: Use appropriately sized poster images (280x420 is the card size)
|
|
181
|
-
- **Cap result count**: Consider limiting to 50-100 results for smooth scrolling
|
|
182
|
-
|
|
183
|
-
## Accessibility
|
|
184
|
-
|
|
185
|
-
### Built-in Support
|
|
186
|
-
|
|
187
|
-
The native SwiftUI implementation provides accessibility features automatically:
|
|
188
|
-
- **Focus management**: tvOS focus system handles navigation
|
|
189
|
-
- **VoiceOver**: Cards announce title and subtitle
|
|
190
|
-
- **Button semantics**: Cards are properly identified as interactive elements
|
|
191
|
-
- **Focus indicators**: Visual feedback for focused state
|
|
192
|
-
|
|
193
|
-
### Remote Navigation
|
|
194
|
-
|
|
195
|
-
The native `.searchable` modifier provides standard tvOS navigation:
|
|
196
|
-
- **Swipe up/down**: Move between search field and results
|
|
197
|
-
- **Swipe left/right**: Navigate between grid items
|
|
198
|
-
- **Click (select)**: Open the focused result
|
|
199
|
-
- **Menu button**: Exit search or navigate back
|
|
200
|
-
|
|
201
|
-
Built for [TomoTV](https://github.com/keiver/tomotv), a Jellyfin client for Apple TV.
|
|
202
|
-
|
|
203
|
-
Swift documentation references:
|
|
204
|
-
- [.searchable modifier](https://developer.apple.com/documentation/SwiftUI/Creating-a-tvOS-media-catalog-app-in-SwiftUI)
|
|
205
|
-
|
|
206
186
|
## License
|
|
207
187
|
|
|
208
188
|
MIT
|