Hercules React Native to XRE - Initial layout handling

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 piece 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 start to implement some of the layouts required for React Native, translating relative layouts on the server-side to absolute layouts on the XRE client-side. 

Requirements:

We are going to focus on the examples in this article, to start:

https://code.tutsplus.com/tutorials/get-started-with-layouts-in-react-native--cms-27418

There are a number of small layouts in the code for this article, which can be found here:

https://github.com/tutsplus/get-started-with-react-native-layouts/tree/master/app/components/layouts

For this challenge, we are going to implement the necessary handling for some of these to be able to run on XRE:

* VerticalStackLayoutFlex.js
* VerticalStackLayoutHeaderContentFooter.js
* VerticalStackLayoutManual.js
* HorizontalStackLayout.js
* AlignItems.js
* AlignItemsStretch.js
* JustifyContent.js

Each one can be a different app available for testing on an XRE receiver configured for that specific app.

Server-side management

Note that the server will have to keep state about the client layout, which is fine.  We just need to make sure that this is per session, since different users may do actions that affect the layout from the initial to a new layout in some way.  The layouts will need to function just like React Native layouts in how they are dynamic.

Native validation

To prove out the solution, we need to ensure that a native mobile build of an 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.
 

 

Final Submission Guidelines

Please see above