robinpowered / glamorous-native Goto Github PK

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

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'
  }}
/>

Caveats

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.

Verification

In order to determine the proper implementation it would be helpful to know

• A better understanding of cached styles being passed in arrays with inline styles
• The performance impact between the two

• 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

What happened:

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 accept innerRef and pass it as ref 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

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.

The Problem

@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.

The Solution

There's a couple options:

1. 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.

2. 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.

• glamorous-native version: 1.2.0
• react-native version: 0.48.4
• react version: 16.0.0-alpha.12

What 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

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
}, {})

Type definition files will be needed, see https://github.com/paypal/glamorous/tree/master/typings

Parity story for glamorous

Issue Reference: paypal/glamorous#133
PR Reference: paypal/glamorous#149

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

• glamorous-native version: 1.1.1
• react-native version: 0.48.4
• react version: 16.0.0-rc.3

What 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.20
• react-native version: 0.50
• react version: 16.1.0

Relevant 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,
});

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

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.

A lot of the inline comments and notes have been stripped - all methods and workflows should be well documented

See paypal/glamorous#125 for full proposal and discussion.

TL;DR

Dynamic glamorous component styles should also support context

const ContextStyledView = glamorous.view(
  (props, theme, context) => ({ /* style w/ context */ })
)

• glamorous-native version: 0.0.2
• react-native version: 0.44.0
• react version: 16.0.0-alpha.6

Relevant 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:

1. Create a styled touchable component (I used TouchableHighlight, presumably any would work).
2. Create a styled text component
3. Create a component that has the styled touchable with the styled text (or any styled glamorous component) nested as its child.

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.

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:

• Have a JS file that imports the library and runs the proper assertions
• Have a mock ReactNative project that imports the library and creates a bundle via the ReactNative packager

This is a parity story to paypal/glamorous#219.

Before

const MyText = glamorous.text((props, theme) => ({
  fontSize: theme.main.fontSize,
}))

After

const MyText = glamorous.text(({theme}) => ({
  fontSize: theme.main.fontSize,
}))

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

This is a feature that should be added to stay in parity with glamorous.

Tracking issue for paypal/glamorous#135

PR: paypal/glamorous#168

Example usages:

const StyledView = glamorous.view({
  padding: 10
})

const StyledText = View.withComponent(Text)

The README should describe the differences between this package and the main glamorous package.

To briefly summarize:

• The built-in component factories - glamorous.div() vs glamorousNative.view()
• React Native component property and style property forwarding detection. This uses React Native's component style prop types to determine if styles are supported. There's still room for improvement outlined in #9 and #10
• The use of StyleSheet over glamor - this effectively accomplishes the same thing in React Native - registering a style for a given rule

• glamorous-native version: 1.1.2
• react-native version: 0.49.0-rc2
• react version: 16.0.0-beta.5

What you did:

Calls to glamorous.view or glamorous(View) create views which don't render any content

What happened:

Views styled using glamorous don't render in release build config.

Debug	Release

Reproduction:

Repro repo is here: https://github.com/eliperkins/GlamorousQuirk

1. Create a view using glamorous.view or glamorous(View).
2. Switch Build Configuration to Release
3. Run app.
4. Note that any views rendered using glamorous.view don't appear.

Problem description:

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.

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

• Examples with jest
• A ReactNative project example
• A theme project example

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).

• glamorous-native version: 1.4
• react-native version: 55.3
• react version: 16.3.1

What 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

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}]} />

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:

• What changes would be needed for compatibility with the project? We currently depend on 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?
• How does glamorous-native benchmark? A benchmarking project can be found here: https://github.com/necolas/react-native-web/tree/master/performance.

Update

One incompatibility is currently known:

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

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

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!

See paypal/glamorous#123 for discussion.

This will basically be a revert of 316c35d from #13

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.

• Build and release process
• Complete TODOs in unit tests some challenges with enzyme's mount with react-native (enzymejs/enzyme#614)
• Introduce commitizen to help generate well formatted commit messages
• Add examples

Grepped project/docs for "media" and "query". Nothing. Just confirming no lib in RN has:

1. CSS to JS
2. Media queries

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:

1. cache glamorRules
2. make glamorous smart enough to know if it's Animated and turn off caching for all rules

Thoughts?

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?

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

• glamorous-native version: 1.1.3 or 2.0.0
• react-native version: 50 (Expo SDK23)
• react version: 16

I 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

• glamorous-native version:^1.1.2
• react-native version:0.48.2
• react version:16.0.0-alpha.12

Relevant 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:
.....

With the merge of #57, we'll want to add some tests that verify stateless function's are not provided with refs

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?

Want to support:

glamorous(View, {propsAreStyleOverrides: true})

Currently have to do:

const StyledView = glamorous(View)(..)
StyledView.propsAreStyleOverrides = true

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.0
• react-native version: 0.44.2
• react version: 16.0.0-alpha.6

import 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 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.

👇 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.1.0
• react-native version: 0.44.2
• react version: 16.0.0-alpha.6

Relevant 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?

Currently I do:

    <ScrollView
      width="100%"
      display="flex"
      contentContainerStyle={{ alignItems: "center" }}
    >

Is there a way to do that with glamorous native only?

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.0
• react-native version: 0.45.0
• react version: 16.0.0-alpha.12

Result:

• glamorous-native version: 1.4.0
• react-native version: 0.55.2
• react version: 16.3.1

Relevant 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.

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.

1. The styleOverrides is equal to the style property from the component. In this case, it's a number, not an object.
2. When filling the styleOverrides with the style-properties (color="blue"), it has no effect, since split.styleOverrides is a number, not an object

Solution

We'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.

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 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.