Add support for reverse flex directions on Android and iOS

Summary:
This PR adds support for both 'row-reverse' and 'column-reverse' for Android and iOS and is based on the changes in #6683 that looked like it's all but abandoned.
It also adds examples for the new directions to the "Layout - Flexbox" section of UIExplorer as well as some rad new colors to the section to make the difference between "row-reverse" and "flex-end" more apparent.

**Test plan (required)**
Tested inside of UIExplorer

Android
<img width="571" alt="screen shot 2016-06-05 at 7 42 14 pm" src="https://cloud.githubusercontent.com/assets/4332237/15807140/cf8e05de-2b55-11e6-9366-a2e3194cabf8.png">

iOS
<img width="578" alt="screen shot 2016-06-05 at 7 41 35 pm" src="https://cloud.githubusercontent.com/assets/4332237/15807143/dee8e9b8-2b55-11e6-8777-c30329fa54e8.png">
Closes https://github.com/facebook/react-native/pull/7938

Differential Revision: D3417182

fbshipit-source-id: e8c9f5976ca95b2d2069a5b31a20f6d6309eb3cc

ReactAndroid/src/main/java/com/facebook/react/uimanager/LayoutShadowNode.java

@@ -60,7 +60,7 @@ public class LayoutShadowNode extends ReactShadowNode {
   public void setFlexDirection(@Nullable String flexDirection) {
     setFlexDirection(
         flexDirection == null ? CSSFlexDirection.COLUMN : CSSFlexDirection.valueOf(
-            flexDirection.toUpperCase(Locale.US)));
+            flexDirection.toUpperCase(Locale.US).replace("-", "_")));
   }
 
   @ReactProp(name = ViewProps.FLEX_WRAP)