Example of a dropcap in React Native/Expo

App.tsx

import { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';

import ParallaxScrollView from '@/components/ParallaxScrollView';
import { ThemedView } from '@/components/ThemedView';

const Paragraph = ({ dropCap = false, dropCapLines = 3, children }) => {
  const [lines, setLines] = useState<string[]>([]);
  const [firstLetter, setFirstLetter] = useState<string>();
  const [lineHeight, setLineHeight] = useState<number>(16);

  if (dropCap && lines.length > 0) {
    const [firstLine, secondLine, thirdLine, ...restLines] = lines;
    return (
      <View style={{ flexDirection: 'column', backgroundColor: 'red' }}>
        <View style={{ flexDirection: 'row' }}>
          <Text style={{
            lineHeight: lineHeight * dropCapLines,
            fontSize: 48,
            alignSelf: 'center',
            backgroundColor: 'blue',
          }}>{firstLetter}</Text>
          <Text style={{ flex: 1 }}>{[firstLine, secondLine, thirdLine].join('')}</Text>
        </View>
        <View>
          <Text>{restLines}</Text>
        </View>
      </View>
    )
  }

  if (dropCap) {
    const [firstLetter, ...text] = children.trim();
    return (
      <View style={{ flexDirection: 'row', backgroundColor: 'red' }}>
        <View style={{ flexDirection: 'row' }}>
          <Text style={{
            fontSize: lineHeight * dropCapLines,
            alignSelf: 'flex-start',
            backgroundColor: 'blue',
          }}>{firstLetter}</Text>
          <Text style={{ flex: 1 }} onTextLayout={(event) => {
            setFirstLetter(firstLetter);
            setLineHeight(event.nativeEvent.lines[0].height);
            setLines(event.nativeEvent.lines.map((line) => line.text))
          }}>{text.join('')}</Text>
        </View>
        <View>
          <Text></Text>
        </View>
      </View>
    )
  }x
  return (<Text>{children}</Text>)
}

export default function HomeScreen() {
  return (
    <ParallaxScrollView
      headerBackgroundColor={{ light: '#A1CEDC', dark: '#1D3D47' }}
      headerImage={<></>}
    >
      <View style={styles.titleContainer}>
        <Paragraph dropCap={true}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
          incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
          laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
          esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
          officia deserunt mollit anim id est laborum.</Paragraph>
      </View>
    </ParallaxScrollView>
  );
}

const styles = StyleSheet.create({
  titleContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
  },
  stepContainer: {
    gap: 8,
    marginBottom: 8,
  },
  reactLogo: {
    height: 178,
    width: 290,
    bottom: 0,
    left: 0,
    position: 'absolute',
  },
});