mobile app want graphical text to change font size per line automatically, like on tiktok/instagram alternating lines different sizes – React native

I totally misunderstood what PixelRatio.getFontScale did. I thought it would provide the average width a single character takes up on screen. If you can find a way to get a rough estimate of the width of a single character, then this method will work link:

import { useEffect, useState } from 'react';
import { View, StyleSheet, Text, PixelRatio } from 'react-native';
import rnTextSize from 'react-native-text-size';
import reduce from 'awaity/reduce';
import useViewLayout from './useViewLayout';
const fontScale = PixelRatio.getFontScale();

const showLayoutValues = true

export default function MultiLineText({
  width,
  containerStyle,
  textStyle1 = { fontSize: 16 },
  textStyle2 = { fontSize: 22 },
  str,
  ...textProps
}) {
  // containerLayout will provide the max width each line can have
  const [containerLayout, onContainerLayout] = useViewLayout();

  // lines was created in a useMemo hook but I wasnt sure if
  // useMemo could handle async
  const [lines, setLines] = useState([]);
  useEffect(() => {
    const calcLines = async () => {
      let words = str.split(' ').filter((s) => s.trim().length);
      let newLines = await words.reduce(
        async (prevPromise, curr, index) => {
          const prev = await prevPromise;
          let lineIndex = prev.length - 1;
          let style = index % 2 == 0 ? textStyle1 : textStyle2;
          const fontSize = style.fontSize;
          // I wanted to use this https://github.com/aMarCruz/react-native-text-size/
          // to measure text width but expo doesnt support it
          const config = {
          // if you exported from expo and link rnTextSize set this to true
            useMeasureModule:false,
            fontProps:style
          }
          const useMeasureModule = false;
          let lineWidth = await getTextWidth(
            prev[lineIndex],
            fontSize,
            config
          );
          let wordWidth = await getTextWidth(curr, fontSize, config);
          // if currentLine can fit the next word add it
          if (lineWidth + wordWidth < (width || containerLayout.width))
            prev[lineIndex] += curr + ' ';
          // or put it on the next line
          else {
            prev[lineIndex + 1] = curr + ' ';
          }
          return prev;
        },
        ['']
      );
      setLines(newLines);
    };
    calcLines();
  }, [str, containerLayout, width, textStyle1, textStyle2]);
  return (
    <>
      {showLayoutValues && <Text>Container Layout: {JSON.stringify(containerLayout,null,4)}</Text>}
      <View
        style={[styles.container, containerStyle]}
        onLayout={onContainerLayout}>
        {lines.map((line, i) => (
          <Text
            {...textProps}
            // to ensure that lines dont wrap
            numberOfLines={1}
            style={[textProps.style, i % 2 == 0 ? textStyle1 : textStyle2]}>
            {line}
          </Text>
        ))}
      </View>
    </>
  );
}

const getTextWidth = async (str, fontSize, config={}) => {
  const {fontProps, useMeasureModule} = config;
  if (!useMeasureModule) {
    // random mathing
    return str.length * fontScale * fontSize ** 0.8;
  }
  let measure = await rnTextSize.measure({
    ...fontProps,
    text: str,
  });
  return measure.width;
};

const styles = StyleSheet.create({
  container: {
    width: '100%',
  },
});

And then in use:

export default function App() {
  return (
    <View style={styles.container}>
      <MultiLineText
        containerStyle={{
          width: '100%',
          backgroundColor: '#eef',
          alignSelf: 'center',
          alignItems: 'center',
        }}
        textStyle1={styles.text}
        textStyle2={styles.text2}
        str="I am really not sure as of how long this text needs to be to exceed at least 3 lines. I could copy and paste some stuff here but I think if I just type and type it would be quicker than googling, copying, and pasting"
      />
    </View>
  );
}