React-native-web: StyleSheet: add support for 'boxShadow'

[necolas]

Not sure what to do about this. React Native adds shadow properties:

shadowOffset
shadowOpacity
shadowRadius

Web has box-shadow, and it supports multiple shadows.

color
inset
offsetX
offsetY
spreadRadius

I can't see a clear mapping between the two. At least for now we can add boxShadow: string as another web-specific style prop.

[chandlervdw]

@necolas is this working? My styles don't seem to be coming through on web. I'm using a custom made shadow conversion util:

export function shadow({ color, opacity, radius, offsetWidth, offsetHeight, elevation }) {
  return Platform.select({
    ios: {
      shadowColor: color,
      shadowOpacity: opacity,
      shadowRadius: radius,
      shadowOffset: {
        width: offsetWidth,
        height: offsetHeight,
      }
    },
    android: {
      elevation
    },
    web: {
      boxShadow: `${offsetWidth}px ${offsetHeight}px ${radius}px ${rgba}`
    }
  });
}

[necolas]

Looks like rgba isn't defined?

[chandlervdw]

@necolas it was, above that function.

const rgba = (color, opacity) => colors.opacity(color, opacity);

where colors is imported above.

[chandlervdw]

@necolas I updated my comment above. I'm testing our project side-by-side in simulator and in the browser and I think some caching was happening with hot-loading. I thought I had figured out the issue but I hadn't.

[necolas]

If you can provide a test case and/or what the browser is showing in the dev tools, that would help

[chandlervdw]

I've got a stateless, functional component that returns a<View style={styles.dishShadow} /> with children components. The dishShadow style is computed with the following (I've condensed here but the helper functions are imported). colors is also imported.

const rgba = (color, opacity) => colors.opacity(color, opacity);
const shadow = ({ color, opacity, radius, offsetWidth, offsetHeight, elevation }) => {
  return Platform.select({
    ios: {
      shadowColor: color,
      shadowOpacity: opacity,
      shadowRadius: radius,
      shadowOffset: {
        width: offsetWidth,
        height: offsetHeight,
      }
    },
    android: {
      elevation
    },
    web: {
      boxShadow: `${offsetWidth}px ${offsetHeight}px ${radius}px ${rgba}`
    }
  });
};

const styles = StyleSheet.create({
  dishShadow: {
    borderRadius: 3,
    ...shadow({
      elevation: 3,
      color: 'rgba(2,0,0,1)',
      opacity: 0.15,
      radius: 2,
      offsetWidth: 0,
      offsetHeight: 1
    })
  }
});

Output in native has the correct shadow. Output in web does not. In Chrome dev tools, the div that react-native-web creates does have border-radius: 3px on it, but no box-shadow styles.

[necolas]

rgba is a function but you haven't passed it any values. It looks like it should be:

      boxShadow: `${offsetWidth}px ${offsetHeight}px ${radius}px ${rgba(color, opacity)}`

[necolas]

I'm going to fudge this for web since it seems to be used quite a lot.

[Victor7095]

@necolas it was, above that function.

const rgba = (color, opacity) => colors.opacity(color, opacity);

where colors is imported above.

Where does colors is imported from?