使 React Native Text 组件在 Android 上的 TextInput 内不占用空间

Question

I have a Text element inside a TextInput that I want to make take no space. Here's a preview of the component:

export function Component() {
  function renderText() {
    return (
      <Text>
        This is normal text
        <Text style={styles.hiddenText}>This very long text should be hidden because it is metadata.</Text>
      </Text>
    );
  }

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        multiline={true}
      >
        {renderText()}
      </TextInput>
    </View>
  );
}

Here are the styles that I have applied to the Text element that I want to hide:

hiddenText: {
  fontSize: 0.000001,
  backgroundColor: 'red' // just to show that it actually appears on Android
}

These styles work as expected on iOS, but on Android the supposedly hidden Text element still occupies quite a lot of space ( see Snack demo ).

See iOS screenshot

See Android screenshot

In case you are wondering why I want to do this, the above is a simplified version of my real app. In reality, I have a text input that allows for adding comments and the users can also tag each other. My current implementation keeps the tagged user inside the text itself in the following format @user's full name|userId; because I found this approach to be the easiest in terms of manipulating the actual content of the text input. I have to keep the id of the user along with the full name as the id is what is actually sent to the API.

How can I hide the red background text on Android and make it look the same as on iOS?

Answer 1

I've done some amendments in your css, please have a look into below snack

https://snack.expo.io/KRMyR7wYq