robinpowered / glamorous-native Goto Github PK
View Code? Open in Web Editor NEWDEPRECATED: ๐ React Native component styling solved
Home Page: http://npm.im/glamorous-native
License: MIT License
DEPRECATED: ๐ React Native component styling solved
Home Page: http://npm.im/glamorous-native
License: MIT License
See paypal/glamorous#125 for full proposal and discussion.
Dynamic glamorous component styles should also support context
const ContextStyledView = glamorous.view(
(props, theme, context) => ({ /* style w/ context */ })
)
glamorous-native
version: 1.20react-native
version: 0.50react
version: 16.1.0Relevant code:
import React, {Component} from "react";
import {AppRegistry, Text, View} from "react-native";
import g from "glamorous-native";
class Glamorous extends React.Component {
state = {
num: 0,
};
render() {
return (
<g.View
padding={50}
onLayout={() => {
this.setState({num: this.state.num + 1});
}}
>
<g.Text>Glamorous {this.state.num}</g.Text>
</g.View>
);
}
}
class Native extends React.Component {
state = {
num: 0,
};
render() {
return (
<View
style={{padding: 50}}
onLayout={() => {
this.setState({num: this.state.num + 1});
}}
>
<Text>Native {this.state.num}</Text>
</View>
);
}
}
const App = () => (
<View>
<Native />
<Glamorous />
</View>
);
AppRegistry.registerComponent("app", () => App);
In the example code both numbers should be in the initial view 1
and they should increase when ever the device is rotated.
This works with iOS (dev&prod) and with Android development but not with productions builds. The number stays at 0
.
The issue is with factory generated views too
const MyView = g.view({
padding: 50,
});
glamorous-native
version: 1.1.1react-native
version: 0.48.4react
version: 16.0.0-rc.3What you did:
N/A
What happened:
N/A
Reproduction:
N/A
Problem description:
In glamorous
, you can pass in any number of styles and/or functions into a styled element through a css
prop, in addition to the glamorous factory function:
const styledComponent = (props) => (
<glamorous.Div
css={[
{ fontSize: 12 },
(props) => props.shouldHighlight ? { color: 'yellow' } : undefined
]}
shouldHighlight={props.shouldHighlight}
>
text
</glamorous.Div>
)
In glamorous-native
, you can pass in any number of styles and/or functions into a styled element through the component factory function (as mentioned here: #33), but not through a prop.
As @ajwhite pointed out in #9 (comment), React Native's built-in style
prop can be used in a similar way as the css
prop in glamorous
, and can take any number of styles as an array, but AFAIK it can't take functions as a part of that array for computing dynamic styles based on the props of the component.
Suggested solution:
I'd like to see a css
prop added to glamorous-native
elements that behaves the same way as the css
prop in glamorous
, to make the interface more flexible and get closer to parity with glamorous
.
I'd be happy to take a shot at making a PR for this if people feel this is a worthwhile addition. Any pointers would be greatly appreciated!
glamorous-native
version:^1.1.2react-native
version:0.48.2react
version:16.0.0-alpha.12Relevant code.
__
export const Line_up_image_button = withTheme(({tagline, theme, onPress}) =>(
<TouchableOpacity onPress={onPress} style={{
width:theme.screen_width/2,
height:theme.buttonHeight,
borderRadius:theme.buttonBorderRadius,
justifyContent:theme.center,
alignItems:theme.center,
backgroundColor:theme.theme_color,
flexDirection:theme.row
}}>
<Image style={{width:theme.icon_5,height:theme.icon_5,backgroundColor:theme.white_color}}
source={{uri:require('./radio-checked.png')}}
/>
<Text style={{fontSize:theme.body_text,color:theme.white_color}}>{tagline}</Text>
</TouchableOpacity>
))
What you did:
...
What happened:
"style" is not a valid style property.
StyleSheet style:{
"style":{
"width":24,
"height":24,
"backgroundColor":"white"
},
"source":{
"uri":1
}
}
Reproduction:
.....
Problem description:
......
source is not a style,it is property
Suggested solution:
.....
There is a new official API to forward ref that should probably deprecate the need for "innerRef" prop: https://reactjs.org/blog/2018/03/29/react-v-16-3.html#forwardref-api
Hi there,
I'm running into a problem when rendering a Text component.
Simple example:
Component file:
import glamorous from 'glamorous-native';
export const Headline = glamorous.text();
In my parent component file:
<Headline>Some error</Headline>
Versions:
glamorous-native
version: 1.1.0react-native
version: 0.45.0react
version: 16.0.0-alpha.12Result:
When running inside Expo SDK 23 (RN50), if the children of a TouchableWithoutFeedback is a Glamorous View, the onPress callback is never fired.
This only happens in the js production build (the one you get with exp publish
).
I have made a very simple repro case here: https://github.com/slorber/glamorous-bug/blob/master/App.js
The app is published on Expo here: https://expo.io/@slorber/glamorous-bug
In DEV, all 5 buttons are pressable, while in prod build, only 3 of them do work.
This is probably the same issue that I reported here with different symptoms: #83
๐ the following is not supported in glamorous
import {Div, Span} from 'glamorous'
import glamorous from 'glamorous'
const {Div, Span} = glamorous
โ๏ธ is the proper approach
Mistakenly set this up to do named exports; these should be removed for parity, especially to avoid breaking changes if, in the future, these projects converge in some way.
glamorous-native
version: 1.4.0react-native
version: 0.55.2react
version: 16.3.1Relevant code.
import G from 'glamorous-native'
What you did:
I am importing glamorous-native in a project that is being tested with Jest + TypeScript
What happened:
/Users/adamduro/Workspace/projects/freebird/FreebirdNative/node_modules/glamorous-native/src/index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import createGlamorous from './create-glamorous'
^^^^^^
SyntaxError: Unexpected token import
> 1 | import G from 'glamorous-native'
2 | import * as React from 'react'
3 | import {
4 | BGImage,
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:316:17)
at Object.<anonymous> (src/components/ExploreCard/index.tsx:1:6043)
at Object.<anonymous> (src/components/ExploreCard/index.spec.tsx:4:7)
Reproduction:
Use TypeScript + react-native (with ts-jest
)
Problem description:
See above
Suggested solution:
It seems that glamorus-native does no pre-transpilation to it's npm package. I think this is where the problem lies. I cannot seem to get jest to transpile it for the test runner. Perhaps its a problem with my babel config.
Any suggestions are appreciated.
glamorous-native
version: 1.1.3 or 2.0.0react-native
version: 50 (Expo SDK23)react
version: 16I have a Glamorous View in my app with pointerEvents="none" that is fullscreen (it's an invisible layer on top of my app on which I use to display toasts)
I upgraded from Expo SDK 22(RN49, React 16 alpha6) to SDK23 (RN 50, React 16.0.0), and that invisible View started to intercept all touch events instead of letting them pass to the underlying layer. Note my Expo project is detached (not sure it's relevant).
It affects both Android and iOS, and ONLY in release mode. When the apps are run in Android debug or iOS debug, it does not happen.
Note that as of React 16 upgrade I had to bump Glamorous-native too (from 1.0.0 to 1.1.3).
I suspect this bug is related to Glamorous-native because:
This only works in debug:
const ToastSurface = ({ children }) => (
<View
position="absolute"
zIndex={1}
width="100%"
height="100%"
pointerEvents="none"
justifyContent="flex-end"
paddingBottom={55}
>
{children}
</View>
);
This always works in both debug + release:
const ToastSurface = ({ children }) => (
<ReactNativeView
style={{
position: 'absolute',
zIndex: 1,
width: '100%',
height: '100%',
pointerEvents: 'none',
justifyContent: 'flex-end',
paddingBottom: 55,
}}
pointerEvents="none"
>
{children}
</ReactNativeView>
);
This looks related to #81
With the merge of #57, we'll want to add some tests that verify stateless function's are not provided with refs
Examples can be found in examples/
. Following glamorous examples, we'll be adding a README
overviewing some sample usages, and add a couple example projects as well
glamorous-native
version: 1.1.2react-native
version: 0.49.0-rc2react
version: 16.0.0-beta.5Calls to glamorous.view
or glamorous(View)
create views which don't render any content
View
s styled using glamorous
don't render in release build config.
Debug | Release |
---|---|
Repro repo is here: https://github.com/eliperkins/GlamorousQuirk
glamorous.view
or glamorous(View)
.Release
glamorous.view
don't appear.This seems to only affect the Release build config which is pretty strange, since there is almost no forking logic within the repo for __DEV__
, and its just for theming. This bug can be repro'ed without any theming.
Additionally, glamorous.text
views render just fine.
In the initial codebase, glamorous-native
is set up as 1-1 as possible with glamorous
, both in the public and private APIs.
The intention here is to allow efforts by contributors, reviewers, and onlookers from either project to effortlessly navigate through the project, the codebase, and code changes.
As we all have different styles to approaching problems - I would probably set things up a little differently, but I see more value in having a similar codebase.
How do you rate the importance of keeping the implementation under the hood (the private APIs) as close to glamorous
as possible?
Parity story for glamorous
Issue Reference: paypal/glamorous#133
PR Reference: paypal/glamorous#149
Currently glamorRules like this one aren't cached:
const Row = glamorous.view(
{
flexDirection: "row"
},
(props) => ({
justifyContent: props.centered ? "center" : "flex-start"
}),
}
...
<Row centered/>
It seems they should if I want to use Row
throughout my app. That's perhaps hundreds of uncached styles. But then if we cache styles, if we use a rule to animate a component, then we over cache by creating a cache item for each frame. Example.
(props) => {
const {top, right, bottom, left} = props
const isAbsolute = [top, right, bottom, left].filter(p => typeof p === "number").length > 0
return {
position: isAbsolute ? "absolute" : "relative",
top,
right,
bottom,
left,
}
}
So, just a thought. What if we both:
Thoughts?
glamorous-native
version: ^1.0.2
react-native
version: custom build of 0.27.3
react
version: 15.1.0
This is largely a duplication of: styled-components/styled-components#618
Relevant code.
scrollToInput () {
this.focusTimeout = setTimeout(() => {
this.scrollView.getScrollResponder().scrollResponderScrollNativeHandleToKeyboard(
ReactNative.findNodeHandle(this.textInput),
120,
true
);
}, 50);
}
...
<TextInput
innerRef={component => this.textInput = component}
value={team}
returnKeyType={'next'}
enablesReturnKeyAutomatically={true}
autoCorrect={false}
autoCapitalize={'none'}
placeholder={I18n.t('pairing.team.placeholder')}
textAlign="center"
onFocus={() => this.scrollToInput()}
onChangeText={text => onNameChange(text)}
onSubmitEditing={onComplete}
/>
What you did:
Tapping the input triggers the scrollToInput
function which requires the ref
for the ReactNative.findNodeHandle
Reproduction:
Create a glamorous.textInput
and assign it an innerRef
prop. Any sort of listener or interaction will error.
Problem description:
Glamorous-native components can handle ref
's but cannot handle innerRef
's.
From Phil's comment on the Styled Components repo
We would have to expose
innerRef
and the wrapped component would have to acceptinnerRef
and pass it asref
to one of the children. Otherwise we'd have to check what it renders, clone it, and pass that on, which is not even good in terms of correctness, since the user might render more than one element anyway.
Suggested solution:
Suggestions outlined here
The published version of this library should be bundled and transpiled appropriately.
Currently the original source is published to npm, but it can cause issues in certain testing environments.
Instead, we should build a bundle and publish that as the module to npm.
This is a feature that should be added to stay in parity with glamorous
.
Tracking issue for paypal/glamorous#135
Example usages:
const StyledView = glamorous.view({
padding: 10
})
const StyledText = View.withComponent(Text)
Grepped project/docs for "media" and "query". Nothing. Just confirming no lib in RN has:
No action is really necessary, except maybe to update documentation to say what version of RN it is written to be compatible with. There is no reasonable expectation that you should support older versions of a project that moves this fast, so there should just be a compatibility section.
Yesterday there seemed to be an issue with RN 0.42.0 where it would red screen (but I can't reproduce it now) It seemed to resolve when we upgraded to 0.44.0
Otherwise, amazing work!
It would be great to have a sibling icon for this project -- ideally a slight touch to the existing glamorous
icon, perhaps with "native" text below it
References:
cc @kentcdodds
glamorous-native
version: 0.0.2react-native
version: 0.44.0react
version: 16.0.0-alpha.6Relevant code.
const StyledTouchableHighlight = glamorous.touchablehighlight(
styles.defaults,
{
paddingVertical: 9,
paddingHorizontal: 18,
},
(props) => {
return {
backgroundColor: colors(getButtonColorKey(props), 0, getAlpha(props)),
};
}
);
const StyledButtonText = glamorous.text(styles.defaults, styles.textDefaults, {
color: 'white',
fontWeight: '900',
});
const Button = (props) => {
return (
<StyledTouchableHighlight
{...props}
underlayColor={colors(getButtonColorKey(props), 1, getAlpha(props))}
>
<StyledButtonText>{props.text}</StyledButtonText>
</StyledTouchableHighlight>
);
};
What you did: I attempted to write a Button component using glamorous.touchablehighlight
and glamorous.text
with the latter being nested inside the former in order to style the button and its text. I attempted to wrap this in a styled View from glamorous both by using glamorous.view
and const { View } = glamorous
but this returned the same error. A native View wrapping the styled text had to be used to resolve the issue.
What happened:
An error occurred:
Error: Touchable child must either be native or forward setNativeProps to a native component
at invariant (invariant.js:44)
at ensureComponentIsNative (ensureComponentIsNative.js:17)
at Object.componentDidMount (TouchableHighlight.js:147)
at Object.chainedFunction [as componentDidMount] (ReactClass.js:518)
at ReactCompositeComponent.js:359
at measureLifeCyclePerf (ReactCompositeComponent.js:63)
at ReactCompositeComponent.js:358
at CallbackQueue.notifyAll (CallbackQueue.js:75)
at ReactNativeReconcileTransaction.close (ReactNativeReconcileTransaction.js:36)
at ReactNativeReconcileTransaction.closeAll (Transaction.js:221)
Reproduction:
Problem description:
The glamorous-native version of TouchableHighlight does not apparently implement setNativeProps
. According to this post in the docs this occurs because a glamorous component is not backed by a native view whose properties can be set in accordance with its touched state. TouchableOpacity should have a similar issue.
Suggested solution:
I would start out by attempting to implement setNativeProps
in create-glamorous.js
in the GlamorousComponent
class.
You could also look at the fix for this by styled-components to see how they fix it.
There's a few things to finalize before this is ready to be used as a dependency in react-native
projects.
I'd like to follow the lead as much as possible over in paypal/glamorous when it comes to making it easy for new folks to get involved, and excited, to contribute.
TODO
s in unit tests some challenges with enzyme's mount
with react-native
(enzymejs/enzyme#614)glamorous-native
version: 1.1.0react-native
version: 0.44.2react
version: 16.0.0-alpha.6Relevant code:
MyButton.js:
import React from "react";
import Button from "react-native-button";
import glamorous from "glamorous-native";
const baseStyle = {
width: 270,
paddingVertical: 10
};
const primaryStyle = {
color: "#ffffff",
backgroundColor: "#111111"
};
const secondaryStyle = {
color: "#111111",
borderColor: "#111111",
borderWidth: 1
};
export default glamorous(Button)(
baseStyle,
props => (props.type === "primary" ? primaryStyle : secondaryStyle)
);
SomeFile.js:
import MyButton from "./MyButton";
...
return <MyButton onPress={...} marginBottom={10}>Lets Go</MyButton>
What you did:
I used react-native-button
because it can be styled with CSS and then tried to style it with the help of glamorous-native
What happened:
The marginBottom
prop I used when creating an instance wasn't used, but the onPress
worked.
Problem description:
It seems that the components that are included in glamorous-native
can be used like this:
<Text color="red" margin={10}">Hello</Text>
But the custom ones, I created with the help of glamorous-native
can't
Suggested solution:
No idea. Did I do something wrong at the definition? Is this generally not possible?
Given the following example
<glamorous.Text
style={{color: 'blue'}}
color="red"
>
What color am I?
</glamorous.Text>
This should render as red text. Currently, it will render as blue text. The style rule properties (color={..}
) should have highest priority.
Currently we manually test newer React Native components to ensure they're supported by the dependent's version of React Native.
Instead, the library could be more flexible by dynamically asserting if the component exists.
Something like
import {
View,
FlatList,
... // etc
} from 'react-native'
const components = {View, FlatList, ...}
const supportedComponents = Object.keys(components).reduce((acc, componentName) => {
if (components[componentName]) {
components[componentName] = component
}
return components
}, {})
Currently styles are broken down between View
style property types (the most common ancestor of them all), and Text
style properties in src/is-style-prop.
We should be more granular in this by checking what type of element we're dealing with, and specifically looking at that component's style prop types rule.
Hey,
I'm mostly using the JSX CSS props to create elements, but it seems that they will always be re-rendered.
Example:
import React from "react";
import {View} from "glamorous-native";
const B = props =>
<View backgroundColor={props.backgroundColor} height={200}/>;
class A extends React.Component {
state = {i: 0};
componentDidMount(){
setInterval(() => this.setState(state => ({i: ++i})), 500)
}
render() {
return <View height="100%"><B backgroundColor="red"/></View>;
}
}
B
will always re-render when the state of A
is updated, even if it didn't change at all, probably because there will always be a new "red"
string that isn't ===
to the last one.
Is there a way to let glamorous-native handle this or do I have to manage this by myself?
Taking inspiration from paypal/glamorous, they've done a great job giving hands-on examples after explaining a concept:
This is wonderful for new folks.
React Native is more of a challenge, as it requires a device emulator. That's where https://snack.expo.io/ comes in.
@ccheever mentions on twitter that external libraries are not currently supported, but it's something they're aware of and are looking at. This project is also not yet open sourced, but it appears not to be too far away.
There's a couple options:
Wait, and continue to promote the downloadable examples. The problem here is the friction it creates for the new developer after reading about a concept and wanting to experiment with it.
I've shimmed glamorous-native
into Snack by bundling it, and modifying it for the default export to be globally available, and pasting it at the bottom of the Snack codefile. This works, but isn't pretty. But I'd take it over nothing. The challenge here is keeping it up to date as the project receives updates, as it's a manual process atm.
what I do :
git clone https://github.com/robinpowered/glamorous-native.git
cd glamorous-native/examples/react-native-glamorous
npm install
failed with error
$ npm install
npm WARN deprecated [email protected]: connect 2.x series is deprecated
npm ERR! Error while executing:
npm ERR! C:\Program Files\Git\mingw64\bin\git.EXE ls-remote -h -t ssh://git@gith ub.com/robinpowered/glamorous-native.git
npm ERR!
npm ERR! Warning: Permanently added 'github.com,192.30.255.113' (RSA) to the lis t of known hosts.
npm ERR! Permission denied (publickey).
npm ERR! fatal: Could not read from remote repository.
npm ERR!
npm ERR! Please make sure you have the correct access rights
npm ERR! and the repository exists.
npm ERR!
npm ERR! exited with error code: 128
Type definition files will be needed, see https://github.com/paypal/glamorous/tree/master/typings
Hi there,
I have a problem augmenting a <Row>
component from react-native-easy-grid with some custom styles.
My versions:
glamorous-native
version: 1.1.0react-native
version: 0.44.2react
version: 16.0.0-alpha.6import glamorous from 'glamorous-native';
import { Row } from 'react-native-easy-grid';
export const StyledRow = glamorous(Row)(props => ({
marginLeft: props.margin ? 16 : 0,
}));
Usage:
<StyledRow margin>[...]</StyledRow>
What happened:
Any idea?
Currently glamorous components will become configured through a collection of styles. In this issue, we'll explore flattening the collection of styles into a single style object with StyleSheet.flatten.
Currently glamorous components will contain an array of styles, for example:
const staticStyles = StyleSheet.create({
styleOne: {margin: 10}
})
const GlamorousView = glamorous.view(
// stylesheet styles
staticStyles.styleOne,
// inline styles
{padding: 10},
// dynamic styles
(props) => ({
width: props.big ? 200 : 100,
height: props.big ? 200 : 100
}),
(props, theme) => ({
backgroundColor: theme.primaryColor
})
)
<GlamorousView style={{margin: 5, padding: 5}} />
Results in
<GlamorousView
big
theme={{primaryColor: 'red'}}
style={[
staticStyles.styleOne, // this would actually be a StyleSheet UID
{padding: 10}, // this would actually be a StyleSheet UID
{width: 200, height: 200},
{backgroundColor: 'red'},
{margin: 5, padding: 5}
]}
/>
With StyleSheet.flatten
, this would merge them into a single style object:
<GlamorousView
big
theme={{primaryColor: 'red'}}
style={{
padding: 5,
margin: 5,
width: 200,
height: 200,
backgroundColor: 'red'
}}
/>
When using StyleSheet.create
, it creates a registration for the style which is simply a unique ID. This is used to avoid the same style being communicated over the bridge to the native side when it hasn't changed.
For example
cont style = StyleSheet.create({
foo: {color: 'red'}
})
console.log(style.foo) // 1
By using StyleSheet.flatten
, we no longer get the performance advantage from registered styles.
However, we're passing an array of styles at the end of the day, and if there are dynamic styles, or style-attributes (backgroundColor={1}
), then those will be style objects either way and won't go through the registration process.
In order to determine the proper implementation it would be helpful to know
Tracking issue for paypal/glamorous#118.
If this makes its way in, this tracking issue will become a feature story to implement in glamorous-native
.
Update: Already supported, just needs documentation
The README should describe the differences between this package and the main glamorous
package.
To briefly summarize:
glamorous.div()
vs glamorousNative.view()
A lot of the inline comments and notes have been stripped - all methods and workflows should be well documented
glamorous-native
version: 1.4react-native
version: 55.3react
version: 16.3.1What you did:
tried to use glamorous-native in storybook component files
What happened:
./node_modules/react-native/Libraries/react-native/react-native-implementation.js
Module not found: Error: Can't resolve
any of the RN modules
Styles-as-properties fail to apply on built-in components when the component has a style
prop assigned to a StyleSheet
style.
const style = StyleSheet.create({
text: {color: 'red'}
})
<glamorous.Text style={style.text} color="blue">
Color will incorrectly be red
</glamorous.Text>
The problem lies in src/split-props.js
.
styleOverrides
is equal to the style
property from the component. In this case, it's a number, not an object.styleOverrides
with the style-properties (color="blue"
), it has no effect, since split.styleOverrides
is a number, not an objectWe'll want to re-think this approach. style
can be either a number
or an array
, yet here we require it to be an object.
Instead, we'll want to use a completely separate object for hosting the styleOverrides
, and then over in src/getStyles, use it independently from props.style
. It like things are already set up for this, and we can instead potentially omit this line and always start off with an empty styleOverrides
(since we already use props.styles
.
Animated
components are currently unsupported.
It's unclear if there is additional work needed for Animated
component styles, or if they can simply be passed into glamorous
to create a glamorousComponentFactory
.
Example of the end goal:
const glamorousAnimatedViewFactory = glamorous(Animated.View)
cont AnimatedFadeView = glamorousAnimatedViewFactory(styles.fadeView)
<AnimatedFadeView opacity={this.state.opacity} />
โ๏ธ this will have a major appeal for animated components. Everyone feels the pain of having to use inline styles:
<AnimatedView style={[styles.fadeView, {opacity: this.state.opacity}]} />
Similar to https://github.com/paypal/glamorous/blob/master/dist-test/index.js, we'll want to ensure that the project is importable and run the proper assertions.
It might be good to:
packager
glamorous-native
version: 1.2.0react-native
version: 0.48.4react
version: 16.0.0-alpha.12What you did:
I tried to implement a simple element as a "Glamorous component"
What happened:
The view is styled as follows:
<View style={{ paddingTop: 8, paddingBottom: 8, backgroundColor: 'red' }}>
I decided to make a Glamorous component of it:
import glamorous from 'glamorous-native'
const Wrapper = glamorous.view(
{
backgroundColor: 'red'
},
props => ({
paddingTop: props.top ? props.gutter : 0,
paddingRight: props.right ? props.gutter : 0,
paddingBottom: props.bottom ? props.gutter : 0,
paddingLeft: props.left ? props.gutter : 0
})
)
That I then rendered as follows:
<Wrapper gutter={8} top bottom>
// code ...
</Wrapper>
But I observed a difference in terms of a single pixel or two between the two implementations (see screenshots). When using the Glamorous component a few pixels are added to the top of the component breaking the layout.
CORRECT (using inline-styled View)
INCORRECT (using Glamorous component)
Reproduction:
Please see above description
After some interesting insights from @peggyrayzis on twitter, it would be worth exploring how this library performs with react-native-web.
It's encouraged to understand:
react-native
's components; does react-native-web
shim itself in-place of react-native
? Or do we need to be a bit less explicit with the dependence on react-native
, and allow injecting the library?glamorous-native
benchmark? A benchmarking project can be found here: https://github.com/necolas/react-native-web/tree/master/performance.One incompatibility is currently known:
glamorous-native/src/is-style-prop.js
Lines 17 to 18 in 9a7eea2
We depend on ViewStylePropTypes
and TextStylePropTypes
to determine, when propsAreStyleOverrides = true
, if the prop should be registered as a component style. Example:
<glamorous.View
padding={20}
backgroundColor="blue"
someOtherProp={false}
/>
padding
and backgroundColor
would be picked up by isStyleProp
and added to the components styling since they're part of the ViewStylePropTypes
definition.
A pragmatic solution here would be to copy the values from react-native
into this time, but I'd like to do something a bit more dynamic than that. Perhaps compile this project with those values pulled from react-native
w/o needing to depend on react-native
at runtime (as it will become polyfilled by react-native-web
Prop forwarding is currently using a naive approach of verifying the property is not a style prop name: src/is-style-prop
It should verify the property is allowed by the component. A trivial solution here would be to check the type of component (eg, a ListView
), and verify the property exists in the component's propTypes
Want to support:
glamorous(View, {propsAreStyleOverrides: true})
Currently have to do:
const StyledView = glamorous(View)(..)
StyledView.propsAreStyleOverrides = true
See paypal/glamorous#123 for discussion.
Copied from #67 (comment):
How about usage of propsAreStyleOverrides
? At least at first glance it seems to be fundamentally incompatible with static typing as it changes the type by runtime mutation.
I'm trying make an animated image
const Character = g(Animated.Image)({
height: 270,
resizeMode: "contain",
width: "100%",
});
Character.propsAreStyleOverrides = true; // type error
Property 'propsAreStyleOverrides' does not exist on type 'GlamorousComponent<object & {}, object>'.
<Character
source={imageSource}
top={animatedValue} // type error
Type '{ source: any; top: Value; }' has no properties in common with type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<ExtraGlamorousProps & object, ComponentS...'.
I think this is workaroundable with some clever type assertion but I didn't figure out that yet.
But in the end I'd like to see some other API for this which would be better fit for typed languages (ts&flow).
Currently I do:
<ScrollView
width="100%"
display="flex"
contentContainerStyle={{ alignItems: "center" }}
>
Is there a way to do that with glamorous native only?
Currently the unit tests use shallow
and react-test-render
. mount
is particularly useful for stepping through component workflows and lifecycle events. However, mount
has known challenges with React Native (enzymejs/enzyme#614)
I've got it working with the suggestions in https://blog.joinroot.com/mounting-react-native-components-with-enzyme-and-jsdom, and mirroring the setup in https://github.com/rjanjua/React-Testing-Guide.
However, there are some issues with Jest snapshots, where it appears that rendered elements appear twice in the snapshot.
This is a parity story to paypal/glamorous#219.
const MyText = glamorous.text((props, theme) => ({
fontSize: theme.main.fontSize,
}))
const MyText = glamorous.text(({theme}) => ({
fontSize: theme.main.fontSize,
}))
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.