[Question] Auto width View with <UITextView> inside

[mk-nickyang]

Hi there, just wondering how to do an auto-width View with <UITextView> inside?

For example in the code below, the one with <UITextView> will take up the whole width, while the one with RN <Text> will render as inline text

import { Text, View } from "react-native";
import { UITextView } from "react-native-uitextview";

export default function HomeScreen() {
  return (
    <View
      style={{
        flex: 1,
        alignItems: "center",
        justifyContent: "center",
        gap: 8,
      }}
    >
      <View style={{ backgroundColor: "blue" }}>
        <UITextView selectable uiTextView style={{ color: "white" }}>
          UITextView - Hello World
        </UITextView>
      </View>

      <View style={{ backgroundColor: "blue" }}>
        <Text style={{ color: "white" }}>Text - Hello World</Text>
      </View>
    </View>
  );
}

I'm using

"expo": "~51.0.28",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-native": "0.74.5",
"react-native-uitextview": "^1.4.0"

Awesome library btw, appreciate the great work 🙏

[antoniogoulao]

+1
It looks like an issue still to be solved since on the 🦋 app, for messages they use a workaround to copy text.

[yanoyuki]

+1

[yanoyuki]

I created the following component, assuming that children will not change after the initial render.

This component ensures that the width of <UITextView> matches the dimensions of a placeholder <Text> element measured during the initial render. In my case, this approach worked without any issues.

import { type ComponentProps, memo, useState } from "react";
import { type LayoutChangeEvent, Text } from "react-native";
import { UITextView } from "react-native-uitextview";

const SelectableText = memo(({ children, style, ...props }: ComponentProps<typeof UITextView>) => {
  const [measuredWidth, setMeasuredWidth] = useState<number | null>(null);

  const handleLayout = (e: LayoutChangeEvent) => {
    const { width } = e.nativeEvent.layout;
    setMeasuredWidth(width);
  };

  if (measuredWidth === null) {
    return (
      <Text {...props} style={[style, { opacity: 0 }]} onLayout={handleLayout} selectable>
        {children}
      </Text>
    );
  }

  return (
    <UITextView {...props} style={[style, { width: measuredWidth, maxWidth: measuredWidth }]} selectable uiTextView>
      {children}
    </UITextView>
  );
});

export default SelectableText;

To improve the user experience, adding opacity: 0 to <Text> until <UITextView> is rendered might be helpful. This prevents users from briefly seeing the placeholder content.