placeholderColor error in RN 0.55

I try to customize the placeholder color, but I get this error:

StyleSheet placeholderColor: "#eeeeee"
Valid style props: [
  "alignContent",
  "alignItems",
  "alignSelf",
  "aspectRatio",
  "backfaceVisibility",
  "backgroundColor",
  "borderBottomColor",
  "borderBottomEndRadius",
  "borderBottomLeftRadius",
  "borderBottomRightRadius",
  "borderBottomStartRadius",
  "borderBottomWidth",
  "borderColor",
  "borderEndColor",
  "borderEndWidth",
  "borderLeftColor",
  "borderLeftWidth",
  "borderRadius",
  "borderRightColor",
  "borderRightWidth",
  "borderStartColor",
  "borderStartWidth",
  "borderStyle",
  "borderTopColor",
  "borderTopEndRadius",
  "borderTopLeftRadius",
  "borderTopRightRadius",
  "borderTopStartRadius",
  "borderTopWidth",
  "borderWidth",
  "bottom",
  "color",
  "decomposedMatrix",
  "direction",
  "display",
  "elevation",
  "end",
  "flex",
  "flexBasis",
  "flexDirection",
  "flexGrow",
  "flexShrink",
  "flexWrap",
  "fontFamily",
  "fontSize",
  "fontStyle",
  "fontVariant",
  "fontWeight",
  "height",
  "includeFontPadding",
  "justifyContent",
  "left",
  "letterSpacing",
  "lineHeight",
  "margin",
  "marginBottom",
  "marginEnd",
  "marginHorizontal",
  "marginLeft",
  "marginRight",
  "marginStart",
  "marginTop",
  "marginVertical",
  "maxHeight",
  "maxWidth",
  "minHeight",
  "minWidth",
  "opacity",
  "overflow",
  "overlayColor",
  "padding",
  "paddingBottom",
  "paddingEnd",
  "paddingHorizontal",
  "paddingLeft",
  "paddingRight",
  "paddingStart",
  "paddingTop",
  "paddingVertical",
  "position",
  "resizeMode",
  "right",
  "rotation",
  "scaleX",
  "scaleY",
  "shadowColor",
  "shadowOffset",
  "shadowOpacity",
  "shadowRadius",
  "start",
  "textAlign",
  "textAlignVertical",
  "textDecorationColor",
  "textDecorationLine",
  "textDecorationStyle",
  "textShadowColor",
  "textShadowOffset",
  "textShadowRadius",
  "tintColor",
  "top",
  "transform",
  "transformMatrix",
  "translateX",
  "translateY",
  "width",
  "writingDirection",
  "zIndex"
]

My styles are

estilosSelect = StyleSheet.create({
  inputIOS: {
    paddingTop: 12,
    paddingBottom: 11,
    paddingLeft: 8,
    fontSize: estilosGlobales.spaceSize.stock,
  },
  viewContainer: {
    flex: 1,
  },
  placeholderColor: '#ababab',
});

Edited

[robdsoule]

@vretamal - Most likely the issue you are running into is how you had that stylesheet defined. From all docs I see StyleSheet.create is expecting an object that has values that are also objects.

When you defined placeholderColor: '#ababab' this is breaking that pattern and most likely causing the issue, causing the StyleSheet.create call to error. When the stylesheet would be merged into styles this would create a situation where react native is trying to merge objects in an array to a random string. Essentially:

style={[
  { paddingTop: 12, paddingBottom: 11, paddingLeft: 8, fontSize: 12 },
  { flex: 1 },
  '#ababab'    // <===== this is what would end up happening
]}

I can totally see why you would put it at this level due to how we are doing our lookup of style.placeholderColor in the source.

Fixes on our end will most likely need to be: #1 - match the actual name of placeholderTextColor that textinputs expect: https://facebook.github.io/react-native/docs/textinput#placeholdertextcolor #2 - instead of referencing props.style.placeholderColor in the component we should move this to a top level prop not nested in style and/or reference style.inputAndroid.placeholderTextColor and style.inputIOS.placeholderTextColor

Upside to going off each input is it is more explicit, downside being you’d have to define it twice when it is very likely we’d want the same placeholder color on both platforms.

[lfkwtz]

Good catch, will look into that