Merge branch 'facebook:main' into patch-1

.circleci/config.yml

@@ -1363,7 +1363,14 @@ jobs:
       - run:
           name: "Set new react-native version and commit changes"
           command: |
-            node ./scripts/prepare-package-for-release.js -v << parameters.version >> -l << parameters.latest >> --dry-run << parameters.dryrun >>
+            VERSION=<< parameters.version >>
+
+            if [[ -z "$VERSION" ]]; then
+              VERSION=$(grep '"version"' package.json | cut -d '"' -f 4 | head -1)
+              echo "Using the version from the package.json: $VERSION"
+            fi
+
+            node ./scripts/prepare-package-for-release.js -v "$VERSION" -l << parameters.latest >> --dry-run << parameters.dryrun >>
 
   build_npm_package:
     parameters:
@@ -1643,7 +1650,7 @@ workflows:
     jobs:
       - prepare_package_for_release:
           name: prepare_package_for_release
-          version: 'v1000.0.1'
+          version: ''
           latest : false
           dryrun: true
       - prepare_hermes_workspace:

Gemfile

@@ -1,6 +1,6 @@
 source 'https://rubygems.org'
 
 # You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
-ruby '2.7.6'
+ruby File.read(File.join(__dir__, '.ruby-version')).strip
 
 gem 'cocoapods', '~> 1.11', '>= 1.11.3'

Libraries/Components/View/__tests__/View-test.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  * @format
- * @emails oncall+react_native
+ * @oncall react_native
  */
 
 'use strict';

Libraries/LogBox/UI/LogBoxMessage.js

@@ -11,6 +11,8 @@
 import type {TextStyleProp} from '../../StyleSheet/StyleSheet';
 import type {Message} from '../Data/parseLogBoxLog';
 
+import Linking from '../../Linking/Linking';
+import StyleSheet from '../../StyleSheet/StyleSheet';
 import Text from '../../Text/Text';
 import * as React from 'react';
 
@@ -22,6 +24,81 @@ type Props = {
   ...
 };
 
