react-native/Libraries/Text/TextInput/Multiline/RCTMultilineTextInputView.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

90 lines
2.5 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 "RCTMultilineTextInputView.h"
#import <React/RCTUtils.h>
#import "RCTUITextView.h"
@implementation RCTMultilineTextInputView
{
RCTUITextView *_backedTextInputView;
}
- (instancetype)initWithBridge:(RCTBridge *)bridge
{
if (self = [super initWithBridge:bridge]) {
// `blurOnSubmit` defaults to `false` for <TextInput multiline={true}> by design.
self.blurOnSubmit = NO;
_backedTextInputView = [[RCTUITextView alloc] initWithFrame:self.bounds];
_backedTextInputView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
_backedTextInputView.backgroundColor = [UIColor clearColor];
_backedTextInputView.textColor = [UIColor blackColor];
// This line actually removes 5pt (default value) left and right padding in UITextView.
_backedTextInputView.textContainer.lineFragmentPadding = 0;
#if !TARGET_OS_TV
_backedTextInputView.scrollsToTop = NO;
#endif
_backedTextInputView.scrollEnabled = YES;
_backedTextInputView.textInputDelegate = self;
[self addSubview:_backedTextInputView];
}
return self;
}
RCT_NOT_IMPLEMENTED(- (instancetype)initWithFrame:(CGRect)frame)
RCT_NOT_IMPLEMENTED(- (instancetype)initWithCoder:(NSCoder *)coder)
- (id<RCTBackedTextInputViewProtocol>)backedTextInputView
{
return _backedTextInputView;
}
#pragma mark - UIScrollViewDelegate
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
RCTDirectEventBlock onScroll = self.onScroll;
if (onScroll) {
CGPoint contentOffset = scrollView.contentOffset;
CGSize contentSize = scrollView.contentSize;
CGSize size = scrollView.bounds.size;
UIEdgeInsets contentInset = scrollView.contentInset;
onScroll(@{
@"contentOffset": @{
@"x": @(contentOffset.x),
@"y": @(contentOffset.y)
},
@"contentInset": @{
@"top": @(contentInset.top),
@"left": @(contentInset.left),
@"bottom": @(contentInset.bottom),
@"right": @(contentInset.right)
},
@"contentSize": @{
@"width": @(contentSize.width),
@"height": @(contentSize.height)
},
@"layoutMeasurement": @{
@"width": @(size.width),
@"height": @(size.height)
},
@"zoomScale": @(scrollView.zoomScale ?: 1),
});
}
}
@end