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.
A previous couple challenges have worked on this, but the output has been of a lower quality than what we are looking for. This challenge will clean things up a bit to make it more presentable for the client.
Note that you are not required to stick to any past decisions in the demos. You can keep all, some, or none of the previous work in Git.
Requirements
These tickets in Git comprise the requirements for this challenge:
* https://gitlab.com/hercules-react-xre/react-demo-app/issues/1
* https://gitlab.com/hercules-react-xre/react-demo-app/issues/2
* https://gitlab.com/hercules-react-xre/react-demo-app/issues/3
* https://gitlab.com/hercules-react-xre/react-demo-app/issues/4
* https://gitlab.com/hercules-react-xre/react-demo-app/issues/5
* https://gitlab.com/hercules-react-xre/react-demo-app/issues/6
* https://gitlab.com/hercules-react-xre/react-demo-app/issues/7
* https://gitlab.com/hercules-react-xre/react-demo-app/issues/8
* https://gitlab.com/hercules-react-xre/react-demo-app/issues/9
* https://gitlab.com/hercules-react-xre/react-demo-app/issues/10
* https://gitlab.com/hercules-react-xre/react-demo-app/issues/11
* https://gitlab.com/hercules-react-xre/react-demo-app/issues/12
* https://gitlab.com/hercules-react-xre/react-demo-app/issues/13
* https://gitlab.com/hercules-react-xre/react-demo-app/issues/14
* https://gitlab.com/hercules-react-xre/react-demo-app/issues/15
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 these keys. A simulated keyboard like what is currenlty shown is *not* sufficient. We expect you to have the app work with an external keyboard - either an external keyboard in the simulator, or a Bluetooth keyboard on an actual device.
* 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. Testing only in landscape orientation is fine for this challenge.
Your submission should run in both Android and iOS.
Tests
Tests are not required for this challenge
General UI
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 external 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)
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 patchfile to the git repository that the reviewers can apply without error and then run to see the required updates.
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.
A previous couple challenges have worked on this, but the output has been of a lower quality than what we are looking for. This challenge will clean things up a bit to make it more presentable for the client.
Note that you are not required to stick to any past decisions in the demos. You can keep all, some, or none of the previous work in Git.
Requirements
These tickets in Git comprise the requirements for this challenge:
* https://gitlab.com/hercules-react-xre/react-demo-app/issues/1
* https://gitlab.com/hercules-react-xre/react-demo-app/issues/2
* https://gitlab.com/hercules-react-xre/react-demo-app/issues/3
* https://gitlab.com/hercules-react-xre/react-demo-app/issues/4
* https://gitlab.com/hercules-react-xre/react-demo-app/issues/5
* https://gitlab.com/hercules-react-xre/react-demo-app/issues/6
* https://gitlab.com/hercules-react-xre/react-demo-app/issues/7
* https://gitlab.com/hercules-react-xre/react-demo-app/issues/8
* https://gitlab.com/hercules-react-xre/react-demo-app/issues/9
* https://gitlab.com/hercules-react-xre/react-demo-app/issues/10
* https://gitlab.com/hercules-react-xre/react-demo-app/issues/11
* https://gitlab.com/hercules-react-xre/react-demo-app/issues/12
* https://gitlab.com/hercules-react-xre/react-demo-app/issues/13
* https://gitlab.com/hercules-react-xre/react-demo-app/issues/14
* https://gitlab.com/hercules-react-xre/react-demo-app/issues/15
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 these keys. A simulated keyboard like what is currenlty shown is *not* sufficient. We expect you to have the app work with an external keyboard - either an external keyboard in the simulator, or a Bluetooth keyboard on an actual device.
* 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. Testing only in landscape orientation is fine for this challenge.
Your submission should run in both Android and iOS.
Tests
Tests are not required for this challenge
General UI
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 external 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)
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 patchfile to the git repository that the reviewers can apply without error and then run to see the required updates.
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.