react-native/Libraries/Text/VirtualText/RCTVirtualTextShadowView.m
Valentin Shergin 2716f53220 The New <Text> on iOS
Summary:
This is a complete rewrite of RCTText, the part of React Native which manages Text and TextInput components.

Key points:

* It's understandable now. It follows a simple architectural pattern, and it's easy to debug and iterate. Text flow layout is a first-class citizen in React Native layout system now, not just a wired special case. It also brings entirely new possibilities such as nested interleaving <Text> and <View> components.
* All <Text>-specific APIs were removed from UIManager and co (it's about ~16 public methods which were used exclusively only by <Text>).
* It relies on new Yoga measurement/cloning API and on-dirty handler. So, it removes built-in dirty propagation subsystem from RN completely.
* It caches string fragments properly and granularly on a per-node basis which makes updating text-containing components more performant.
* It does not instantiate UIView for virtual components which reduces memory utilization.
* It drastically improves <TextInput> capabilities (e.g. rich text inside single line <TextInput> is now supported).

Screenshots:
https://cl.ly/2j3r1V0L0324
https://cl.ly/3N2V3C3d3q3R

Reviewed By: mmmulani

Differential Revision: D6617326

fbshipit-source-id: 35d4d81b35c9870e9557d0211c0e934e6072a41e
2018-01-24 00:03:01 -08:00

76 lines
1.6 KiB
Objective-C

/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
#import "RCTVirtualTextShadowView.h"
#import <React/RCTShadowView+Layout.h>
#import <yoga/Yoga.h>
#import "RCTRawTextShadowView.h"
@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
{
[super dirtyLayout];
if (_isLayoutDirty) {
return;
}
_isLayoutDirty = YES;
[self.superview dirtyLayout];
}
- (void)clearLayout
{
_isLayoutDirty = NO;
}
static void RCTVirtualTextShadowViewYogaNodeDirtied(YGNodeRef node)
{
RCTShadowView *shadowView = (__bridge RCTShadowView *)YGNodeGetContext(node);
RCTVirtualTextShadowView *virtualTextShadowView =
(RCTVirtualTextShadowView *)shadowView.reactSuperview;
[virtualTextShadowView dirtyLayout];
}
@end