Comments (10)
I gave it some thought and since I don't want to lose sync with your library, I'll implement something similar to your 2nd suggestion.
I'll have a theme object composed of NativeTachyons.styles + a dynamic color object, which is generated with the same logic you used for the palette (it generates the color, background and border syntax)
const theme = {
styles: NativeTachyons.styles,
colors: palette['colors1']
}
Then I can switch palettes whenever needed
from react-native-style-tachyons.
Glad it's of use :).
The library behaves like a singleton, yes. If I reuse styles I tend to factor them out into own react-components. Is that what you meant?
from react-native-style-tachyons.
Thanks for the reply @fab1an !
Well, sort of.
What I was visualizing is having separate palettes (one for each theme), then 'somehow' use each style to display the ui.
from react-native-style-tachyons.
So you are talking about colors only?
from react-native-style-tachyons.
Right.
With platform.select you can account for differences between android/ios.
Your library handles typographic/spacing scaling.
I currently have two stylesheets in my app, the user can select between them.
Each stylesheet has different palettes of colors, as well as ios/android specific code.
Just trying to figure out how to use this library in this context.
from react-native-style-tachyons.
I can imagine a couple of ways of approaching this:
- specify two palettes with prefixed names and switch between those in the components
- just specify your colors in a normal stylesheet and mix it with tachyons styling.
from react-native-style-tachyons.
Right, that makes sense !
I'll play around with this a bit.
Thanks @fab1an !
from react-native-style-tachyons.
@fab1an, I tried a couple of things.
For my use case, I had to change the library a bit, most notably because the singleton wasn't allowing me to have dynamic styling.
What I do in my components is
...
const { theme } = this.props.theme
<View style={theme.background}>
</View>
Somewhere else in the code, I make 'this.props.theme' point to another stylesheet when the user changes themes.
The changes I made were:
-- /* placeholder */
-- styles: Object.create(null),
++ /* placeholder */
++ // styles: Object.create(null),
-- // _.assign(NativeTachyons.styles, StyleSheet.create(styleSheet));
++ let styles = Object.create(null);
++ _.assign(styles, StyleSheet.create(styleSheet));
++ return styles;
-- export const styles = NativeTachyons.styles;
++ // export const styles = NativeTachyons.styles;
This is breaking api, so I didn't create a PR
I also make lighten/darken optional
-- /* light and dark alternatives */
-- result[`light-${key}`] = Color(val).lighten(options.colors.lighten).hexString();
-- result[`dark-${key}`] = Color(val).darken(options.colors.darken).hexString();
++ /* light and dark alternatives */
++ if (options.colors.lighten !== 0) {
++ result[`light-${key}`] = Color(val).lighten(options.colors.lighten).hexString();
++ }
++ if (options.colors.darken !== 0) {
++ result[`dark-${key}`] = Color(val).darken(options.colors.darken).hexString();
++ }
from react-native-style-tachyons.
If you want to you can also just modify the styles
object returned by RNT.
Or you could specify colors like colorButton-theme1
, colorButton-theme2
and use a construct like this:
render() {
return (
<View cls={`bg-colorButton-${themeName}`}>
</View>
)
}
Or assign it to the styles object:
const themes = {
theme1: {
backgroundColor: "ff66ff",
…
},
theme2: {
},
}
render() {
return (
<View styles={[s.flx_i, s.h2, themes[themeName]]}>
</View>
)
}
Or, in the last example just reference the default-styles again from your theme. The possibilities are endless ;)
from react-native-style-tachyons.
Thanks ! I'll be testing your suggestions.
from react-native-style-tachyons.
Related Issues (20)
- bug: styles values are undefined on the first load HOT 9
- Bug: wrapped component can return null HOT 4
- Adding separate config for font rem HOT 15
- Line height is broken HOT 7
- Add Examples of Responsive Font Sizes HOT 1
- Component Loses Style After Second Render With Mobx HOT 1
- Get the Raw Config File Passed to Style Tachyons HOT 3
- How to change scales HOT 4
- Question: justify the text in Android HOT 1
- Can't override flexbox properties with defaults? HOT 2
- Upgrade to RN 0.56 HOT 5
- [feature] Provide option to not recurse the children HOT 2
- 'customStyles' documentation HOT 3
- FontWeight for custom font in Android HOT 2
- Can this wrap an entire React Native project? HOT 2
- is it possible to add typescript types file? as you know almost everyone now refactored to use typescript HOT 2
- is this still in active development? HOT 3
- Readme contains reference to tachyons colours HOT 1
- tc no longer valid HOT 1
- Security Updates 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 react-native-style-tachyons.