RxText.perf-test.tsx

import React from 'react';
import { measurePerformance } from 'reassure';
import { ScrollView } from 'react-native';
import { RxText } from 'src/components/Typography/RxText';

jest.setTimeout(30000);

const testText = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec orci vitae dui
egestas bibendum. Aliquam quis ex mauris. Pellentesque tincidunt sed ligula nec lobortis.
Donec convallis vitae orci vel auctor. Fusce nec dui ut nisi pellentesque porttitor. Nam
tempus non risus sit amet viverra. Nunc id sem rhoncus, cursus nunc ac, viverra nunc. In
erat dui, iaculis vel semper quis, accumsan id mauris. Morbi id posuere risus. Nunc a erat
at ipsum eleifend tempor. Nulla eget enim ac arcu eleifend commodo. Nulla fringilla, dui id
semper vestibulum, ex erat imperdiet enim, finibus commodo nulla nunc aliquet metus. Donec
pulvinar, leo sed vestibulum suscipit, tellus leo mollis odio, ut ornare augue dolor et
tortor. Aenean vitae velit ac mi placerat fermentum ut in velit. Proin fermentum neque sed
odio varius fermentum. In cursus tortor non ante semper, in malesuada urna iaculis. In
tristique ipsum non erat convallis, nec sagittis enim finibus. Donec scelerisque tristique
purus eleifend ornare. Vestibulum vitae iaculis enim, ut vehicula dolor. Mauris et pretium
dui. Curabitur fringilla nulla augue, vel hendrerit dui faucibus tincidunt. Aliquam bibendum
tortor arcu. Maecenas semper finibus odio eget gravida. Suspendisse fermentum, quam vel
porta convallis, neque massa ultrices libero, nec mattis dui urna a dui. Maecenas suscipit,
ligula eu eleifend fringilla, nunc erat pulvinar augue, et vestibulum risus elit sed turpis.
Sed rhoncus arcu a lacinia molestie. Vestibulum aliquet enim odio, sit amet luctus est
tempus eu. Integer et augue sodales, rutrum nisi elementum, tincidunt nisl. Morbi gravida
diam nulla, sit amet tempus dui dapibus eu. In vel finibus augue. In erat erat, consequat in
eleifend eget, vehicula a est. Duis pretium rutrum diam ac iaculis. Suspendisse posuere arcu
at posuere maximus. Ut congue pulvinar arcu. Nulla viverra lectus fringilla, ultricies
libero a, varius metus. Phasellus non suscipit purus, ut rutrum quam. Maecenas fringilla
mauris arcu, et faucibus enim pretium sed. Cras varius urna at magna hendrerit cursus. Etiam
felis nulla, rutrum sed ultrices nec, semper sit amet turpis. Nunc gravida venenatis arcu,
nec porta turpis efficitur vitae. Phasellus venenatis ipsum eget nisl pharetra, ut commodo
augue porta. Quisque sit amet justo pellentesque, aliquet mauris et, dictum neque. Sed
imperdiet lectus vel odio ullamcorper, id pretium nunc dapibus. Donec dapibus accumsan
posuere. Sed volutpat sed massa sagittis aliquet. Aenean tempor gravida bibendum. Phasellus
tincidunt, arcu vel blandit semper, ante arcu facilisis tellus, nec ornare lorem libero vel
nisi. Ut sollicitudin ac velit quis pretium. Duis at ultricies magna, eget commodo orci.
Etiam congue lorem non libero semper viverra. Donec non enim purus. Mauris at mauris justo.
Duis ultrices mi vitae mauris gravida sollicitudin vel nec massa. In efficitur odio non
justo rhoncus tristique. Donec placerat malesuada imperdiet. In ultricies quam sed mi
dignissim rhoncus. Suspendisse sed odio et massa viverra sodales. Aliquam tincidunt, ex ac
tincidunt aliquam, ipsum ex hendrerit sem, vel tempor augue diam imperdiet eros. Sed nec
congue erat, a commodo erat. Aliquam eget egestas nulla. Morbi vel odio venenatis nulla
interdum vehicula. Fusce magna ante, viverra ut dui sed, finibus ornare quam. Vestibulum
suscipit vehicula vulputate. Sed nec nisi vel lectus porttitor sollicitudin. Maecenas
tincidunt metus euismod hendrerit sollicitudin. Nulla facilisi. Nulla facilisi. Nulla`;

test('RxText performance test with 6000 elements', async () => {
  await measurePerformance(
    <ScrollView>
      {Array.from({ length: 6000 }).map((_, index) => (
        <RxText
          // eslint-disable-next-line react/no-array-index-key
          key={index}
          color={index % 2 === 0 ? 'red' : 'green'}
          weight={index % 2 === 0 ? 'regular' : 'bold'}
          size={index % 4 === 0 ? 16 : 18}>
          {testText}
        </RxText>
      ))}
    </ScrollView>,
    { runs: 10, warmupRuns: 2 },
  );
});

RxText.tsx

import React from 'react';
import { Text, TextProps, StyleSheet, TextStyle } from 'react-native';

interface Props extends TextProps {
  weight?: 'regular' | 'bold';
  color?: 'red' | 'blue' | 'green';
  size?: 16 | 17 | 18 | 32;
  type?: 'H1' | 'Label';
}

export const RxText: React.FC<Props> = ({
  weight = 'regular',
  color = 'red',
  size = 16,
  type,
  ...props
}) => {
  let style: TextStyle = {
    ...styles[weight],
    fontSize: size,
    color,
  };

  if (type === 'H1') {
    style = { ...style, ...styles.h1 };
  } else if (type === 'Label') {
    style = { ...style, ...styles.label };
  }

  const combinedStyle = StyleSheet.create({ style });

  return <Text {...props} style={combinedStyle.style} />;
};

const styles = StyleSheet.create({
  regular: {
    fontFamily: 'OpenSans-Regular',
    fontWeight: '400',
  },
  bold: {
    fontFamily: 'OpenSans-Bold',
    fontWeight: '700',
  },
  h1: {
    fontSize: 32,
    fontWeight: '400',
    lineHeight: 40,
    letterSpacing: -0.5,
  },
  label: {
    fontSize: 16,
    lineHeight: 17,
    color: 'pink',
  },
});