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. One piece we're working is some specific client requirements. This challenge will implement a React Native app or set of apps that cover the requirements below.
Note
This challenge is *only* React Native. We will do work to translate it to the XRE stuff later, so all you need to do is implement the React Native requirements covered below. Note that your solution should cover different cases and combinations of options, not just the explicit items mentioned below.
Requirements
This challenge will focus on text and images and specific layouts that are used in client applications. An example client application that's written in XRE will be provided in the forum. You should look at that to get examples beyond what are provided below.
These components are needed and will be part of the additional "Grid Guide" requirement below
1. On the client application, the "Info" panel has a few specific quirks that we need to demo:
* The description paragraph can be a mixture of images and text. In the example below, "NEW" is an image
* The description text will auto-wrap and auto-truncate. Note the last word - "Afte...".
2. Text masking is another important subject with the client. In the screenshot below, note that the text is "Forensic Files", but it fades out at the end of "Files". This is done with an overlay mask image to fade out the text. We need to show this in our React Native app
Grid guide
The above components are pieces of the "grid guide" page in the main XRE app. This challenge will use the components above to build out a simple copy of the grid page. A testable example will be provided in the forum, but for this challenge we wnat to show:
* Navigation of the grid guide using left, right, up, and down
* Updating the info panel at the bottom as the navigation changes
* Scrolling of the grid guide
* The fading at the end of individual cells for long-titled shows
You can hard-code in the data shown, but make sure it reasonably matches the grid guide given in the forum.
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. We will use the output of this challenge to build in the additional handling into our XRE layer, making sure to compare the output from XRE to the output displayed in this sample app.
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.
Note
This challenge is *only* React Native. We will do work to translate it to the XRE stuff later, so all you need to do is implement the React Native requirements covered below. Note that your solution should cover different cases and combinations of options, not just the explicit items mentioned below.
Requirements
This challenge will focus on text and images and specific layouts that are used in client applications. An example client application that's written in XRE will be provided in the forum. You should look at that to get examples beyond what are provided below.
These components are needed and will be part of the additional "Grid Guide" requirement below
1. On the client application, the "Info" panel has a few specific quirks that we need to demo:
* The description paragraph can be a mixture of images and text. In the example below, "NEW" is an image
* The description text will auto-wrap and auto-truncate. Note the last word - "Afte...".
2. Text masking is another important subject with the client. In the screenshot below, note that the text is "Forensic Files", but it fades out at the end of "Files". This is done with an overlay mask image to fade out the text. We need to show this in our React Native app
Grid guide
The above components are pieces of the "grid guide" page in the main XRE app. This challenge will use the components above to build out a simple copy of the grid page. A testable example will be provided in the forum, but for this challenge we wnat to show:
* Navigation of the grid guide using left, right, up, and down
* Updating the info panel at the bottom as the navigation changes
* Scrolling of the grid guide
* The fading at the end of individual cells for long-titled shows
You can hard-code in the data shown, but make sure it reasonably matches the grid guide given in the forum.
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. We will use the output of this challenge to build in the additional handling into our XRE layer, making sure to compare the output from XRE to the output displayed in this sample app.
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.