Setting shorthand border property on `Image` element in React Native defaults unsupported `border-style` key

First off I wanted to say thanks for such an awesome library. I can’t imagine going back to css modules/manual jsx inline styles.

Not entirely sure if this is intended or not, but I figured I’d raise a flag. Basically, when using the short hand border property in react-native, the border-style property defaults to a value of solid (when not specified), which is an invalid key for the Image element. This raises a nasty warning. Obviously this can be avoided by simply using border-width and border-color separately.

Of course this could be an issue on other native elements that also don’t support the border-style, but I’m not too familiar with the native spec (working on my first RN project). 🤷‍♂️

I’d be happy to read up on the spec and fix it myself, if someone could point me in the right direction of the generally related code in this repo.

Version

2.1.2

Reproduction

This code produces the following error:

const Avatar = styled.Image`
  height: 100px;
  width: 110px;
  border-radius: 5px;
  border: 2px #EFEFF2;
`;

export default (props) => (
  <Root>
    <Top>
      <Avatar source={{uri: props.avatarUrl}} />
      <Stats>
        <Stat key={1} metric="Repos" value={props.repos} onPress={props.onRepos} />
        <Stat key={2} metric="Pulls" value={props.pulls} onPress={props.onPulls} />
        <Stat key={3} metric="Followers" value={props.followers} onPress={props.onFollowers} />
      </Stats>
    </Top>
    <Bottom>
      <Name>{props.name ? props.name : `@${props.login}`}</Name>
      {props.bio ? <Bio>{props.bio}</Bio> : <NoBio>A nondescript user.</NoBio>}
    </Bottom>
  </Root>
);

Steps to reproduce

1. Create a styled image component.
2. Assign the border property with only the border-width and border-color.
3. Get a warning in runtime.

Expected Behavior

No default value set.

Actual Behavior

Default value set, warning produced.

[jacobp100]

We might need to override styles from other rules though.

const Comp1 = styled.View`
  border-color: red;
`

const Comp2 = styled(Comp1)`
  border: 1px solid;
`

[kitten]

I noticed this as well. Generally speaking it is intended and expected behaviour. But when the border-style in the shorthand is missing, I think we should not default ourselves, but not set the value to a default and bet on React Native’s default instead.

Does that sound reasonable, @jacobp100 ?