diff --git a/Libraries/Text/RCTShadowText.m b/Libraries/Text/RCTShadowText.m
index 00770dea9..fe2b03772 100644
--- a/Libraries/Text/RCTShadowText.m
+++ b/Libraries/Text/RCTShadowText.m
@@ -38,7 +38,7 @@ static CGFloat const kAutoSizeGranularity = 0.001f;
CGFloat _cachedTextStorageWidthMode;
NSAttributedString *_cachedAttributedString;
CGFloat _effectiveLetterSpacing;
- UIUserInterfaceLayoutDirection _cachedEffectiveLayoutDirection;
+ UIUserInterfaceLayoutDirection _cachedLayoutDirection;
}
static YGSize RCTMeasure(YGNodeRef node, float width, YGMeasureMode widthMode, float height, YGMeasureMode heightMode)
@@ -72,7 +72,7 @@ static YGSize RCTMeasure(YGNodeRef node, float width, YGMeasureMode widthMode, f
_fontSizeMultiplier = 1.0;
_textAlign = NSTextAlignmentNatural;
_writingDirection = NSWritingDirectionNatural;
- _cachedEffectiveLayoutDirection = UIUserInterfaceLayoutDirectionLeftToRight;
+ _cachedLayoutDirection = UIUserInterfaceLayoutDirectionLeftToRight;
YGNodeSetMeasureFunc(self.yogaNode, RCTMeasure);
@@ -198,7 +198,7 @@ static YGSize RCTMeasure(YGNodeRef node, float width, YGMeasureMode widthMode, f
_cachedTextStorage &&
(width == _cachedTextStorageWidth || (isnan(width) && isnan(_cachedTextStorageWidth))) &&
widthMode == _cachedTextStorageWidthMode &&
- _cachedEffectiveLayoutDirection == self.effectiveLayoutDirection
+ _cachedLayoutDirection == self.layoutDirection
) {
return _cachedTextStorage;
}
@@ -272,12 +272,12 @@ static YGSize RCTMeasure(YGNodeRef node, float width, YGMeasureMode widthMode, f
if (
![self isTextDirty] &&
_cachedAttributedString &&
- _cachedEffectiveLayoutDirection == self.effectiveLayoutDirection
+ _cachedLayoutDirection == self.layoutDirection
) {
return _cachedAttributedString;
}
- _cachedEffectiveLayoutDirection = self.effectiveLayoutDirection;
+ _cachedLayoutDirection = self.layoutDirection;
if (_fontSize && !isnan(_fontSize)) {
fontSize = @(_fontSize);
@@ -419,7 +419,7 @@ static YGSize RCTMeasure(YGNodeRef node, float width, YGMeasureMode widthMode, f
// Text alignment
NSTextAlignment textAlign = _textAlign;
if (textAlign == NSTextAlignmentRight || textAlign == NSTextAlignmentLeft) {
- if (_cachedEffectiveLayoutDirection == UIUserInterfaceLayoutDirectionRightToLeft) {
+ if (_cachedLayoutDirection == UIUserInterfaceLayoutDirectionRightToLeft) {
if (textAlign == NSTextAlignmentRight) {
textAlign = NSTextAlignmentLeft;
} else {
diff --git a/RNTester/js/TextExample.ios.js b/RNTester/js/TextExample.ios.js
index 5e5cee093..1980ced73 100644
--- a/RNTester/js/TextExample.ios.js
+++ b/RNTester/js/TextExample.ios.js
@@ -15,13 +15,56 @@ const Platform = require('Platform');
var React = require('react');
var createReactClass = require('create-react-class');
var ReactNative = require('react-native');
-var {
- Image,
- StyleSheet,
- Text,
- View,
- LayoutAnimation,
-} = ReactNative;
+var {Image, Text, View, LayoutAnimation, Button} = ReactNative;
+
+type TextAlignExampleRTLState = {|
+ isRTL: boolean,
+|};
+
+class TextAlignRTLExample extends React.Component<*, TextAlignExampleRTLState> {
+ constructor(...args: Array<*>) {
+ super(...args);
+
+ this.state = {
+ isRTL: false,
+ };
+ }
+
+ render() {
+ const {isRTL} = this.state;
+ const toggleRTL = () => this.setState({isRTL: !isRTL});
+ return (
+
+ auto (default) - english LTR
+
+ {'\u0623\u062D\u0628 \u0627\u0644\u0644\u063A\u0629 ' +
+ '\u0627\u0644\u0639\u0631\u0628\u064A\u0629 auto (default) - arabic RTL'}
+
+
+ left left left left left left left left left left left left left left
+ left
+
+
+ center center center center center center center center center center
+ center
+
+
+ right right right right right right right right right right right
+ right right
+
+
+ justify: this text component{"'"}s contents are laid out with
+ "textAlign: justify" and as you can see all of the lines except the
+ last one span the available width of the parent container.
+
+
+
+ );
+ }
+}
class Entity extends React.Component<$FlowFixMeProps> {
render() {
@@ -38,25 +81,31 @@ class AttributeToggler extends React.Component<{}, $FlowFixMeState> {
toggleWeight = () => {
this.setState({
- fontWeight: this.state.fontWeight === 'bold' ? 'normal' : 'bold'
+ fontWeight: this.state.fontWeight === 'bold' ? 'normal' : 'bold',
});
};
increaseSize = () => {
this.setState({
- fontSize: this.state.fontSize + 1
+ fontSize: this.state.fontSize + 1,
});
};
render() {
- var curStyle = {fontWeight: this.state.fontWeight, fontSize: this.state.fontSize};
+ var curStyle = {
+ fontWeight: this.state.fontWeight,
+ fontSize: this.state.fontSize,
+ };
return (
Tap the controls below to change attributes.
- See how it will even work on this nested text
+
+ See how it will even work on{' '}
+ this nested text
+ {
var AdjustingFontSize = createReactClass({
displayName: 'AdjustingFontSize',
getInitialState: function() {
- return {dynamicText:'', shouldRender: true,};
+ return {dynamicText: '', shouldRender: true};
},
reset: function() {
LayoutAnimation.easeInEaseOut();
this.setState({
shouldRender: false,
});
- setTimeout(()=>{
+ setTimeout(() => {
LayoutAnimation.easeInEaseOut();
this.setState({
dynamicText: '',
@@ -93,492 +142,621 @@ var AdjustingFontSize = createReactClass({
},
addText: function() {
this.setState({
- dynamicText: this.state.dynamicText + (Math.floor((Math.random() * 10) % 2) ? ' foo' : ' bar'),
+ dynamicText:
+ this.state.dynamicText +
+ (Math.floor((Math.random() * 10) % 2) ? ' foo' : ' bar'),
});
},
removeText: function() {
this.setState({
- dynamicText: this.state.dynamicText.slice(0, this.state.dynamicText.length - 4),
+ dynamicText: this.state.dynamicText.slice(
+ 0,
+ this.state.dynamicText.length - 4,
+ ),
});
},
render: function() {
-
if (!this.state.shouldRender) {
- return ();
+ return ;
}
return (
-
+
Truncated text is baaaaad.
-
+
Shrinking to fit available space is much better!
-
- {'Add text to me to watch me shrink!' + ' ' + this.state.dynamicText}
+
+ {'Add text to me to watch me shrink!' + ' ' + this.state.dynamicText}
-
- {'Multiline text component shrinking is supported, watch as this reeeeaaaally loooooong teeeeeeext grooooows and then shriiiinks as you add text to me! ioahsdia soady auydoa aoisyd aosdy ' + ' ' + this.state.dynamicText}
+
+ {'Multiline text component shrinking is supported, watch as this reeeeaaaally loooooong teeeeeeext grooooows and then shriiiinks as you add text to me! ioahsdia soady auydoa aoisyd aosdy ' +
+ ' ' +
+ this.state.dynamicText}
-
-
+
+
{'Differently sized nested elements will shrink together. '}
-
+
{'LARGE TEXT! ' + this.state.dynamicText}
-
-
+
+
Reset
-
+
Remove Text
-
+
Add Text
);
- }
+ },
});
exports.title = '';
exports.description = 'Base component for rendering styled text.';
exports.displayName = 'TextExample';
exports.examples = [
-{
- title: 'Wrap',
- render: function() {
- return (
-
- The text should wrap if it goes on multiple lines. See, this is going to
- the next line.
-
- );
- },
-}, {
- title: 'Padding',
- render: function() {
- return (
-
- This text is indented by 10px padding on all sides.
-
- );
- },
-}, {
- title: 'Font Family',
- render: function() {
- return (
-
-
- Cochin
-
-
- Cochin bold
-
-
- Helvetica
-
-
- Helvetica bold
-
-
- Verdana
-
-
- Verdana bold
-
-
- );
- },
-}, {
- title: 'Font Size',
- render: function() {
- return (
-
-
- Size 23
-
-
- Size 8
-
-
- );
- },
-}, {
- title: 'Color',
- render: function() {
- return (
-
-
- Red color
-
-
- Blue color
-
-
- );
- },
-}, {
- title: 'Font Weight',
- render: function() {
- return (
-
-
- Move fast and be ultralight
-
-
- Move fast and be light
-
-
- Move fast and be normal
-
-
- Move fast and be bold
-
-
- Move fast and be ultrabold
-
-
- );
- },
-}, {
- title: 'Font Style',
- render: function() {
- return (
-
-
- Normal text
-
-
- Italic text
-
-
- );
- },
-}, {
- title: 'Selectable',
- render: function() {
- return (
-
-
- This text is selectable if you click-and-hold.
-
-
- );
- },
-}, {
- title: 'Text Decoration',
- render: function() {
- return (
-
-
- Solid underline
-
-
- Double underline with custom color
-
-
- Dashed underline with custom color
-
-
- Dotted underline with custom color
-
-
- None textDecoration
-
-
- Solid line-through
-
-
- Double line-through with custom color
-
-
- Dashed line-through with custom color
-
-
- Dotted line-through with custom color
-
-
- Both underline and line-through
-
-
- );
- },
-}, {
- title: 'Nested',
- description: 'Nested text components will inherit the styles of their ' +
- 'parents (only backgroundColor is inherited from non-Text parents). ' +
- ' only supports other and raw text (strings) as children.',
- render: function() {
- return (
-
+ {
+ title: 'Wrap',
+ render: function() {
+ return (
- (Normal text,
-
- (and bold
-
- (and tiny inherited bold blue)
+ The text should wrap if it goes on multiple lines. See, this is going
+ to the next line.
+
+ );
+ },
+ },
+ {
+ title: 'Padding',
+ render: function() {
+ return (
+
+ This text is indented by 10px padding on all sides.
+
+ );
+ },
+ },
+ {
+ title: 'Font Family',
+ render: function() {
+ return (
+
+
+ Cochin
+
+
+ Cochin bold
+
+ Helvetica
+
+ Helvetica bold
+
+
+ Verdana
+
+
+ Verdana bold
+
+
+ );
+ },
+ },
+ {
+ title: 'Font Size',
+ render: function() {
+ return (
+
+ Size 23
+ Size 8
+
+ );
+ },
+ },
+ {
+ title: 'Color',
+ render: function() {
+ return (
+
+ Red color
+ Blue color
+
+ );
+ },
+ },
+ {
+ title: 'Font Weight',
+ render: function() {
+ return (
+
+
+ Move fast and be ultralight
+
+
+ Move fast and be light
+
+
+ Move fast and be normal
+
+
+ Move fast and be bold
+
+
+ Move fast and be ultrabold
+
+
+ );
+ },
+ },
+ {
+ title: 'Font Style',
+ render: function() {
+ return (
+
+ Normal text
+ Italic text
+
+ );
+ },
+ },
+ {
+ title: 'Selectable',
+ render: function() {
+ return (
+
+
+ This text is selectable if
+ you click-and-hold.
+
+
+ );
+ },
+ },
+ {
+ title: 'Text Decoration',
+ render: function() {
+ return (
+
+
+ Solid underline
+
+
+ Double underline with custom color
+
+
+ Dashed underline with custom color
+
+
+ Dotted underline with custom color
+
+ None textDecoration
+
+ Solid line-through
+
+
+ Double line-through with custom color
+
+
+ Dashed line-through with custom color
+
+
+ Dotted line-through with custom color
+
+
+ Both underline and line-through
+
+
+ );
+ },
+ },
+ {
+ title: 'Nested',
+ description:
+ 'Nested text components will inherit the styles of their ' +
+ 'parents (only backgroundColor is inherited from non-Text parents). ' +
+ ' only supports other and raw text (strings) as children.',
+ render: function() {
+ return (
+
+
+ (Normal text,
+
+ (and bold
+
+ (and tiny inherited bold blue)
+
+ )
)
- )
-
-
- (opacity
+
+ (opacity
(is inherited
-
- (and accumulated
-
- (and also applies to the background)
-
- )
+
+ (and accumulated
+
+ (and also applies to the background)
+ )
+
)
- )
-
-
- Entity Name
-
-
- );
+ )
+
+
+ Entity Name
+
+
+ );
+ },
},
-}, {
- title: 'Text Align',
- render: function() {
- return (
-
+ {
+ title: 'Text Align',
+ render: function() {
+ return (
+
+ auto (default) - english LTR
+
+ {'\u0623\u062D\u0628 \u0627\u0644\u0644\u063A\u0629 ' +
+ '\u0627\u0644\u0639\u0631\u0628\u064A\u0629 auto (default) - arabic ' +
+ 'RTL'}
+
+
+ left left left left left left left left left left left left left
+ left left
+
+
+ center center center center center center center center center
+ center center
+
+
+ right right right right right right right right right right right
+ right right
+
+
+ justify: this text component{"'"}s contents are laid out with
+ "textAlign: justify" and as you can see all of the lines except the
+ last one span the available width of the parent container.
+
+
+ );
+ },
+ },
+ {
+ title: 'Letter Spacing',
+ render: function() {
+ return (
+
+ letterSpacing = 0
+
+ letterSpacing = 2
+
+
+ letterSpacing = 9
+
+
+ letterSpacing = -1
+
+
+ );
+ },
+ },
+ {
+ title: 'Spaces',
+ render: function() {
+ return (
- auto (default) - english LTR
+ A {'generated'} {' '} {'string'} and some spaces
+ );
+ },
+ },
+ {
+ title: 'Line Height',
+ render: function() {
+ return (
- أحب اللغة العربية auto (default) - arabic RTL
+
+ A lot of space between the lines of this long passage that should
+ wrap once.
+
-
- left left left left left left left left left left left left left left left
-
-
- center center center center center center center center center center center
-
-
- right right right right right right right right right right right right right
-
-
- justify: this text component{"'"}s contents are laid out with "textAlign: justify"
- and as you can see all of the lines except the last one span the
- available width of the parent container.
-
-
- );
+ );
+ },
},
-}, {
- title: 'Letter Spacing',
- render: function() {
- return (
-
-
- letterSpacing = 0
-
-
- letterSpacing = 2
-
-
- letterSpacing = 9
-
-
- letterSpacing = -1
-
-
- );
+ {
+ title: 'Empty Text',
+ description: "It's ok to have Text with zero or null children.",
+ render: function() {
+ return ;
+ },
},
-}, {
- title: 'Spaces',
- render: function() {
- return (
-
- A {'generated'} {' '} {'string'} and some spaces
-
- );
+ {
+ title: 'Toggling Attributes',
+ render: function(): React.Element {
+ return ;
+ },
},
-}, {
- title: 'Line Height',
- render: function() {
- return (
-
-
- A lot of space between the lines of this long passage that should
- wrap once.
-
-
- );
- },
-}, {
- title: 'Empty Text',
- description: 'It\'s ok to have Text with zero or null children.',
- render: function() {
- return (
-
- );
- },
-}, {
- title: 'Toggling Attributes',
- render: function(): React.Element {
- return ;
- },
-}, {
- title: 'backgroundColor attribute',
- description: 'backgroundColor is inherited from all types of views.',
- render: function() {
- return (
-
- Yellow container background,
-
- {' '}red background,
-
- {' '}blue background,
-
- {' '}inherited blue background,
-
- {' '}nested green background.
+ {
+ title: 'backgroundColor attribute',
+ description: 'backgroundColor is inherited from all types of views.',
+ render: function() {
+ return (
+
+ Yellow container background,
+
+ {' '}
+ red background,
+
+ {' '}
+ blue background,
+
+ {' '}
+ inherited blue background,
+
+ {' '}
+ nested green background.
+
-
- );
+ );
+ },
},
-}, {
- title: 'numberOfLines attribute',
- render: function() {
- return (
-
-
- Maximum of one line, no matter how much I write here. If I keep writing, it{"'"}ll just truncate after one line.
-
-
- Maximum of two lines, no matter how much I write here. If I keep writing, it{"'"}ll just truncate after two lines.
-
-
- No maximum lines specified, no matter how much I write here. If I keep writing, it{"'"}ll just keep going and going.
-
-
- );
+ {
+ title: 'numberOfLines attribute',
+ render: function() {
+ return (
+
+
+ Maximum of one line, no matter how much I write here. If I keep
+ writing, it{"'"}ll just truncate after one line.
+
+
+ Maximum of two lines, no matter how much I write here. If I keep
+ writing, it{"'"}ll just truncate after two lines.
+
+
+ No maximum lines specified, no matter how much I write here. If I
+ keep writing, it{"'"}ll just keep going and going.
+
+
+ );
+ },
},
-}, {
- title: 'Text highlighting (tap the link to see highlight)',
- render: function() {
- return (
-
- Lorem ipsum dolor sit amet, null}>consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-
- );
+ {
+ title: 'Text highlighting (tap the link to see highlight)',
+ render: function() {
+ return (
+
+
+ Lorem ipsum dolor sit amet,{' '}
+ null}>
+ consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+ labore et dolore magna aliqua. Ut enim ad minim veniam, quis
+ nostrud
+ {' '}
+ exercitation ullamco laboris nisi ut aliquip ex ea commodo
+ consequat.
+
+
+ );
+ },
},
-}, {
- title: 'allowFontScaling attribute',
- render: function() {
- return (
-
-
- By default, text will respect Text Size accessibility setting on iOS.
- It means that all font sizes will be increased or descreased depending on the value of Text Size setting in
- {" "}Settings.app - Display & Brightness - Text Size
-
-
- You can disable scaling for your Text component by passing {"\""}allowFontScaling={"{"}false{"}\""} prop.
-
-
- This text will not scale.
-
-
- );
+ {
+ title: 'allowFontScaling attribute',
+ render: function() {
+ return (
+
+
+ By default, text will respect Text Size accessibility setting on
+ iOS. It means that all font sizes will be increased or descreased
+ depending on the value of Text Size setting in{' '}
+
+ Settings.app - Display & Brightness - Text Size
+
+
+
+ You can disable scaling for your Text component by passing {'"'}allowFontScaling={'{'}false{'}"'}{' '}
+ prop.
+
+
+ This text will not scale.
+
+
+ );
+ },
},
-}, {
- title: 'Inline views',
- render: function() {
- return (
-
-
- This text contains an inline blue view and
- an inline image . Neat, huh?
-
-
- );
+ {
+ title: 'Inline views',
+ render: function() {
+ return (
+
+
+ This text contains an inline blue view{' '}
+ {' '}
+ and an inline image{' '}
+ . Neat, huh?
+
+
+ );
+ },
},
-}, {
- title: 'Text shadow',
- render: function() {
- return (
-
-
- Demo text shadow
-
-
- );
+ {
+ title: 'Text shadow',
+ render: function() {
+ return (
+
+
+ Demo text shadow
+
+
+ );
+ },
},
-}, {
- title: 'Ellipsize mode',
- render: function() {
- return (
-
-
- This very long text should be truncated with dots in the end.
-
-
- This very long text should be truncated with dots in the middle.
-
-
- This very long text should be truncated with dots in the beginning.
-
-
- This very looooooooooooooooooooooooooooong text should be clipped.
-
-
- );
+ {
+ title: 'Ellipsize mode',
+ render: function() {
+ return (
+
+
+ This very long text should be truncated with dots in the end.
+
+
+ This very long text should be truncated with dots in the middle.
+
+
+ This very long text should be truncated with dots in the beginning.
+
+
+ This very looooooooooooooooooooooooooooong text should be clipped.
+
+
+ );
+ },
},
-}, {
- title: 'Font variants',
- render: function() {
- return (
-
-
- Small Caps{'\n'}
-
-
- Old Style nums 0123456789{'\n'}
-
-
- Lining nums 0123456789{'\n'}
-
-
- Tabular nums{'\n'}
- 1111{'\n'}
- 2222{'\n'}
-
-
- Proportional nums{'\n'}
- 1111{'\n'}
- 2222{'\n'}
-
-
- );
+ {
+ title: 'Font variants',
+ render: function() {
+ return (
+
+ Small Caps{'\n'}
+
+ Old Style nums 0123456789{'\n'}
+
+
+ Lining nums 0123456789{'\n'}
+
+
+ Tabular nums{'\n'}
+ 1111{'\n'}
+ 2222{'\n'}
+
+
+ Proportional nums{'\n'}
+ 1111{'\n'}
+ 2222{'\n'}
+
+
+ );
+ },
},
-}, {
- title: 'Dynamic Font Size Adjustment',
- render: function(): React.Element {
- return ;
+ {
+ title: 'Dynamic Font Size Adjustment',
+ render: function(): React.Element {
+ return ;
+ },
},
-}];
+ {
+ title: 'Text Align with RTL',
+ render: function() {
+ return ;
+ },
+ },
+];
diff --git a/React/Modules/RCTUIManager.m b/React/Modules/RCTUIManager.m
index 7a65a1fc3..e4bcc5830 100644
--- a/React/Modules/RCTUIManager.m
+++ b/React/Modules/RCTUIManager.m
@@ -497,7 +497,7 @@ static NSDictionary *deviceOrientationEventBody(UIDeviceOrientation orientation)
reactTags[index] = shadowView.reactTag;
frameDataArray[index++] = (RCTFrameData){
shadowView.frame,
- shadowView.effectiveLayoutDirection,
+ shadowView.layoutDirection,
shadowView.isNewView,
shadowView.superview.isNewView,
shadowView.isHidden,
diff --git a/React/Views/RCTScrollContentShadowView.m b/React/Views/RCTScrollContentShadowView.m
index 51854ebfd..7c0681112 100644
--- a/React/Views/RCTScrollContentShadowView.m
+++ b/React/Views/RCTScrollContentShadowView.m
@@ -27,7 +27,7 @@
absolutePosition:(CGPoint)absolutePosition
{
// Call super method if LTR layout is enforced.
- if (self.effectiveLayoutDirection == UIUserInterfaceLayoutDirectionLeftToRight) {
+ if (YGNodeLayoutGetDirection(self.yogaNode) != YGDirectionRTL) {
[super applyLayoutNode:node
viewsWithNewFrame:viewsWithNewFrame
absolutePosition:absolutePosition];
diff --git a/React/Views/RCTShadowView.h b/React/Views/RCTShadowView.h
index 3ab70b68c..ce80dd1e1 100644
--- a/React/Views/RCTShadowView.h
+++ b/React/Views/RCTShadowView.h
@@ -84,9 +84,10 @@ typedef void (^RCTApplierBlock)(NSDictionary *viewRegistry
@property (nonatomic, assign, getter=isHidden) BOOL hidden;
/**
- * Computed layout direction for the view backed to Yoga node value.
+ * Computed layout direction of the view.
*/
-@property (nonatomic, assign, readonly) UIUserInterfaceLayoutDirection effectiveLayoutDirection;
+
+@property (nonatomic, assign, readonly) UIUserInterfaceLayoutDirection layoutDirection;
/**
* Position and dimensions.
diff --git a/React/Views/RCTShadowView.m b/React/Views/RCTShadowView.m
index 34ab1e6dd..7b43333fc 100644
--- a/React/Views/RCTShadowView.m
+++ b/React/Views/RCTShadowView.m
@@ -204,8 +204,13 @@ static void RCTProcessMetaPropsBorder(const YGValue metaProps[META_PROP_COUNT],
RCTRoundPixelValue(absoluteBottomRight.y - absoluteTopLeft.y)
}};
- if (!CGRectEqualToRect(frame, _frame)) {
+ // Even if `YGNodeLayoutGetDirection` can return `YGDirectionInherit` here, it actually means
+ // that Yoga will use LTR layout for the view (even if layout process is not finished yet).
+ UIUserInterfaceLayoutDirection updatedLayoutDirection = YGNodeLayoutGetDirection(_yogaNode) == YGDirectionRTL ? UIUserInterfaceLayoutDirectionRightToLeft : UIUserInterfaceLayoutDirectionLeftToRight;
+
+ if (!CGRectEqualToRect(frame, _frame) || _layoutDirection != updatedLayoutDirection) {
_frame = frame;
+ _layoutDirection = updatedLayoutDirection;
[viewsWithNewFrame addObject:self];
}
@@ -491,14 +496,6 @@ static void RCTProcessMetaPropsBorder(const YGValue metaProps[META_PROP_COUNT],
return description;
}
-// Layout Direction
-
-- (UIUserInterfaceLayoutDirection)effectiveLayoutDirection {
- // Even if `YGNodeLayoutGetDirection` can return `YGDirectionInherit` here, it actually means
- // that Yoga will use LTR layout for the view (even if layout process is not finished yet).
- return YGNodeLayoutGetDirection(_yogaNode) == YGDirectionRTL ? UIUserInterfaceLayoutDirectionRightToLeft : UIUserInterfaceLayoutDirectionLeftToRight;
-}
-
// Margin
#define RCT_MARGIN_PROPERTY(prop, metaProp) \