Comments (7)
I guess you have bad styles architecture.
What is the purpose of creating two different styles?
const variants = {
white: StyleSheet.create({
container: {
backgroundColor: 'white',
},
}),
primary: StyleSheet.create({
container: {
backgroundColor: colors.primary,
},
}),
};
It would be better when it would be inside main styles declaration.
Or if you really want dynamic creation it can be like this:
const viewStyle = [
styles.container,
{
backgroundColor: variant === 'white' ? 'white' : colors.primary
},
...logonScreen ? [styles.center] : [],
];
from eslint-plugin-react-native.
I'm having the same issue. Variant styles are accessed using bracket notation, but the linter doesn't understand it.
I guess you have bad styles architecture.
That's not a very helpful comment. What's bad about it?
from eslint-plugin-react-native.
I'm having the same issue. Variant styles are accessed using bracket notation, but the linter doesn't understand it.
I guess you have bad styles architecture.
That's not a very helpful comment. What's bad about it?
But I described in my comment that having multiple Styles.createStylesheet is not very convenient.
What is the point having multiple styles objects not within main style object?
from eslint-plugin-react-native.
I'm having the same issue. Variant styles are accessed using bracket notation, but the linter doesn't understand it.
I guess you have bad styles architecture.
That's not a very helpful comment. What's bad about it?
But I described in my comment that having multiple Styles.createStylesheet is not very convenient.
Not really. You said:
It would be better when it would be inside main styles declaration.
But what's "better" about it? Having an object with multiple properties, where each key is the name and each value is a style makes sense IMO when you have a lot of style changes from variant to variant. It makes it very easy to see the differences between each variant.
Let's say we have 5 variants and each variant has 3 style properties (i.e. backgroundColor, borderWidth etc). Using your suggestion that would quickly become unmanageable. Ternary operators will be super messy, and it would require at least 5 lines in the array of styles rather than just 1 line when using bracket notation.
from eslint-plugin-react-native.
Yeah that is your option. Could you please provide short example and I will edit it how I see it. Just to see smth
from eslint-plugin-react-native.
Yeah that is your option. Could you please provide short example and I will edit it how I see it. Just to see smth
Here you go: https://snack.expo.dev/jjL9yJ3ze
from eslint-plugin-react-native.
Yeah that is your option. Could you please provide short example and I will edit it how I see it. Just to see smth
Here you go: https://snack.expo.dev/jjL9yJ3ze
I would go with theme for your case, but it could also be done like this: https://snack.expo.dev/@romick/variants
Pros: render code is cleaner, no array merge styles logic, all possible styles are cached and is not recreated on every render. Easy to change any style without no changes to break other variant style. All styles within createStylesheet is processed by the linter.
Cons: duplicated styles in some style object that can cause difficulties in adding some style for each variant style.
from eslint-plugin-react-native.
Related Issues (20)
- Unhandled case no-inline-styles + typescript when add type casting `as T`
- Unhandled case no-inline-styles + typescript when add type casting `as T` HOT 1
- Eslint 8.0 error when using --fix: Fixable rules must set the `meta.fixable` property to "code" or "whitespace" HOT 1
- [Feature] Allow rules options to include message
- Eslint 8 support HOT 3
- no-raw-text gives a false positive with spaces?
- no-raw-text breaking eslint when nearby component has an inline function
- TypeError: Cannot read property 'name' of undefined
- Custom StyleSheet ordering? HOT 1
- When does eslint 8 support available? HOT 3
- Help with running the plugin?
- [no-inline-styles] ternary style gets mistakenly reported HOT 3
- Rule to warn about styles such as `textAlignVertical` that aren't multi platform (it doesn't support iOS) HOT 1
- Ensure each style property is on its own line when inside StyleSheet.create() HOT 1
- TypeError: this.styleSheets[styleSheetName].filter is not a function HOT 1
- Maintainers wanted! HOT 4
- [react-native/no-raw-tex] crash when have a template literals string HOT 1
- use with new eslint config system (eslint.config.js) HOT 1
- Support "Flat Config" (ESLint 9) HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from eslint-plugin-react-native.