diff --git a/ios/sdk/WeexSDK/Sources/Layout/WXComponent+Layout.m b/ios/sdk/WeexSDK/Sources/Layout/WXComponent+Layout.m
index 44aef1cc36..db40bc03c0 100644
--- a/ios/sdk/WeexSDK/Sources/Layout/WXComponent+Layout.m
+++ b/ios/sdk/WeexSDK/Sources/Layout/WXComponent+Layout.m
@@ -35,13 +35,23 @@ @implementation WXComponent (Layout)
 
 - (void)setNeedsLayout
 {
-    _isLayoutDirty = YES;
     WXComponent *supercomponent = [self supercomponent];
     if(supercomponent){
+        for (WXComponent *siblingComponent in [supercomponent subcomponents]) {
+            [siblingComponent _needRecalculateLayout];
+        }
         [supercomponent setNeedsLayout];
+    } else {
+        [self _needRecalculateLayout];
     }
 }
 
+- (void)_needRecalculateLayout
+{
+    _isLayoutDirty = YES;
+    [self _clearLayoutCSS];
+}
+
 - (BOOL)needsLayout
 {
     return _isLayoutDirty;
@@ -208,6 +218,23 @@ - (void)_layoutDidFinish
     [self layoutDidFinish];
 }
 
+/**
+ * clear the layout variables on css node
+ **/
+- (void)_clearLayoutCSS {
+    memset(&(_cssNode->layout), 0, sizeof(_cssNode->layout));
+    _cssNode->layout.dimensions[CSS_WIDTH] = CSS_UNDEFINED;
+    _cssNode->layout.dimensions[CSS_HEIGHT] = CSS_UNDEFINED;
+    
+    // Such that the comparison is always going to be false
+    _cssNode->layout.last_requested_dimensions[CSS_WIDTH] = -1;
+    _cssNode->layout.last_requested_dimensions[CSS_HEIGHT] = -1;
+    _cssNode->layout.last_parent_max_width = -1;
+    _cssNode->layout.last_parent_max_height = -1;
+    _cssNode->layout.last_direction = (css_direction_t)-1;
+    _cssNode->layout.should_update = true;
+}
+
 #define WX_STYLE_FILL_CSS_NODE(key, cssProp, type)\
 do {\
     id value = styles[@#key];\
@@ -248,6 +275,7 @@ - (CGFloat)WXPixelType:(id)value
 
 - (void)_fillCSSNode:(NSDictionary *)styles
 {
+    WX_STYLE_FILL_CSS_NODE(direction, direction, css_direction_t)
     // flex
     WX_STYLE_FILL_CSS_NODE(flex, flex, CGFloat)
     WX_STYLE_FILL_CSS_NODE(flexDirection, flex_direction, css_flex_direction_t)
@@ -311,6 +339,7 @@ - (void)_fillCSSNode:(NSDictionary *)styles
 
 - (void)_resetCSSNode:(NSArray *)styles;
 {
+    WX_STYLE_RESET_CSS_NODE(direction, direction, CSS_DIRECTION_LTR)
     // flex
     WX_STYLE_RESET_CSS_NODE(flex, flex, 0.0)
     WX_STYLE_RESET_CSS_NODE(flexDirection, flex_direction, CSS_FLEX_DIRECTION_COLUMN)
diff --git a/ios/sdk/WeexSDK/Sources/Utility/WXConvert.h b/ios/sdk/WeexSDK/Sources/Utility/WXConvert.h
index 25c6430d2e..775fa05bb0 100644
--- a/ios/sdk/WeexSDK/Sources/Utility/WXConvert.h
+++ b/ios/sdk/WeexSDK/Sources/Utility/WXConvert.h
@@ -40,6 +40,7 @@ typedef CGFloat WXPixelType;
 // @parameter scaleFactor: please use weexInstance's pixelScaleFactor property
 + (WXPixelType)WXPixelType:(id)value scaleFactor:(CGFloat)scaleFactor;
 
++ (css_direction_t)css_direction_t:(id)value;
 + (css_flex_direction_t)css_flex_direction_t:(id)value;
 + (css_align_t)css_align_t:(id)value;
 + (css_wrap_type_t)css_wrap_type_t:(id)value;
diff --git a/ios/sdk/WeexSDK/Sources/Utility/WXConvert.m b/ios/sdk/WeexSDK/Sources/Utility/WXConvert.m
index f7e82f6f61..2744e60e54 100644
--- a/ios/sdk/WeexSDK/Sources/Utility/WXConvert.m
+++ b/ios/sdk/WeexSDK/Sources/Utility/WXConvert.m
@@ -146,6 +146,20 @@ + (WXPixelType)WXPixelType:(id)value scaleFactor:(CGFloat)scaleFactor
 
 #pragma mark CSS Layout
 
++ (css_direction_t)css_direction_t:(id)value
+{
+    if([value isKindOfClass:[NSString class]]){
+        if ([value isEqualToString:@"inherit"]) {
+            return CSS_DIRECTION_INHERIT;
+        } else if ([value isEqualToString:@"ltr"]) {
+            return CSS_DIRECTION_LTR;
+        } else if ([value isEqualToString:@"rtl"]) {
+            return CSS_DIRECTION_RTL;
+        }
+    }
+    return CSS_DIRECTION_LTR;
+}
+
 +(css_position_type_t)css_position_type_t:(id)value
 {
     if([value isKindOfClass:[NSString class]]){
diff --git a/ios/sdk/WeexSDKTests/WXConvertTests.m b/ios/sdk/WeexSDKTests/WXConvertTests.m
index 8b339224ff..a773775b6b 100644
--- a/ios/sdk/WeexSDKTests/WXConvertTests.m
+++ b/ios/sdk/WeexSDKTests/WXConvertTests.m
@@ -36,6 +36,14 @@ - (void)tearDown {
     [super tearDown];
 }
 
+- (void)testDirection {
+    NSArray *testDirections = @[@"inherit", @"ltr", @"rtl"];
+    css_direction_t directions[3] = {CSS_DIRECTION_INHERIT, CSS_DIRECTION_LTR, CSS_DIRECTION_RTL};
+    for (int i = 0; i<testDirections.count; i++) {
+        XCTAssertTrue([WXConvert wx_css_direction_t:testDirections[i]] == directions[i]);
+    }
+}
+
 - (void)testBOOL {
     // This is an example of a functional test case.
     // Use XCTAssert and related functions to verify your tests produce the correct results.