Inline code block support

Libraries/Components/View/ReactNativeViewAttributes.js

@@ -35,6 +35,7 @@ const UIView = {
  collapsable: true,
  needsOffscreenAlphaCompositing: true,
  style: ReactNativeStyleAttributes,
+ textCodeBlock: true,
 };
 
 const RCTView = {

Libraries/NativeComponent/BaseViewConfig.android.js

@@ -185,6 +185,7 @@ const validAttributesForNonEventProps = {
  translateX: true,
  translateY: true,
  accessibilityLiveRegion: true,
+ needsOffscreenAlphaCompositing: true,
 
  // @ReactProps from LayoutShadowNode
  width: true,

Libraries/Text/BaseText/RCTBaseTextViewManager.m

@@ -54,5 +54,6 @@ - (RCTShadowView *)shadowView
 // Special
 RCT_REMAP_SHADOW_PROPERTY(isHighlighted, textAttributes.isHighlighted, BOOL)
 RCT_REMAP_SHADOW_PROPERTY(textTransform, textAttributes.textTransform, RCTTextTransform)
+RCT_REMAP_SHADOW_PROPERTY(textCodeBlock, textAttributes.textCodeBlock, NSDictionary)
 
 @end

Libraries/Text/RCTTextAttributes.h

@@ -15,6 +15,7 @@ NS_ASSUME_NONNULL_BEGIN
 
 extern NSString *const RCTTextAttributesIsHighlightedAttributeName;
 extern NSString *const RCTTextAttributesTagAttributeName;
+extern NSString *const RCTTextAttributesIsTextCodeBlockAttributeName;
 
 /**
  * Represents knowledge about all supported *text* attributes
@@ -55,6 +56,7 @@ extern NSString *const RCTTextAttributesTagAttributeName;
 @property (nonatomic, strong, nullable) NSNumber *tag;
 @property (nonatomic, assign) UIUserInterfaceLayoutDirection layoutDirection;
 @property (nonatomic, assign) RCTTextTransform textTransform;
+@property (nonatomic, assign) NSDictionary *textCodeBlock;
 
 #pragma mark - Inheritance
 

Libraries/Text/RCTTextAttributes.m

@@ -13,6 +13,7 @@
 
 NSString *const RCTTextAttributesIsHighlightedAttributeName = @"RCTTextAttributesIsHighlightedAttributeName";
 NSString *const RCTTextAttributesTagAttributeName = @"RCTTextAttributesTagAttributeName";
+NSString *const RCTTextAttributesIsTextCodeBlockAttributeName = @"RCTTextAttributesIsTextCodeBlockAttributeName";
 
 @implementation RCTTextAttributes
 
@@ -93,6 +94,12 @@ - (void)applyTextAttributes:(RCTTextAttributes *)textAttributes
  : _layoutDirection;
  _textTransform =
  textAttributes->_textTransform != RCTTextTransformUndefined ? textAttributes->_textTransform : _textTransform;
+ _textCodeBlock = textAttributes->_textCodeBlock ?: _textCodeBlock;
+}
+
+- (NSDictionary *)textCodeBlock
+{
+ return _textCodeBlock;
 }
 
 - (NSParagraphStyle *)effectiveParagraphStyle
@@ -208,6 +215,10 @@ - (NSParagraphStyle *)effectiveParagraphStyle
  if (_tag) {
  attributes[RCTTextAttributesTagAttributeName] = _tag;
  }
+
+ if (_textCodeBlock) {
+ attributes[RCTTextAttributesIsTextCodeBlockAttributeName] = _textCodeBlock;
+ }
 
  return [attributes copy];
 }
@@ -336,7 +347,8 @@ - (BOOL)isEqual:(RCTTextAttributes *)textAttributes
  RCTTextAttributesCompareObjects(_textShadowColor) &&
  // Special
  RCTTextAttributesCompareOthers(_isHighlighted) && RCTTextAttributesCompareObjects(_tag) &&
- RCTTextAttributesCompareOthers(_layoutDirection) && RCTTextAttributesCompareOthers(_textTransform);
+ RCTTextAttributesCompareOthers(_layoutDirection) && RCTTextAttributesCompareOthers(_textTransform) &&
+ RCTTextAttributesCompareObjects(_textCodeBlock);
 }
 
 @end

Libraries/Text/Text/RCTTextCodeBlock.h

@@ -0,0 +1,16 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#import <UIKit/UIKit.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface RCTTextCodeBlock : NSLayoutManager
+
+@end
+
+NS_ASSUME_NONNULL_END

Libraries/Text/Text/RCTTextCodeBlock.m

@@ -0,0 +1,96 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#import "RCTTextCodeBlock.h"
+#import "RCTTextAttributes.h"
+
+@implementation RCTTextCodeBlock
+
+- (UIColor*)hexStringToColor:(NSString *)stringToConvert
+{
+ NSString *noHashString = [stringToConvert stringByReplacingOccurrencesOfString:@"#" withString:@""];
+ NSScanner *stringScanner = [NSScanner scannerWithString:noHashString];
+
+ unsigned hex;
+ if (![stringScanner scanHexInt:&hex]) return nil;
+ int r = (hex >> 16) & 0xFF;
+ int g = (hex >> 8) & 0xFF;
+ int b = (hex) & 0xFF;
+
+ return [UIColor colorWithRed:r / 255.0f green:g / 255.0f blue:b / 255.0f alpha:1.0f];
+}
+
+-(void)drawBackgroundForGlyphRange:(NSRange)glyphsToShow atPoint:(CGPoint)origin {
+ [super drawBackgroundForGlyphRange:glyphsToShow atPoint:origin];
+
+ if ((glyphsToShow.location + glyphsToShow.length) > [[self textStorage] length]) {
+ return;
+ }
+
+ [[self textStorage] enumerateAttribute:RCTTextAttributesIsTextCodeBlockAttributeName
+ inRange:glyphsToShow
+ options:0
+ usingBlock:^(NSDictionary *textCodeBlock, NSRange range, __unused BOOL *stop) {
+
+ NSString *backgroundColor = [textCodeBlock objectForKey:@"backgroundColor"];
+ NSString *borderColor = [textCodeBlock objectForKey:@"borderColor"];
+ float borderRadius = [[textCodeBlock objectForKey:@"borderRadius"] floatValue];
+ float borderWidth = [[textCodeBlock objectForKey:@"borderWidth"] floatValue];
+
+ CGContextRef context = UIGraphicsGetCurrentContext();
+ CGContextSetFillColorWithColor(context, [self hexStringToColor:backgroundColor].CGColor);
+ CGContextSetStrokeColorWithColor(context, [self hexStringToColor:borderColor].CGColor);
+
+ if (!backgroundColor) {
+ return;
+ }
+
+ // Enumerates line fragments intersecting with the whole text container.
+ [self enumerateLineFragmentsForGlyphRange:range
+ usingBlock:^(CGRect rect, CGRect usedRect, NSTextContainer * _Nonnull textContainer, NSRange lineGlyphRange, BOOL * _Nonnull stop) {
+
+ __block UIBezierPath *textCodeBlockPath = nil;
+
+ NSRange lineRange = NSIntersectionRange(range, lineGlyphRange);
+
+ [self enumerateEnclosingRectsForGlyphRange:lineRange
+ withinSelectedGlyphRange:lineRange
+ inTextContainer:textContainer
+ usingBlock:^(CGRect enclosingRect, __unused BOOL *anotherStop) {
+
+ BOOL isFirstLine = lineGlyphRange.location == 0;
+ BOOL isLastLine = range.length + range.location == lineGlyphRange.length + lineGlyphRange.location;
+ long corners = (
+ (isFirstLine ? (UIRectCornerTopLeft | UIRectCornerBottomLeft) : 0) |
+ (isLastLine ? (UIRectCornerTopRight | UIRectCornerBottomRight) : 0)
+ );
+
+ CGRect resultRect = CGRectMake(
+ enclosingRect.origin.x,
+ enclosingRect.origin.y + (borderWidth / 2),
+ enclosingRect.size.width + ((isFirstLine && isLastLine) || isLastLine ? 0 : 5),
+ enclosingRect.size.height - borderWidth
+ );
+
+ UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:resultRect byRoundingCorners:corners cornerRadii:CGSizeMake(borderRadius, borderRadius)];
+
+ if (textCodeBlockPath) {
+ [textCodeBlockPath appendPath:path];
+ } else {
+ textCodeBlockPath = path;
+ }
+
+ textCodeBlockPath.lineWidth = borderWidth;
+ [textCodeBlockPath stroke];
+ [textCodeBlockPath fill];
+ }];
+ }];
+
+ }];
+}
+
+@end

Libraries/Text/Text/RCTTextShadowView.m

@@ -14,6 +14,7 @@
 
 #import <React/RCTTextView.h>
 #import "NSTextStorage+FontScaling.h"
+#import "RCTTextCodeBlock.h"
 
 @implementation RCTTextShadowView {
  __weak RCTBridge *_bridge;
@@ -219,7 +220,7 @@ - (NSTextStorage *)textStorageAndLayoutManagerThatFitsSize:(CGSize)size exclusiv
  textContainer.lineBreakMode = _maximumNumberOfLines > 0 ? _lineBreakMode : NSLineBreakByClipping;
  textContainer.maximumNumberOfLines = _maximumNumberOfLines;
 
- NSLayoutManager *layoutManager = [NSLayoutManager new];
+ NSLayoutManager *layoutManager = [RCTTextCodeBlock new];
  layoutManager.usesFontLeading = NO;
  [layoutManager addTextContainer:textContainer];
 

Libraries/Text/TextCodeBlock.js

@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow strict-local
+ */
+
+import type {ColorValue} from 'react-native/Libraries/StyleSheet/StyleSheet';
+
+export type TextCodeBlockProp = $ReadOnly<{|
+ /**
+ * The background color of the text code block.
+ */
+ backgroundColor?: ?ColorValue,
+
+ /**
+ * The border color of the text code block.
+ */
+ borderColor?: ?ColorValue,
+
+ /**
+ * The border radius of the text code block.
+ */
+ borderRadius?: ?number,
+
+ /**
+ * The border width of the text code block.
+ */
+ borderWidth?: ?number,
+|}>;

Libraries/Text/TextNativeComponent.js

@@ -46,6 +46,7 @@ const textViewConfig = {
  dataDetectorType: true,
  android_hyphenationFrequency: true,
  lineBreakStrategyIOS: true,
+ textCodeBlock: true,
  },
  directEventTypes: {
  topTextLayout: {
@@ -63,6 +64,7 @@ const virtualTextViewConfig = {
  isHighlighted: true,
  isPressable: true,
  maxFontSizeMultiplier: true,
+ textCodeBlock: true,
  },
  uiViewClassName: 'RCTVirtualText',
 };

Libraries/Text/TextProps.js

@@ -25,6 +25,7 @@ import type {
  TextLayoutEvent,
 } from '../Types/CoreEventTypes';
 import type {Node} from 'react';
+import type {TextCodeBlockProp} from './TextCodeBlock';
 
 export type PressRetentionOffset = $ReadOnly<{|
  top: number,
@@ -249,4 +250,11 @@ export type TextProps = $ReadOnly<{|
  * See https://reactnative.dev/docs/text.html#linebreakstrategyios
  */
  lineBreakStrategyIOS?: ?('none' | 'standard' | 'hangul-word' | 'push-out'),
+
+ /*
+ * Draws inline border around text with background, mostly used for inline code blocks.
+ *
+ * See https://github.com/Expensify/App/issues/4733
+ */
+ textCodeBlock?: ?TextCodeBlockProp,
 |}>;

README.md

@@ -1,3 +1,19 @@
+# Expensify Release
+
+To release this fork to npm there are a couple manual steps needed.
+
+If updating the base react-native version of the fork:
+
+1. Update the `version` variable on line 15 in `sdks/hermes-engine/hermes-engine.podspec` with the version of react-native the fork is based on. For example `version = '0.69.3'`.
+2. Download hermesc from the version of react-native the fork is based on. This can be done by opening the url `https://registry.npmjs.com/react-native/-/react-native-<version>.tgz`. For example `https://registry.npmjs.com/react-native/-/react-native-0.69.3.tgz`. Then copy `sdks/hermesc` to the same directory inside your react-native repository.
+3. Commit the updated files.
+
+Build and publish the fork:
+
+1. Clean previous build if there is one in `android` folder with `rm -rf android`.
+2. Run `node scripts/set-rn-version.js --to-version <version>` where version is the version of the **fork** that is being published, note that this might be different that the version the fork is based on we used previously. For example `node scripts/set-rn-version.js --to-version 0.69.4`.
+3. Run `CIRCLE_TAG=<version> node ./scripts/publish-npm.js` where version is the same as the one in the previous step. For example `CIRCLE_TAG=0.69.4 node ./scripts/publish-npm.js`.
+
 <h1 align="center">
  <a href="https://reactnative.dev/">
  React Native

ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java

@@ -160,6 +160,8 @@ public class ViewProps {
  public static final String ACCESSIBILITY_LABELLED_BY = "accessibilityLabelledBy";
  public static final String IMPORTANT_FOR_ACCESSIBILITY = "importantForAccessibility";
 
+ public static final String TEXT_CODE_BLOCK = "textCodeBlock";
+
  // DEPRECATED
  public static final String ROTATION = "rotation";
  public static final String SCALE_X = "scaleX";

ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollViewManager.java

@@ -385,4 +385,15 @@ public void setPointerEvents(ReactScrollView view, @Nullable String pointerEvent
  public void setScrollEventThrottle(ReactScrollView view, int scrollEventThrottle) {
  view.setScrollEventThrottle(scrollEventThrottle);
  }
+
+ @ReactProp(name = "verticalScrollbarPosition")
+ public void setVerticalScrollbarPosition(ReactScrollView view, String position) {
+ if ("right".equals(position)) {
+ view.setVerticalScrollbarPosition(View.SCROLLBAR_POSITION_RIGHT);
+ } else if ("left".equals(position)) {
+ view.setVerticalScrollbarPosition(View.SCROLLBAR_POSITION_LEFT);
+ } else {
+ view.setVerticalScrollbarPosition(View.SCROLLBAR_POSITION_DEFAULT);
+ }
+ }
 }