Skip to content

Commit fe5c0d2

Browse files
Adam ComellaFacebook Github Bot 3
Adam Comella
authored and
Facebook Github Bot 3
committed
iOS: Enable views to be nested within <Text>
Summary: Previously, only Text and Image could be nested within Text. Now, any view can be nested within Text. One restriction of this feature is that developers must give inline views a width and a height via the style prop. Previously, inline Images were supported by using iOS's built-in support for rendering images with an NSAttributedString via NSTextAttachment. However, NSAttributedString doesn't support rendering arbitrary views. This change adds support for nesting views within Text by creating one NSTextAttachment per inline view. The NSTextAttachments act as placeholders. They are set to be the size of the corresponding view. After the text is laid out, we query the text system to find out where it has positioned each NSTextAttachment. We then position the views to be at those locations. This commit also contains a change in `RCTShadowText.m` `_setParagraphStyleOnAttributedString:heightOfTallestSubview:`. It now only sets `lineHeight`, `textAlign`, and `writingDirection` when they've actua Closes facebook/react-native#7304 Differential Revision: D3269333 Pulled By: nicklockwood fbshipit-source-id: 2b59f1c5445a4012f9c29df9f10f5010060ea517
1 parent 908041b commit fe5c0d2

File tree

17 files changed

+223
-225
lines changed

17 files changed

+223
-225
lines changed

