Add new Text render benchmark

packages/benchmarks/src/cases/TextTree.js

@@ -0,0 +1,45 @@
+import { BenchmarkType } from '../app/Benchmark';
+import { number, object } from 'prop-types';
+import React, { Component } from 'react';
+
+class TextTree extends Component {
+  static displayName = 'TextTree';
+
+  static benchmarkType = BenchmarkType.MOUNT;
+
+  static propTypes = {
+    breadth: number.isRequired,
+    components: object,
+    depth: number.isRequired,
+    id: number.isRequired,
+    wrap: number.isRequired
+  };
+
+  render() {
+    const { breadth, components, depth, id, wrap } = this.props;
+    const { TextBox } = components;
+
+    let result = (
+      <TextBox children={'TextBox ${id % 3}'} color={id % 3} outer>
+        {depth === 0 && <TextBox children={'Depth 0'} color={(id % 3) + 3} />}
+        {depth !== 0 &&
+          Array.from({ length: breadth }).map((el, i) => (
+            <TextTree
+              breadth={breadth}
+              components={components}
+              depth={depth - 1}
+              id={i}
+              key={i}
+              wrap={wrap}
+            />
+          ))}
+      </TextBox>
+    );
+    for (let i = 0; i < wrap; i++) {
+      result = <TextBox>{result}</TextBox>;
+    }
+    return result;
+  }
+}
+
+export default TextTree;

packages/benchmarks/src/impl.js

@@ -8,6 +8,7 @@ type ComponentsType = {
   Box: Component,
   Dot: Component,
   Provider: Component,
+  TextBox: Component,
   View: Component
 };
 

packages/benchmarks/src/implementations/react-native-web/TextBox.js

@@ -0,0 +1,39 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+import { StyleSheet, Text } from 'react-native';
+
+const TextBox = ({ color, outer = false, ...other }) => (
+  <Text {...other} style={[styles.root, styles[`color${color}`], outer && styles.outer]} />
+);
+
+const styles = StyleSheet.create({
+  root: {
+    color: 'white'
+  },
+  outer: {
+    fontStyle: 'italic'
+  },
+  row: {
+    flexDirection: 'row'
+  },
+  color0: {
+    color: '#14171A'
+  },
+  color1: {
+    color: '#AAB8C2'
+  },
+  color2: {
+    color: '#E6ECF0'
+  },
+  color3: {
+    color: '#FFAD1F'
+  },
+  color4: {
+    color: '#F45D22'
+  },
+  color5: {
+    color: '#E0245E'
+  }
+});
+
+export default TextBox;

packages/benchmarks/src/implementations/react-native-web/index.js

@@ -1,11 +1,13 @@
 import Box from './Box';
 import Dot from './Dot';
 import Provider from './Provider';
+import TextBox from './TextBox';
 import { View } from 'react-native';
 
 export default {
   Box,
   Dot,
   Provider,
+  TextBox,
   View
 };

packages/benchmarks/src/index.js

@@ -1,5 +1,6 @@
 import App from './app/App';
 import impl from './impl';
+import TextTree from './cases/TextTree';
 import Tree from './cases/Tree';
 import SierpinskiTriangle from './cases/SierpinskiTriangle';
 
@@ -50,6 +51,13 @@ const tests = {
     },
     Provider: components.Provider,
     sampleCount: 100
+  })),
+  'Mount text tree': createTestBlock(components => ({
+    benchmarkType: 'mount',
+    Component: TextTree,
+    getComponentProps: () => ({ breadth: 6, components, depth: 3, id: 0, wrap: 2 }),
+    Provider: components.Provider,
+    sampleCount: 50
   }))
 };