Shadow not rendering properly

[SIMDO]

Platform: Android
"react-native": "0.48.4"
"react-native-shadow": "^1.2.1"

As you can see in the screenshot, only the top left corner, top and left is rendering properly.

My code (the color is a variable which is a hex color code):

let shadowOpt = { width: itemWidth, height: itemHeight, color: gradients[item.fields.gradient][1], border: 10, radius: 10, opacity: 0.3, x: 0, y: 0, style: { margin: Metrics.baseMargin, justifyContent: 'center', alignItems: 'center' } }

<BoxShadow setting={shadowOpt}>

[thmsrbn]

Same problem... Did you find a solution ?

[6axter82]

Platform: Android
"react-native": "0.49.3",
"react-native-shadow": "^1.2.1"

Same problem...

Is this module maintained at all? Can the author or contributors respond?

[Lucas Veiga]

Same here. It seems the problem may be related with rounded borders:

[6axter82]

The problem comes from the SVG module.

I had a react-native version of 0.43... before and on the github page of SVG project they point to (react-native-svg >= 4.5.0 only supports react-native >= 0.40.0 and react >= 15.4.0), now I use for my version 0.49.3 (react-native-svg >= 5.3.0 only supports react-native >= 0.46.0 and react == 16.0.0-alpha.12) and the problem poped up.

@luco, I don't think it is because of the rounded borders. In my example I set the radius in styling to 0, still the corners look weird.

[Damir Armanov]

"react-native-shadow": "^1.2.1",
"react-native-svg": "^5.4.2",

Same problem...

[6axter82]

Any update on this issue?

[Jonathan Wynne]

has anybody found a solution for this?

[Bryan Jackson]

I'm on react native 0.50.3 and svg 5.5.1. Same issue. Top left corner renders fine but the rest is similar to the other examples provided. I am guessing a breaking change in react-native-svg. Gradients are not being applied correctly.

[6axter82]

Ok, peoples, I have managed to resolve the issue. And created the pull request from my fork ( https://github.com/6axter82/react-native-shadow ), the author has to accept the fixes.

[6axter82]

For those who are still interested.

I used this snippet of code with my modifications described above:

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';
import {BoxShadow,} from 'react-native-shadow';
const shadowOpt = {
	width:100,
	height:100,
	color: '#00b0e4',
	border:100,
	radius:10,
	opacity:1,
	x:0,
	y:0,
	style:{marginVertical:5}
}
export default class App extends Component<{}> {
  render() {
    return (
      <View style={styles.container}>
          <BoxShadow setting={shadowOpt}>
              <View style={{width: 100, height: 100, backgroundColor: 'white', borderRadius: 10,}}/>
          </BoxShadow>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
  },
});

[natimenashe]

Thanks @6axter82! exactly what i needed.