‎Examples/UIExplorer/TextExample.ios.js‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,11 @@
11
/**
2+
* Copyright (c) 2013-present, Facebook, Inc.
3+
* All rights reserved.
4+
*
5+
* This source code is licensed under the BSD-style license found in the
6+
* LICENSE file in the root directory of this source tree. An additional grant
7+
* of patent rights can be found in the PATENTS file in the same directory.
8+
*
29
* The examples provided by Facebook are for non-commercial testing and
310
* evaluation purposes only.
411
*
@@ -415,12 +422,13 @@ exports.examples = [
415422
);
416423
},
417424
}, {
418-
title: 'Inline images',
425+
title: 'Inline views',
419426
render: function() {
420427
return (
421428
<View>
422429
<Text>
423-
This text contains an inline image <Image source={require('./flux.png')} style={{width: 30, height: 11, resizeMode: 'cover'}}/>. Neat, huh?
430+
This text contains an inline blue view <View style={{width: 25, height: 25, backgroundColor: 'steelblue'}} /> and
431+
an inline image <Image source={require('./flux.png')} style={{width: 30, height: 11, resizeMode: 'cover'}}/>. Neat, huh?
424432
</Text>
425433
</View>
426434
);

‎Libraries/Image/Image.ios.js‎

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -201,10 +201,6 @@ var Image = React.createClass({
201201
validAttributes: ReactNativeViewAttributes.UIView
202202
},
203203

204-
contextTypes: {
205-
isInAParentText: React.PropTypes.bool
206-
},
207-
208204
render: function() {
209205
var source = resolveAssetSource(this.props.source) || {};
210206
var {width, height, uri} = source;
@@ -225,13 +221,6 @@ var Image = React.createClass({
225221
console.warn('The <Image> component requires a `source` property rather than `src`.');
226222
}
227223

228-
if (this.context.isInAParentText) {
229-
RawImage = RCTVirtualImage;
230-
if (!width || !height) {
231-
console.warn('You must specify a width and height for the image %s', uri);
232-
}
233-
}
234-
235224
return (
236225
<RawImage
237226
{...this.props}
@@ -252,7 +241,6 @@ var styles = StyleSheet.create({
252241

253242
var RCTImageView = requireNativeComponent('RCTImageView', Image);
254243
var RCTNetworkImageView = NetworkImageViewManager ? requireNativeComponent('RCTNetworkImageView', Image) : RCTImageView;
255-
var RCTVirtualImage = requireNativeComponent('RCTVirtualImage', Image);
256244

257245

258246
module.exports = Image;

‎Libraries/Image/RCTImage.xcodeproj/project.pbxproj‎

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -44,10 +44,6 @@
4444
134B00A11B54232B00EC8DFB /* RCTImageUtils.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTImageUtils.m; sourceTree = "<group>"; };
4545
139A38821C4D57AD00862840 /* RCTResizeMode.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTResizeMode.h; sourceTree = "<group>"; };
4646
139A38831C4D587C00862840 /* RCTResizeMode.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTResizeMode.m; sourceTree = "<group>"; };
47-
13EF7F071BC42D4E003F47DD /* RCTShadowVirtualImage.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTShadowVirtualImage.h; sourceTree = "<group>"; };
48-
13EF7F081BC42D4E003F47DD /* RCTShadowVirtualImage.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTShadowVirtualImage.m; sourceTree = "<group>"; };
49-
13EF7F091BC42D4E003F47DD /* RCTVirtualImageManager.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTVirtualImageManager.h; sourceTree = "<group>"; };
50-
13EF7F0A1BC42D4E003F47DD /* RCTVirtualImageManager.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTVirtualImageManager.m; sourceTree = "<group>"; };
5147
13EF7F7D1BC825B1003F47DD /* RCTXCAssetImageLoader.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTXCAssetImageLoader.h; sourceTree = "<group>"; };
5248
13EF7F7E1BC825B1003F47DD /* RCTXCAssetImageLoader.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTXCAssetImageLoader.m; sourceTree = "<group>"; };
5349
143879361AAD32A300F088A5 /* RCTImageLoader.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTImageLoader.h; sourceTree = "<group>"; };
@@ -95,10 +91,6 @@
9591
35123E6A1B59C99D00EBAD80 /* RCTImageStoreManager.m */,
9692
134B00A01B54232B00EC8DFB /* RCTImageUtils.h */,
9793
134B00A11B54232B00EC8DFB /* RCTImageUtils.m */,
98-
13EF7F071BC42D4E003F47DD /* RCTShadowVirtualImage.h */,
99-
13EF7F081BC42D4E003F47DD /* RCTShadowVirtualImage.m */,
100-
13EF7F091BC42D4E003F47DD /* RCTVirtualImageManager.h */,
101-
13EF7F0A1BC42D4E003F47DD /* RCTVirtualImageManager.m */,
10294
58B5115E1A9E6B3D00147676 /* Products */,
10395
);
10496
indentWidth = 2;
@@ -169,7 +161,6 @@
169161
isa = PBXSourcesBuildPhase;
170162
buildActionMask = 2147483647;
171163
files = (
172-
13EF7F0C1BC42D4E003F47DD /* RCTVirtualImageManager.m in Sources */,
173164
35123E6B1B59C99D00EBAD80 /* RCTImageStoreManager.m in Sources */,
174165
1304D5AC1AA8C4A30002E2BE /* RCTImageViewManager.m in Sources */,
175166
1304D5B21AA8C50D0002E2BE /* RCTGIFImageDecoder.m in Sources */,
@@ -178,7 +169,6 @@
178169
139A38841C4D587C00862840 /* RCTResizeMode.m in Sources */,
179170
1304D5AB1AA8C4A30002E2BE /* RCTImageView.m in Sources */,
180171
EEF314721C9B0DD30049118E /* RCTImageBlurUtils.m in Sources */,
181-
13EF7F0B1BC42D4E003F47DD /* RCTShadowVirtualImage.m in Sources */,
182172
13EF7F7F1BC825B1003F47DD /* RCTXCAssetImageLoader.m in Sources */,
183173
134B00A21B54232B00EC8DFB /* RCTImageUtils.m in Sources */,
184174
);

‎Libraries/Image/RCTImageView.h‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,12 @@
88
*/
99

1010
#import <UIKit/UIKit.h>
11-
#import "RCTImageComponent.h"
1211
#import "RCTResizeMode.h"
1312

1413
@class RCTBridge;
1514
@class RCTImageSource;
1615

17-
@interface RCTImageView : UIImageView <RCTImageComponent>
16+
@interface RCTImageView : UIImageView
1817

1918
- (instancetype)initWithBridge:(RCTBridge *)bridge NS_DESIGNATED_INITIALIZER;
2019

‎Libraries/Image/RCTShadowVirtualImage.h‎

Lines changed: 0 additions & 28 deletions
This file was deleted.

‎Libraries/Image/RCTShadowVirtualImage.m‎

Lines changed: 0 additions & 82 deletions
This file was deleted.

‎Libraries/Image/RCTVirtualImageManager.h‎

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎Libraries/Image/RCTVirtualImageManager.m‎

Lines changed: 0 additions & 25 deletions
This file was deleted.

0 commit comments

Comments
 (0)