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 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 finish implementation of the React Native layout support.

Already done:


Initial support is already done for examples from this article:

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

A previous challenge implemented these, at commit hash 8c05c61c4a0cdafb41d285310268e0418004549c
* VerticalStackLayoutFlex.js
* VerticalStackLayoutHeaderContentFooter.js
* VerticalStackLayoutManual.js
* HorizontalStackLayout.js
* AlignItems.js
* AlignItemsStretch.js
* JustifyContent.js

Requirements:

We recently built a small React Native app that implements a demo that shows a large number of different layout options.  This challenge will finish supporting the layout options and will implement a new app that matches the demo app, which will be provided in the forum.  The end goal of this challenge is to support all the various layout options used by React Native.

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.  This is needed if you make changes to the example provided in the forum, but if you don't change the example at all, no native validation information is required, since the reviewers can just run the example.

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.
 
Submission

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

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
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

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

REVIEW STYLE:

Final Review:

Community Review Board

Approval:

User Sign-Off

SHARE:

ID: 30056893