peterp / react-native-tags

Tag input component for React Native
MIT License
288 stars 75 forks source link

Suggestion: Support style classes defined in StyleSheet.create() #20

Closed bnbon closed 6 years ago

bnbon commented 6 years ago

The attribute values for the styles only accept a style object, they do not support the adding of styles from StyleSheet.create().

I have to use;

tagTextStyle={{ color: '#fff', fontWeight: 'bold',fontSize: 12 }}

whereas I would prefer to use

tagTextStyle={styles.tagText}

I think this is a reversion from an earlier version of react-native-tags, as the styles.tagText would be loaded in as id reference to the style, not the styles object, so this throws warnings in the App.

Many thanks

bnbon commented 6 years ago

You closed this, but the v1.6.0 does not support the above? It supports the object but it doesn't seem to allow any Font formatting properties...

I mean tagTextStyle should allow styles?

This is actually a reversion over the previous version, I cant even apply inline styles to make it work.

Failed prop type: Invalid props.tagTextStyle key `fontWeight` supplied to `Tags`.
Bad object: {
  "fontWeight": "bold"
}
Valid keys: [
  "display",
  "width",
  "height",
  "start",
  "end",
  "top",
  "left",
  "right",
  "bottom",
  "minWidth",
  "maxWidth",
  "minHeight",
  "maxHeight",
  "margin",
  "marginVertical",
  "marginHorizontal",
  "marginTop",
  "marginBottom",
  "marginLeft",
  "marginRight",
  "marginStart",
  "marginEnd",
  "padding",
  "paddingVertical",
  "paddingHorizontal",
  "paddingTop",
  "paddingBottom",
  "paddingLeft",
  "paddingRight",
  "paddingStart",
  "paddingEnd",
  "borderWidth",
  "borderTopWidth",
  "borderStartWidth",
  "borderEndWidth",
  "borderRightWidth",
  "borderBottomWidth",
  "borderLeftWidth",
  "position",
  "flexDirection",
  "flexWrap",
  "justifyContent",
  "alignItems",
  "alignSelf",
  "alignContent",
  "overflow",
  "flex",
  "flexGrow",
  "flexShrink",
  "flexBasis",
  "aspectRatio",
  "zIndex",
  "direction",
  "shadowColor",
  "shadowOffset",
  "shadowOpacity",
  "shadowRadius",
  "transform",
  "transformMatrix",
  "decomposedMatrix",
  "scaleX",
  "scaleY",
  "rotation",
  "translateX",
  "translateY",
  "backfaceVisibility",
  "backgroundColor",
  "borderColor",
  "borderTopColor",
  "borderRightColor",
  "borderBottomColor",
  "borderLeftColor",
  "borderStartColor",
  "borderEndColor",
  "borderRadius",
  "borderTopLeftRadius",
  "borderTopRightRadius",
  "borderTopStartRadius",
  "borderTopEndRadius",
  "borderBottomLeftRadius",
  "borderBottomRightRadius",
  "borderBottomStartRadius",
  "borderBottomEndRadius",
  "borderStyle",
  "opacity",
  "elevation"
]

Upon further digging its the only valid props are viewPropTypes, instead it needs to be viewPropTypes + a propertyType which allows text formatting or just a plain object?

peterp commented 6 years ago

Argh, you're right. Fix incoming.

bnbon commented 6 years ago

https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/exports/TextPropTypes/index.js

Might help...

peterp commented 6 years ago

Ok, I've published 1.6.1.

bnbon commented 6 years ago

Confirmed as fixed. Thank you.