eslint-plugin-react-native
eslint-plugin-react-native copied to clipboard
Raw text cannot be used outside of a <Text> tag when using style property
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 <Text> 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.
Did you try the latest one, 3.9.1? It fixes this one #266
Hi @Intellicode,
Thanks for the suggestion.
I've just upgraded to 3.9.1, but unfortunately the problem remains.
![Screenshot 2020-08-28 at 15 55 55](https://user-images.githubusercontent.com/15199031/91572672-fecc3600-e946-11ea-895f-c398e10d4499.png)
Same here. Probably time to memoize this value, but still an issue
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>
);
};
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.
problem still exists in 3.10.0
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?