From 798517a267841675956cb52a1c0ae493a913962a Mon Sep 17 00:00:00 2001 From: Adam Comella Date: Wed, 31 Oct 2018 16:08:57 -0700 Subject: [PATCH] Fix relayout of inline views (#21968) Summary: If a view inside of an inline view became dirty (e.g. its top/left prop changed), its position would not update on screen. This is because Yoga didn't know the view needed to be relaid out because Yoga's dirty signal didn't propagate all the way up to the root. The problem is that inline views don't have a parent in the Yoga tree causing Yoga's dirtiness signal propagation to get cut off early. The fix is, when an inline views gets dirty, mark the parent Text's Yoga node as dirty. This will cause Yoga's dirtiness signal to propagate all the way up to the root node. Yoga has a hook to inform you when your node is marked as dirty: `YGNodeSetDirtiedFunc`. We leverage this to find out when an inline view's Yoga node gets dirtied. React Native almost handled this case. Everything worked fine as long as the inline view was nested inside of a virtual text node like this: ``` ``` However, the bug repros when the inline view is nested in a non-virtual text node: ``` ``` The fix is to move the special dirtiness propagation logic from `RCTVirtualTextShadowView` to `RCTBaseTextShadowView`. **Test Plan** Created an inline view. Tested the following kinds of updates on the inline view's content: - Moved the content - Removed the content - Added the content Tested this for an inline view that is directly inside of a text node as well as one that is nested under a virtual text node. Here's the code I used for the inline view that moved its content after 2 seconds: ``` const RN = require('react-native'); const React = require('react'); export default class InlineView extends React.Component { constructor(props, context) { super(props, context); this.state = { posBottom: false }; } componentDidMount() { super.componentDidMount && super.componentDidMount(); setTimeout(() => { this.setState({ posBottom: true }); }, 2000); } render() { const pos = this.state.posBottom ? 25 : 0; const color = this.state.posBottom ? 'pink' : 'green'; return ( ); } } ``` **Release Notes** [IOS] [BUGFIX] [Text] - Fix case where content of inline views didn't get relaid out Adam Comella Microsoft Corp. Pull Request resolved: https://github.com/facebook/react-native/pull/21968 Differential Revision: D12873795 Pulled By: shergin fbshipit-source-id: bbc9f5d3ef25063b0015cec8c4aaf2e41ecd60a8 --- .../Text/BaseText/RCTBaseTextShadowView.m | 38 +++++++++++++++++++ .../VirtualText/RCTVirtualTextShadowView.m | 35 ----------------- 2 files changed, 38 insertions(+), 35 deletions(-) diff --git a/Libraries/Text/BaseText/RCTBaseTextShadowView.m b/Libraries/Text/BaseText/RCTBaseTextShadowView.m index ed5fd8ca9dd056..993e88f8dcad6d 100644 --- a/Libraries/Text/BaseText/RCTBaseTextShadowView.m +++ b/Libraries/Text/BaseText/RCTBaseTextShadowView.m @@ -14,6 +14,20 @@ NSString *const RCTBaseTextShadowViewEmbeddedShadowViewAttributeName = @"RCTBaseTextShadowViewEmbeddedShadowViewAttributeName"; +static void RCTInlineViewYogaNodeDirtied(YGNodeRef node) +{ + // An inline view (a view nested inside of a text node) does not have a parent + // in the Yoga tree. Consequently, we have to manually propagate the inline + // view's dirty signal up through the text nodes. At some point, it'll reach + // the outermost text node which has a Yoga node and then Yoga will take over + // the dirty signal propagation. + RCTShadowView *inlineView = (__bridge RCTShadowView *)YGNodeGetContext(node); + RCTBaseTextShadowView *baseTextShadowView = + (RCTBaseTextShadowView *)inlineView.reactSuperview; + + [baseTextShadowView dirtyLayout]; +} + @implementation RCTBaseTextShadowView { NSAttributedString *_Nullable _cachedAttributedText; @@ -35,6 +49,30 @@ - (void)setReactTag:(NSNumber *)reactTag _textAttributes.tag = reactTag; } +#pragma mark - Life Cycle + +- (void)insertReactSubview:(RCTShadowView *)subview atIndex:(NSInteger)index +{ + [super insertReactSubview:subview atIndex:index]; + + [self dirtyLayout]; + + if (![subview isKindOfClass:[RCTVirtualTextShadowView class]]) { + YGNodeSetDirtiedFunc(subview.yogaNode, RCTInlineViewYogaNodeDirtied); + } +} + +- (void)removeReactSubview:(RCTShadowView *)subview +{ + if (![subview isKindOfClass:[RCTVirtualTextShadowView class]]) { + YGNodeSetDirtiedFunc(subview.yogaNode, NULL); + } + + [self dirtyLayout]; + + [super removeReactSubview:subview]; +} + #pragma mark - attributedString - (NSAttributedString *)attributedTextWithBaseTextAttributes:(nullable RCTTextAttributes *)baseTextAttributes diff --git a/Libraries/Text/VirtualText/RCTVirtualTextShadowView.m b/Libraries/Text/VirtualText/RCTVirtualTextShadowView.m index af59ad7dfd565f..ef659cc54b797a 100644 --- a/Libraries/Text/VirtualText/RCTVirtualTextShadowView.m +++ b/Libraries/Text/VirtualText/RCTVirtualTextShadowView.m @@ -16,31 +16,6 @@ @implementation RCTVirtualTextShadowView { BOOL _isLayoutDirty; } -#pragma mark - Life Cycle - -- (void)insertReactSubview:(RCTShadowView *)subview atIndex:(NSInteger)index -{ - [super insertReactSubview:subview atIndex:index]; - - [self dirtyLayout]; - - if (![subview isKindOfClass:[RCTVirtualTextShadowView class]]) { - YGNodeSetDirtiedFunc(subview.yogaNode, RCTVirtualTextShadowViewYogaNodeDirtied); - } - -} - -- (void)removeReactSubview:(RCTShadowView *)subview -{ - if (![subview isKindOfClass:[RCTVirtualTextShadowView class]]) { - YGNodeSetDirtiedFunc(subview.yogaNode, NULL); - } - - [self dirtyLayout]; - - [super removeReactSubview:subview]; -} - #pragma mark - Layout - (void)dirtyLayout @@ -60,14 +35,4 @@ - (void)clearLayout _isLayoutDirty = NO; } -static void RCTVirtualTextShadowViewYogaNodeDirtied(YGNodeRef node) -{ - RCTShadowView *shadowView = (__bridge RCTShadowView *)YGNodeGetContext(node); - - RCTVirtualTextShadowView *virtualTextShadowView = - (RCTVirtualTextShadowView *)shadowView.reactSuperview; - - [virtualTextShadowView dirtyLayout]; -} - @end