Challenge Overview
This challenge is part of a new project involving React Native. The eventual goal is to have a way to build React Native apps for Hercule's embedded devices that communicate with the device over websockets, using the proprietary XRE messaging protocol. We have lots of different samples and different apps at the moment, and this challenge will take those and consolidate them into an app that has a consistent look and feel and that can be easily navigated by the keyboard. All future samples will be integrated into this sample app and will be used to test further XRE integrations.
We will also use this app to compare the mobile rendering to the XRE and pxscene rendering to ensure consistency when we get to QA.
Note
This challenge is *only* React Native. In general, please don't use any mobile specific classes or functionality, since the final platform won't be a mobile platform.
Navigation
All navigation will be done using keys:
* Up
* Down
* Left
* Right
* Enter
* Backspace (to go back)
Flexible layout
Note that this app will need to work across mobile devices and TVs, so please make sure to use a properly flexible layout that will work on phones, tablets, and TVs at 1280x720 resolution.
Menus
The main screen should be a set of menu buttons that can navigate. Clicking the main menu buttons will go to a new screen with sub-menu buttons where individual examples can be selected. To go back from a sub-menu, the user should be able to hit backspace on the keyboard. You can include a tappable button for mobile testing, but the final app will be keyboard navigable.
For example:
* Keyboard
* Click counter
* Keyboard events
* Images
* Image rendering
* Layouts
* Dynamic
* Flex
* Flex Direction
* Justify Content
* Align Items
* Align Self
* Aspect Ratio
* Position
* Overflow
* zIndex
* Size
* Offset
* Margin
* Padding
* Border
* Timers
* Timers test
* Text
* Text format
Example
An existing test suite from the client can be found linked to in the forum. You can use this as an example of the menu structure, but don't base your code too heavily on this - just use it for inspiration / reference.
Existing demos
Existing demos are available and match the menu structure above. These will be provided in the forum and should be integrated into the final app. Note that the look and feel of these demos should be updated to match the UI requirements for fonts, colors, images, etc... The goal is to have a relatively consistent look and feel for all the demos.
Each demo should have a clear title and instruction text explaining any possible interactions
Each demo needs to have a margin around the edges for TV display of 50px.
For each demo, please make sure the font size is big enough to read on a TV as well
For each demo, please update the font colors to match the menu UI details below, whenever it makes sense.
Each demo needs to be updated to be fully navigable by keyboard, if it isn't already.
Menu UI / look and feel
In the upper left portion of each menu and submenu should be text "XFINITY" in a large font, in a white color. Please use these colors in the menu structure:
* Background black (#000000)
* Text: white (#FFFFFF)
* Selection: blue (#1A639D)
Fonts will be provided for use as well in the forum.
Extensibility
Note that in the future we will be adding in demos to the menu structure and app. Please make sure to document how to add demos and make sure the app is easily extensible to support new demos.
Best practices
The code should follow React Native best practices, and we expect the code to be clear and concise as it will be used in documentation and for validation in the future.
Submission
Your submission should be a React Native app that can be built and installed on an Android or iOS device or simulator, meeting the requirements laid out above. Your README must clearly describe how to build and test the app.
Just the app running and some validation is all that is required for the video. You don't need to cover the entire build in your video.
We will also use this app to compare the mobile rendering to the XRE and pxscene rendering to ensure consistency when we get to QA.
Note
This challenge is *only* React Native. In general, please don't use any mobile specific classes or functionality, since the final platform won't be a mobile platform.
Navigation
All navigation will be done using keys:
* Up
* Down
* Left
* Right
* Enter
* Backspace (to go back)
Flexible layout
Note that this app will need to work across mobile devices and TVs, so please make sure to use a properly flexible layout that will work on phones, tablets, and TVs at 1280x720 resolution.
Menus
The main screen should be a set of menu buttons that can navigate. Clicking the main menu buttons will go to a new screen with sub-menu buttons where individual examples can be selected. To go back from a sub-menu, the user should be able to hit backspace on the keyboard. You can include a tappable button for mobile testing, but the final app will be keyboard navigable.
For example:
* Keyboard
* Click counter
* Keyboard events
* Images
* Image rendering
* Layouts
* Dynamic
* Flex
* Flex Direction
* Justify Content
* Align Items
* Align Self
* Aspect Ratio
* Position
* Overflow
* zIndex
* Size
* Offset
* Margin
* Padding
* Border
* Timers
* Timers test
* Text
* Text format
Example
An existing test suite from the client can be found linked to in the forum. You can use this as an example of the menu structure, but don't base your code too heavily on this - just use it for inspiration / reference.
Existing demos
Existing demos are available and match the menu structure above. These will be provided in the forum and should be integrated into the final app. Note that the look and feel of these demos should be updated to match the UI requirements for fonts, colors, images, etc... The goal is to have a relatively consistent look and feel for all the demos.
Each demo should have a clear title and instruction text explaining any possible interactions
Each demo needs to have a margin around the edges for TV display of 50px.
For each demo, please make sure the font size is big enough to read on a TV as well
For each demo, please update the font colors to match the menu UI details below, whenever it makes sense.
Each demo needs to be updated to be fully navigable by keyboard, if it isn't already.
Menu UI / look and feel
In the upper left portion of each menu and submenu should be text "XFINITY" in a large font, in a white color. Please use these colors in the menu structure:
* Background black (#000000)
* Text: white (#FFFFFF)
* Selection: blue (#1A639D)
Fonts will be provided for use as well in the forum.
Extensibility
Note that in the future we will be adding in demos to the menu structure and app. Please make sure to document how to add demos and make sure the app is easily extensible to support new demos.
Best practices
The code should follow React Native best practices, and we expect the code to be clear and concise as it will be used in documentation and for validation in the future.
Submission
Your submission should be a React Native app that can be built and installed on an Android or iOS device or simulator, meeting the requirements laid out above. Your README must clearly describe how to build and test the app.
Just the app running and some validation is all that is required for the video. You don't need to cover the entire build in your video.