Added support of `direction` style property

Summary: Now layout direction (LTR or LTR) can be specified not only for whole app but also for view subtree via `direction` style property.

Reviewed By: mmmulani

Differential Revision: D4510206

fbshipit-source-id: 4e56c5886b6e42f2343165eb76be897e681c5ba4

Examples/UIExplorer/UIExplorerIntegrationTests/UIExplorerSnapshotTests.m

@@ -43,6 +43,7 @@
 
 RCT_TEST(ViewExample)
 RCT_TEST(LayoutExample)
+RCT_TEST(ScrollViewExample)
 RCT_TEST(TextExample)
 #if !TARGET_OS_TV
 // No switch or slider available on tvOS

Examples/UIExplorer/js/ScrollViewExample.js

@@ -33,7 +33,7 @@ var {
   Image
 } = ReactNative;
 
-exports.displayName = (undefined: ?string);
+exports.displayName = 'ScrollViewExample';
 exports.title = '<ScrollView>';
 exports.description = 'Component that enables scrolling through child components';
 exports.examples = [
@@ -50,7 +50,7 @@ exports.examples = [
           onScroll={() => { console.log('onScroll!'); }}
           scrollEventThrottle={200}
           style={styles.scrollView}>
-          {THUMBS.map(createThumbRow)}
+          {THUMB_URLS.map(createThumbRow)}
         </ScrollView>
         <TouchableOpacity
           style={styles.button}
@@ -69,26 +69,37 @@ exports.examples = [
   title: '<ScrollView> (horizontal = true)',
   description: 'You can display <ScrollView>\'s child components horizontally rather than vertically',
   render: function() {
-    var _scrollView: ScrollView;
+
+    function renderScrollView(title: string, addtionalStyles: StyleSheet) {
+      var _scrollView: ScrollView;
+      return (
+        <View style={addtionalStyles}>
+          <Text style={styles.text}>{title}</Text>
+          <ScrollView
+            ref={(scrollView) => { _scrollView = scrollView; }}
+            automaticallyAdjustContentInsets={false}
+            horizontal={true}
+            style={[styles.scrollView, styles.horizontalScrollView]}>
+            {THUMB_URLS.map(createThumbRow)}
+          </ScrollView>
+          <TouchableOpacity
+            style={styles.button}
+            onPress={() => { _scrollView.scrollTo({x: 0}); }}>
+            <Text>Scroll to start</Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            style={styles.button}
+            onPress={() => { _scrollView.scrollToEnd({animated: true}); }}>
+            <Text>Scroll to end</Text>
+          </TouchableOpacity>
+        </View>
+      );
+    }
+
     return (
       <View>
-        <ScrollView
+        {renderScrollView('LTR layout', {direction: 'ltr'})}
-          ref={(scrollView) => { _scrollView = scrollView; }}
+        {renderScrollView('RTL layout', {direction: 'rtl'})}
-          automaticallyAdjustContentInsets={false}
-          horizontal={true}
-          style={[styles.scrollView, styles.horizontalScrollView]}>
-          {THUMBS.map(createThumbRow)}
-        </ScrollView>
-        <TouchableOpacity
-          style={styles.button}
-          onPress={() => { _scrollView.scrollTo({x: 0}); }}>
-          <Text>Scroll to start</Text>
-        </TouchableOpacity>
-        <TouchableOpacity
-          style={styles.button}
-          onPress={() => { _scrollView.scrollToEnd({animated: true}); }}>
-          <Text>Scroll to end</Text>
-        </TouchableOpacity>
       </View>
     );
   }
@@ -101,49 +112,59 @@ class Thumb extends React.Component {
 
   render() {
     return (
-      <View style={styles.button}>
+      <View style={styles.thumb}>
-        <Image style={styles.img} source={{uri:this.props.uri}} />
+        <Image style={styles.img} source={this.props.source} />
       </View>
     );
   }
 }
 
-var THUMBS = ['https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851549_767334479959628_274486868_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851561_767334496626293_1958532586_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851579_767334503292959_179092627_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851589_767334513292958_1747022277_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851563_767334559959620_1193692107_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851593_767334566626286_1953955109_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851591_767334523292957_797560749_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851567_767334529959623_843148472_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851548_767334489959627_794462220_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851575_767334539959622_441598241_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-ash3/t39.1997/p128x128/851573_767334549959621_534583464_n.png', 'https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-prn1/t39.1997/p128x128/851583_767334573292952_1519550680_n.png'];
+var THUMB_URLS = [
-THUMBS = THUMBS.concat(THUMBS); // double length of THUMBS
+  require('./Thumbnails/like.png'),
-var createThumbRow = (uri, i) => <Thumb key={i} uri={uri} />;
+  require('./Thumbnails/dislike.png'),
+  require('./Thumbnails/call.png'),
+  require('./Thumbnails/fist.png'),
+  require('./Thumbnails/bandaged.png'),
+  require('./Thumbnails/flowers.png'),
+  require('./Thumbnails/heart.png'),
+  require('./Thumbnails/liking.png'),
+  require('./Thumbnails/party.png'),
+  require('./Thumbnails/poke.png'),
+  require('./Thumbnails/superlike.png'),
+  require('./Thumbnails/victory.png'),
+];
+
+THUMB_URLS = THUMB_URLS.concat(THUMB_URLS); // double length of THUMB_URLS
+
+var createThumbRow = (uri, i) => <Thumb key={i} source={uri} />;
 
 var styles = StyleSheet.create({
   scrollView: {
-    backgroundColor: '#6A85B1',
+    backgroundColor: '#eeeeee',
     height: 300,
   },
   horizontalScrollView: {
-    height: 120,
+    height: 106,
-  },
-  containerPage: {
-    height: 50,
-    width: 50,
-    backgroundColor: '#527FE4',
-    padding: 5,
   },
   text: {
-    fontSize: 20,
+    fontSize: 16,
-    color: '#888888',
+    fontWeight: 'bold',
-    left: 80,
+    margin: 5,
-    top: 20,
+    textAlign: 'left',
-    height: 40,
   },
   button: {
-    margin: 7,
+    margin: 5,
     padding: 5,
     alignItems: 'center',
-    backgroundColor: '#eaeaea',
+    backgroundColor: '#cccccc',
     borderRadius: 3,
   },
-  buttonContents: {
+  thumb: {
-    flexDirection: 'row',
+    margin: 5,
-    width: 64,
+    padding: 5,
-    height: 64,
+    backgroundColor: '#cccccc',
+    borderRadius: 3,
+    minWidth: 96,
   },
   img: {
     width: 64,

Libraries/StyleSheet/LayoutPropTypes.js

@@ -470,6 +470,18 @@ var LayoutPropTypes = {
    *  more details.
    */
   zIndex: ReactPropTypes.number,
+
+  /** `direction` specifies the directional flow of the user interface.
+   *  The default is `inherit`, except for root node which will have
+   *  value based on the current locale.
+   *  See https://facebook.github.io/yoga/docs/rtl/
+   *  for more details.
+   */
+  direction: ReactPropTypes.oneOf([
+    'inherit',
+    'ltr',
+    'rtl',
+  ]),
 };
 
 module.exports = LayoutPropTypes;

React/Base/RCTConvert.h

@@ -118,6 +118,7 @@ typedef BOOL css_backface_visibility_t;
 + (YGAlign)YGAlign:(id)json;
 + (YGPositionType)YGPositionType:(id)json;
 + (YGWrap)YGWrap:(id)json;
++ (YGDirection)YGDirection:(id)json;
 
 + (RCTPointerEvents)RCTPointerEvents:(id)json;
 + (RCTAnimationType)RCTAnimationType:(id)json;

React/Base/RCTConvert.m

@@ -667,6 +667,12 @@ RCT_ENUM_CONVERTER(YGAlign, (@{
   @"baseline": @(YGAlignBaseline)
 }), YGAlignFlexStart, intValue)
 
+RCT_ENUM_CONVERTER(YGDirection, (@{
+  @"inherit": @(YGDirectionInherit),
+  @"ltr": @(YGDirectionLTR),
+  @"rtl": @(YGDirectionRTL),
+}), YGDirectionInherit, intValue)
+
 RCT_ENUM_CONVERTER(YGPositionType, (@{
   @"absolute": @(YGPositionTypeAbsolute),
   @"relative": @(YGPositionTypeRelative)

React/Views/RCTRootShadowView.m

@@ -7,9 +7,10 @@
  * of patent rights can be found in the PATENTS file in the same directory.
  */
 
-#import "RCTI18nUtil.h"
 #import "RCTRootShadowView.h"
 
+#import "RCTI18nUtil.h"
+
 @implementation RCTRootShadowView
 
 /**
@@ -20,9 +21,7 @@
 {
   self = [super init];
   if (self) {
-    if ([[RCTI18nUtil sharedInstance] isRTL]) {
+    self.direction = [[RCTI18nUtil sharedInstance] isRTL] ? YGDirectionRTL : YGDirectionLTR;
-      YGNodeStyleSetDirection(self.cssNode, YGDirectionRTL);
-    }
   }
   return self;
 }

React/Views/RCTShadowView.h

@@ -146,6 +146,11 @@ typedef void (^RCTApplierBlock)(NSDictionary<NSNumber *, UIView *> *viewRegistry
  */
 @property (nonatomic, assign) NSInteger zIndex;
 
+/**
+ * Interface direction (LTR or RTL)
+ */
+@property (nonatomic, assign) YGDirection direction;
+
 /**
  * Clipping properties
  */

React/Views/RCTShadowView.m

@@ -665,6 +665,7 @@ RCT_STYLE_PROPERTY(AlignItems, alignItems, AlignItems, YGAlign)
 RCT_STYLE_PROPERTY(Position, position, PositionType, YGPositionType)
 RCT_STYLE_PROPERTY(FlexWrap, flexWrap, FlexWrap, YGWrap)
 RCT_STYLE_PROPERTY(Overflow, overflow, Overflow, YGOverflow)
+RCT_STYLE_PROPERTY(Direction, direction, Direction, YGDirection)
 RCT_STYLE_PROPERTY(AspectRatio, aspectRatio, AspectRatio, float)
 
 - (void)setBackgroundColor:(UIColor *)color

React/Views/RCTViewManager.m

@@ -317,5 +317,6 @@ RCT_EXPORT_SHADOW_PROPERTY(overflow, YGOverflow)
 RCT_EXPORT_SHADOW_PROPERTY(onLayout, RCTDirectEventBlock)
 
 RCT_EXPORT_SHADOW_PROPERTY(zIndex, NSInteger)
+RCT_EXPORT_SHADOW_PROPERTY(direction, YGDirection)
 
 @end