+type Range = {
+  lowerBound: number,
+  upperBound: number,
+};
+
+function getLinkRanges(string: string): $ReadOnlyArray<Range> {
+  const regex = /https?:\/\/[^\s$.?#].[^\s]*/gi;
+  const matches = [];
+
+  let regexResult: RegExp$matchResult | null;
+  while ((regexResult = regex.exec(string)) !== null) {
+    if (regexResult != null) {
+      matches.push({
+        lowerBound: regexResult.index,
+        upperBound: regex.lastIndex,
+      });
+    }
+  }
+
+  return matches;
+}
+
+function TappableLinks(props: {
+  content: string,
+  style: void | TextStyleProp,
+}): React.Node {
+  const matches = getLinkRanges(props.content);
+
+  if (matches.length === 0) {
+    // No URLs detected. Just return the content.
+    return <Text style={props.style}>{props.content}</Text>;
+  }
+
+  // URLs were detected. Construct array of Text nodes.
+
+  let fragments: Array<React.Node> = [];
+  let indexCounter = 0;
+  let startIndex = 0;
+
+  for (const linkRange of matches) {
+    if (startIndex < linkRange.lowerBound) {
+      const text = props.content.substring(startIndex, linkRange.lowerBound);
+      fragments.push(<Text key={++indexCounter}>{text}</Text>);
+    }
+
+    const link = props.content.substring(
+      linkRange.lowerBound,
+      linkRange.upperBound,
+    );
+    fragments.push(
+      <Text
+        onPress={() => {
+          Linking.openURL(link);
+        }}
+        key={++indexCounter}
+        style={styles.linkText}>
+        {link}
+      </Text>,
+    );
+
+    startIndex = linkRange.upperBound;
+  }
+
+  if (startIndex < props.content.length) {
+    const text = props.content.substring(startIndex);
+    fragments.push(
+      <Text key={++indexCounter} style={props.style}>
+        {text}
+      </Text>,
+    );
+  }
+
+  return <Text style={props.style}>{fragments}</Text>;
+}
+
 const cleanContent = (content: string) =>
   content.replace(/^(TransformError |Warning: (Warning: )?|Error: )/g, '');
 
@@ -49,9 +126,7 @@ function LogBoxMessage(props: Props): React.Node {
 
     if (length < maxLength) {
       elements.push(
-        <Text key={key} style={style}>
-          {cleanMessage}
-        </Text>,
+        <TappableLinks content={cleanMessage} key={key} style={style} />,
       );
     }
 
@@ -87,4 +162,10 @@ function LogBoxMessage(props: Props): React.Node {
   return <>{elements}</>;
 }
 
+const styles = StyleSheet.create({
+  linkText: {
+    textDecorationLine: 'underline',
+  },
+});
+
 export default LogBoxMessage;

Libraries/LogBox/UI/__tests__/LogBoxMessage-test.js

@@ -17,7 +17,7 @@ const React = require('react');
 
 describe('LogBoxMessage', () => {
   it('should render message', () => {
-    const output = render.shallowRender(
+    const output = render.create(
       <LogBoxMessage
         style={{}}
         message={{
@@ -31,7 +31,7 @@ describe('LogBoxMessage', () => {
   });
 
   it('should render message truncated to 6 chars', () => {
-    const output = render.shallowRender(
+    const output = render.create(
       <LogBoxMessage
         style={{}}
         maxLength={5}
@@ -47,7 +47,7 @@ describe('LogBoxMessage', () => {
 
   it('should render the whole message when maxLength = message length', () => {
     const message = 'Some kind of message';
-    const output = render.shallowRender(
+    const output = render.create(
       <LogBoxMessage
         style={{}}
         maxLength={message.length}
@@ -62,7 +62,7 @@ describe('LogBoxMessage', () => {
   });
 
   it('should render message with substitution', () => {
-    const output = render.shallowRender(
+    const output = render.create(
       <LogBoxMessage
         style={{}}
         message={{
@@ -76,7 +76,7 @@ describe('LogBoxMessage', () => {
   });
 
   it('should render message with substitution, truncating the first word 3 letters in', () => {
-    const output = render.shallowRender(
+    const output = render.create(
       <LogBoxMessage
         style={{}}
         maxLength={3}
@@ -91,7 +91,7 @@ describe('LogBoxMessage', () => {
   });
 
   it('should render message with substitution, truncating the second word 6 letters in', () => {
-    const output = render.shallowRender(
+    const output = render.create(
       <LogBoxMessage
         style={{}}
         maxLength={13}
@@ -106,7 +106,7 @@ describe('LogBoxMessage', () => {
   });
 
   it('should render message with substitution, truncating the third word 2 letters in', () => {
-    const output = render.shallowRender(
+    const output = render.create(
       <LogBoxMessage
         style={{}}
         maxLength={22}
@@ -122,7 +122,7 @@ describe('LogBoxMessage', () => {
 
   it('should render the whole message with substitutions when maxLength = message length', () => {
     const message = 'normal substitution normal';
-    const output = render.shallowRender(
+    const output = render.create(
       <LogBoxMessage
         style={{}}
         maxLength={message.length}
@@ -137,7 +137,7 @@ describe('LogBoxMessage', () => {
   });
 
   it('should render a plaintext message with no substitutions', () => {
-    const output = render.shallowRender(
+    const output = render.create(
       <LogBoxMessage
         plaintext
         style={{}}
@@ -152,7 +152,7 @@ describe('LogBoxMessage', () => {
   });
 
   it('should render a plaintext message and clean the content', () => {
-    const output = render.shallowRender(
+    const output = render.create(
       <LogBoxMessage
         plaintext
         style={{}}
@@ -167,7 +167,7 @@ describe('LogBoxMessage', () => {
   });
 
   it('Should strip "TransformError " without breaking substitution', () => {
-    const output = render.shallowRender(
+    const output = render.create(
       <LogBoxMessage
         style={{}}
         message={{
@@ -181,7 +181,7 @@ describe('LogBoxMessage', () => {
   });
 
   it('Should strip "Warning: " without breaking substitution', () => {
-    const output = render.shallowRender(
+    const output = render.create(
       <LogBoxMessage
         style={{}}
         message={{
@@ -195,7 +195,7 @@ describe('LogBoxMessage', () => {
   });
 
   it('Should strip "Warning: Warning: " without breaking substitution', () => {
-    const output = render.shallowRender(
+    const output = render.create(
       <LogBoxMessage
         style={{}}
         message={{
@@ -207,4 +207,47 @@ describe('LogBoxMessage', () => {
 
     expect(output).toMatchSnapshot();
   });
+
+  it('Should make links tappable', () => {
+    const output = render.create(
+      <LogBoxMessage
+        style={{}}
+        message={{
+          content: 'http://reactnative.dev',
+          substitutions: [],
+        }}
+      />,
+    );
+
+    expect(output).toMatchSnapshot();
+  });
+
+  it('Should handle multiple links', () => {
+    const output = render.create(
+      <LogBoxMessage
+        style={{}}
+        message={{
+          content: 'http://reactnative.dev and http://reactjs.org',
+          substitutions: [],
+        }}
+      />,
+    );
+
+    expect(output).toMatchSnapshot();
+  });
+
+  it('Should handle truncated links', () => {
+    const output = render.create(
+      <LogBoxMessage
+        style={{}}
+        maxLength={35}
+        message={{
+          content: 'http://reactnative.dev and http://reactjs.org',
+          substitutions: [],
+        }}
+      />,
+    );
+
+    expect(output).toMatchSnapshot();
+  });
 });