You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+38-30Lines changed: 38 additions & 30 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,10 +1,12 @@
1
-
# Vega TV Interfaces Sample App
1
+
Vega TV Interfaces Sample App
2
+
=============================
2
3
3
4
The Vega TV Interfaces Sample App is built with the Vega Developer Tools. This sample app demonstrates the recommended approaches for building TV-focused interfaces with React Native.
4
5
5
6

6
7
7
-
## Introduction
8
+
Introduction
9
+
------------
8
10
9
11
The TV Interfaces Example demonstrates how to build performant and user-friendly TV applications. This feature-focused sample app serves as a practical guide for developers implementing TV-optimized layouts and components.
10
12
@@ -33,7 +35,8 @@ TV applications are navigated primarily with directional controls (up, down, lef
33
35
34
36
The examples in this document demonstrate proven patterns that create intuitive, responsive TV experiences using the Vega Developer Tools.
35
37
36
-
## Documentation Overview
38
+
Documentation Overview
39
+
----------------------
37
40
38
41
This sample app's documentation is organized into the following sections:
39
42
@@ -50,18 +53,19 @@ Detailed Component and Hook Documentation:
50
53
*[Hooks](./docs/hooks.md) - Collection of custom hooks for TV interface development.
51
54
52
55
53
-
## Build and run the app
56
+
Build and run the app
57
+
---------------------
54
58
55
59
### Prerequisites
56
60
57
-
Before you launch the sample app, make sure that you have [installed the Vega Developer Tools](https://developer.amazon.com/docs/vega/0.21/install-vega-sdk.html) and NodeJS 18-20.
61
+
Before you launch the sample app, make sure that you have [installed the Vega Developer Tools](https://developer.amazon.com/docs/vega/latest/install-vega-sdk.html) and NodeJS 18-20.
58
62
59
63
60
64
### Step 1: Build the app
61
65
62
66
After you download the source code from GitHub, you can build the Vega TV Interfaces Sample App from the command line to generate VPKG files. The VPKG files run on the Vega Virtual Device and Vega OS Fire TV Stick.
63
67
64
-
You can also use [Vega Studio](https://developer.amazon.com/docs/vega/0.21/setup-extension.html#learn-the-basic-features) with Visual Studio Code to build the app.
68
+
You can also use [Vega Studio](https://developer.amazon.com/docs/vega/latest/setup-extension.html#learn-the-basic-features) with Visual Studio Code to build the app.
65
69
66
70
1. At the command prompt, navigate to the Vega TV Interfaces Sample App source code directory.
67
71
@@ -90,7 +94,7 @@ You can also use [Vega Studio](https://developer.amazon.com/docs/vega/0.21/setup
90
94
1. To start the Vega Virtual Device, at the command prompt, run the following command.
91
95
92
96
```
93
-
kepler virtual-device start
97
+
vega virtual-device start
94
98
```
95
99
96
100
2. Go to the directory where you placed the VPKG files.
@@ -100,13 +104,13 @@ You can also use [Vega Studio](https://developer.amazon.com/docs/vega/0.21/setup
If you're facing unexpected issues while trying to build and run the app (For example, the build is failing randomly, the app is not starting, or the app is crashing randomly.) try the following solutions:
129
134
@@ -146,11 +151,12 @@ npm start -- --reset-cache
146
151
147
152
* Restart the simulator. We have observed the simulator crashing randomly if it's used without restarting for extended periods of time.
148
153
149
-
* Run the `kepler clean` command. This removes the artifacts generated in the top level `/.build` folder. To learn more, see the [Vega CLI Functions](https://developer.amazon.com/docs/vega/0.21/cli-tools.html) document.
154
+
* Run the `vega clean` command. This removes the artifacts generated in the top level `/.build` folder. To learn more, see the [Vega CLI Functions](https://developer.amazon.com/docs/vega/latest/cli-tools.html) document.
150
155
151
156
152
157
153
-
## Testing the app
158
+
Testing the app
159
+
---------------
154
160
155
161
[React Native Testing Library (RNTL)](https://callstack.github.io/react-native-testing-library/) is used for component and integration testing in this project. RNTL provides a robust set of tools for testing React Native apps with a focus on user interactions and accessibility.
156
162
@@ -174,29 +180,27 @@ npm run test:watch
174
180
175
181
For more detailed information about our testing setup, best practices, and custom utilities, please refer to the [testing documentation](./src/test-utils/README.md) in the test-utils directory.
176
182
177
-
## Services
183
+
Services
184
+
--------
178
185
179
186
The app is structured to delegate specific tasks to encapsulated units of logic known as services. Each service is designed to handle a particular functionality, allowing for clean separation of concerns and ensuring that the logic is reusable and maintainable. This approach allows services to be potentially extracted and used in other applications with ease.
180
187
181
-
- [**AppConfig Service**](./src/services/appConfig/README.md): Manages environment variables defined in the `.env` file, enabling the app to read and apply configuration settings.
188
+
- [**AppConfig Service**](src/services/appConfig/README.md): Manages environment variables defined in the `.env` file, enabling the app to read and apply configuration settings.
182
189
183
-
- [**ApiClient Service**](./src/services/apiClient/README.md): Manages fetching data from various data sources exposing a common API for different clients that can be consumed across the app especially in fetchers implemented in `src/api` folder.
190
+
- [**DeviceInfo Service**](src/services/deviceInfo/README.md): Provides access to device-specific information, such as determining the type of device, and interacts with device-related APIs.
184
191
185
-
- [**DeviceInfo Service**](./src/services/deviceInfo/README.md): Provides access to device-specific information, such as determining the type of device, and interacts with device-related APIs.
192
+
- [**DeviceStorage Service**](src/services/Storage/README.md): Provides access to device storage, by abstracting storage-related APIs exposed by `AsyncStorage`.
186
193
187
-
- [**DeviceStorage Service**](./src/services/deviceStorage/README.md): Provides access to device storage, by abstracting storage-related APIs exposed by `AsyncStorage`.
194
+
- [**NetInfo Service**](src/services/netInfo/README.md): Monitors internet connectivity, manages the network state, and listens for network-related events.
188
195
189
-
- [**NetInfo Service**](./src/services/netInfo/README.md): Monitors internet connectivity, manages the network state, and listens for network-related events.
196
+
- [**i18n Service**](src/services/i18n/README.md): Provides methods to manage translations in the app.
190
197
191
-
- [**Auth Service**](./src/services/auth/README.md): Manages user authentication, including signing users in and out, and restoring session data from device storage.
198
+
- [**Focus Guide Service**](src/services/focusGuide/README.md): Provides hooks and wrappers to manage focusing elements in the app.
192
199
193
-
- [**i18n Service**](./src/services/i18n/README.md): Provides methods to manage translations in the app.
200
+
- [**Accessibility (a11y) Service**](src/services/a11y/README.md): Provides common logic for applying complex accessibility properties to components.
194
201
195
-
- [**Focus Guide Service**](./src/services/focusGuide/README.md): Provides hooks and wrappers to manage focusing elements in the app.
196
-
197
-
- [**Accessibility (a11y) Service**](./src/services/a11y/README.md): Provides common logic for applying complex accessibility properties to components.
198
-
199
-
## Customize the UI theme
202
+
Customize the UI theme
203
+
----------------------
200
204
201
205
You can customize the UI by changing the color scheme and font settings.
202
206
@@ -322,7 +326,8 @@ src/theme/
322
326
323
327
New tokens are visible after you reload your app.
324
328
325
-
## Components
329
+
Components
330
+
----------
326
331
327
332
To provide default props and customize components, importing directly from `@amazon-devices/kepler-ui-components` is blocked across the app.
0 commit comments