Hercules React Native to XRE - ListView and ScrollView support

Key Information

Register
Submit
The challenge is finished.

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.  They would like to see if we can build a React Native translator that sits on a server and communicates with clients, sending them XRE messages to draw the React Native components.

Basically, we are going to stream apps to a client and update the client based on actions that raise events from the client to the server.

This challenge will implement ListView and ScrollView support (as best we can) into the React-->XRE translation piece.

Requirements:


This challenge will implement ListView and ScrollView support for React-->XRE.  Note that this is designed for touch support on mobile devices, so we'll need to be a bit creative on the XRE side.

We must support these for scrolling.  Note that having a mouse is not a production use, but the XRE receiver does support mouse buttons and the scrollwheel.  In production, the apps will only be navigated by keyboard or remote control, so keyboard-only functionality must be fully tested.

* Mouse and scrollwheel
* Keyboard / remote control

REVIEWERS - Please test both mouse AND keyboard in the XRE receiver for all submissions

Sample app

A sample app has been provided in the forum and can be used as the sample for this challenge.  Note that it may have to be tweaked a bit for the XRE integration, but if you make changes please make sure to clearly document what changed and why in the README.  The goal is to identify any potential issues that would cause compatibilty issues with "real" React Native apps.

Note that any sample must be navigable by the keyboard.  Right now we have support for these keys:

* left
* right
* up 
* down
* enter
* escape


Native validation

To prove out the solution, we need to ensure that a native mobile build of the test app matches what is displayed in XRE.  Please provide documentation on how to compile each example and run it in Android or iOS, and please also provide this information as part of your submission video.

Background

The server side "screens" will be implemented in React Native, using React classes. 
The goal is to make sure the React Native definition is generic, not custom to XRE.  The normal React Native development process will apply on the server.

Deployment

The README must be brought up to date with the latest changes and must clearly cover deployment to Heroku.  Submitters are required to document the Heroku deploy clearly and test this.

REVIEWERS - Please make sure to deploy each submission to Heroku and test from there.
 
Submission

Your submission should be a patch file in Git against commit hash 
e5a0903bf351211458e88723b4d3fd178644119f

NOTE:  You are free to change, reorganize, and refactor the code as you see fit.  You are not required to stick to any past decisions on architecture.

Please make sure your updated README covers:

1.  How to deploy the server-side to Heroku (REQUIRED FOR TESTING BY REVIEWERS AND SUBMITTERS)
2.  How to configure the client XRE receiver to connect to the server and work with the different apps available
3.  What the React Native app looks like and how the scrolling works

A video is required, but it only needs to cover the validation (XRE and native), not the setup.  Having the setup details only in the README is fine.

Links:


https://facebook.github.io/react-native/���
https://www.youtube.com/watch?v=hDviGU-57lU
 


Final Submission Guidelines

Please see above

ELIGIBLE EVENTS:

2017 TopCoder(R) Open

REVIEW STYLE:

Final Review:

Community Review Board

Approval:

User Sign-Off

SHARE:

ID: 30057118