Raw text cannot be used outside of a <Text> tag when using style property

[kimfucious]

Hi there,

I am probably doing something wrong, if not a lot of things, but I can't figure out what. I have Googled, and I have read through the issues here, but to no avail.

In brief, after a recent upgrade on a project to "eslint-plugin-react-native": "^3.8.1", I'm getting all kinda warnings.

These seem to be only on elements where I have implemented in-line styles, but there's so many, I'm not 100% sure.

If I delete the style prop, the warning goes away, but then so does the styling.

Here are a couple examples:

<Text style={{ ...theme.typography.subtitle, textAlign: "center" }}>
  To optimize your experience...
</Text>

<Text
  style={{
    ...theme.typography.title,
    textAlign: "center"
  }}
>
  Connect
  {primaryMusicStream === "spotify"
    ? " " + getPrimaryMusicStreamTitleCase(primaryMusicStream)
    : null}
</Text>

<Text style={theme.typography.subtitle}>
  Your Spotify playlist has been cleaned
</Text>

I'm not using StyleSheets, and theme.xxx is referencing an imported style sheet that looks like this:

...
export const theme = {
  dark: {
    buttons: {
      button: {
        buttonStyle: {
          backgroundColor: colors.primary,
          borderRadius: 8,
          width: 275
        }
      },
      blockButton: {
        containerStyle: { width: "100%" },
        buttonStyle: {
          backgroundColor: colors.primary,
          borderRadius: 0
        }
      },
...

The only way to make this warning to away--aside from disabling the rule--is to use variables in lieu of text, like this:

<Text style={styles.emoticon}>{cleaner}</Text>

But that seems like a lot of work, that I'm loath to consider.

Any clues and/or advice would be most appreciated.

[Intellicode]

Did you try the latest one, 3.9.1? It fixes this one #266

[kimfucious]

Hi @Intellicode,

Thanks for the suggestion.

I've just upgraded to 3.9.1, but unfortunately the problem remains.

[mjmasn]

Similar issue:

export const Comp = () => {
  return (
    <Text>
      <Text>The quick brown fox jumped over the lazy dog</Text>{" "}
      {/* Whitespace(s) cannot be used outside of a <Text> tag   ^ */}
      <Text>The quick brown fox jumped over the lazy dog</Text>
    </Text>
  );
};

[Intellicode]

Similar issue:

export const Comp = () => {
  return (
    <Text>
      <Text>The quick brown fox jumped over the lazy dog</Text>{" "}
      {/* Whitespace(s) cannot be used outside of a <Text> tag   ^ */}
      <Text>The quick brown fox jumped over the lazy dog</Text>
    </Text>
  );
};

I could reproduce this test, let me see what I can do. If anyone has time, a PR would be appreciated else it would have to wait until I have time to look into the issue in detail.

[pke]

problem still exists in 3.10.0

[Crafter-Y]

Getting the same Problem when declaring a custom Component:

const H1 = ({ children, style }: Props) => {
  return (
    <Text
      style={tw.style("text-4xl font-bold opacity-85 underline mb-4", style)}
    >
      {children}
    </Text>
  );
};

And then having something like this in my code:

<H1>Settings</H1>

I think this should not be an error, but I can understand why it is. Will there be a fix for that or is it intentional to throw an error there?

[karthikeyan-raju-focus]

Getting the same Problem when declaring a custom Component:

const H1 = ({ children, style }: Props) => {
  return (
    <Text
      style={tw.style("text-4xl font-bold opacity-85 underline mb-4", style)}
    >
      {children}
    </Text>
  );
};

And then having something like this in my code:

<H1>Settings</H1>

I think this should not be an error, but I can understand why it is. Will there be a fix for that or is it intentional to throw an error there?

@Crafter-Y did you find any solution for this error?