Comments (7)
Hi @lewisl9029 -- React Native uses the style
prop to pass styles to components. It's essentially equivalent to css
, but it also accepts arrays.
Example:
const BigText = glamorous.text({fontSize: 20})
<BigText style={{color: 'blue'}}>Hi</BigText>
from glamorous-native.
I can look into this. I noticed that this isn't working though:
const BigText = glamorous.text({fontSize: 20})
<BigText color='blue' >Hi</BigText>
The fontSize is 20 but the color is not blue. I'll look into that as well.
from glamorous-native.
That should be the same behavior as in glamorous
, if @kentcdodds could confirm.
"properties as styles" is only supported when the GlamorousComponent
class has propsAreStyleOverrides = true
defined on it.
Your example would work with the following changes:
const BigText = glamorous.text({fontSize: 20})
+BigText.propsAreStyleOverrides = true
<BigText color='blue' >Hi</BigText>
The built-in components all have propsAreStyleOverrides
enabled, which is why the following works
<glamorous.Text color="blue">Blue text</glamorous.Text>
from glamorous-native.
Confirmed, this is by design 👍
from glamorous-native.
Note: another way to accomplish what you're after would be:
const BigText = glamorous.text({fontSize: 20})
<BigText css={{color: 'blue'}}>Hi</BigText>
from glamorous-native.
Note: another way to accomplish what you're after would be:
const BigText = glamorous.text({fontSize: 20}) <BigText css={{color: 'blue'}}>Hi</BigText>
I'm fairly new to react-native and glamorous-native, so please excuse me if I'm missing something super obvious, but I'm wondering if the above example (with the css={{color: 'blue'}}
prop) has an equivalent in glamorous-native? If not, are there any plans to add the css
prop to glamorous-native components?
My current preference with glamorous on the web is to use the css
prop over the component factories because it allows you to have styles immediately visible in-context inside your component tree, but still encapsulated inside a single prop so you can turn off propsAreStyleOverrides
and keep your component API explicit.
Right now I'm using a custom shim over the glamorous-native factories to pick off the css prop and apply it as args to each factory to maintain a consistent API:
const create = React.createElement
const glamorousFactoryArgs = (css) => F.unnest(F.append(css, []))
const withCssProp = (glamorousFactory) => ({ css, ...props }) =>
create(glamorousFactory(...glamorousFactoryArgs(css)), props)
But it'd be great if there was an officially supported way to accomplish the same thing.
I'm totally willing to take some time to look into this and make a PR if this is something desirable but not high enough priority for the primary maintainers to work on at the moment.
from glamorous-native.
Ah that makes a ton of sense. For some reason I had the impression that you could only use style
in React Native with the stylesheet references from the props of whatever gets returned by StyleSheet.create()
. But if you could simply pass in plain style objects, that would be perfect.
from glamorous-native.
Related Issues (20)
- Creating styles that can be passed as style prop HOT 1
- Typescript fails to build due to glamorous type errors HOT 3
- Jest/Enzyme with glamorous components: TypeError: this._instance.render is not a function HOT 1
- ThemeProvider breaks build. Listview deprecated error. HOT 2
- Use emotion-native to get rid of ListView error HOT 6
- Support passing in styles as a single css prop HOT 2
- Glamorous component does not render correctly HOT 5
- Add propsAreStyleOverrides to TypeScript definitions HOT 5
- Support propsAreStyleOverrides in the glamorous config
- glamorous.View onLayout is not called in production Android builds HOT 9
- View pointerEvents not working on release builds only HOT 5
- <TouchableWithoutFeedback> onPress never fired when children is glamorous view HOT 2
- Dynamically determine which react-native elements are supported
- Media queries? HOT 2
- Unexpected token import when testing with Jest + TypeScript HOT 3
- Library bundle
- Use with storybook not working HOT 10
- Forward ref with new React.forwardRef instead of innerRef
- Question: How to correctly type (TS) glamorous(CustomComponent)?
- [question] how does this work? HOT 7
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 glamorous-native.