crtxdmp.

import styled, {css} from 'styled-components/native';
import {StyleProp, ViewStyle} from 'react-native';

const TextContainer = styled.View`
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
`;

const TextComponent = styled.Text`
  color: #333;
  font-size: 16px;
  line-height: 24px;
`;

interface TextComponentProps {
    parts: string[];
    containerStyle?: StyleProp<ViewStyle>;
}

function Text(props: TextComponentProps) {
    if (props.parts !== undefined) {
        const {containerStyle} = props;
        delete props.containerStyle;

        return (
            <TextContainer style={containerStyle}>
                {props.parts.map((text) => (
                    <TextComponent {...props}>{text}</TextComponent>
                ))}
            </TextContainer>
        );
    }

    return <TextComponent {...props}>{props.children}</TextComponent>;
}

export default Text;

import Text from "./Text.tsx";

function render() {
    return <Text parts={["Long_word_will_wrap_exactly_", "here"]} />
}