Have tried to use this lib, but I can't. What am doing wrong? about react-native-shadow-2 HOT 5 CLOSED

Expo snack will not render it well. But here is the code from above:

  <View style={{alignItems: 'center', backgroundColor: 'white', flex: 1}}>
    <Text>1. Components with margins</Text>

    <Shadow>
      <View
        style={{
        backgroundColor: "red",
        borderRadius: 14,
        margin: 20,
        paddingHorizontal: 20,
        height: 100,
        justifyContent: "center"
        }}>
        <Text>A box with pastel red background</Text>
        <Text>and margins</Text>
      </View>
    </Shadow>

    <Text>2. Nested components (no settings)</Text>

    <View style={{ padding: 20, backgroundColor: '#E5E5E5'}}>
      <Shadow offset={[0, 0]}>
        <View
        style={{
        backgroundColor: "red",
        borderRadius: 14,
        margin: 20,
        paddingHorizontal: 20,
        height: 100,
        justifyContent: "center"
        }}>
          <Text>A box with pastel red background</Text>
        </View>
      </Shadow>
    </View>

    <Text>3. Nested components (lets apply some settings)</Text>

    <View style={{ padding: 20, backgroundColor: '#E5E5E5'}}>
      <Shadow
        startColor={'#FF0000AA'}
        sides={{ bottom: true, top: false, start: false, end: false }}
        offset={[0, 0]}
        corners={{
          topStart: false,
          topEnd: false,
          bottomStart: false,
          bottomEnd: false,
        }}>
        <View
        style={{
        backgroundColor: "red",
        borderRadius: 14,
        margin: 20,
        paddingHorizontal: 30,
        height: 100,
        justifyContent: "center"
        }}>
          <Text>A box with pastel red background</Text>
        </View>
      </Shadow>
    </View>

    <Text>3. Adjacent components</Text>

    <View style={{ padding: 20, backgroundColor: '#E5E5E5'}}>
      <View style={{ zIndex: 1 }}>
        <Shadow
          sides={{ bottom: true, top: false, start: false, end: true }}
          offset={[0, 0]}
          corners={{
            topStart: false,
            topEnd: false,
            bottomStart: false,
            bottomEnd: true,
          }}>
          <View
        style={{
        backgroundColor: "red",
        borderRadius: 14,
        margin: 20,
        paddingHorizontal: 20,
        height: 100,
        justifyContent: "center"
        }}>
            <Text>A box with pastel red background</Text>
          </View>
        </Shadow>
      </View>
      <View
        style={{
        backgroundColor: "yellow",
        borderRadius: 14,
        margin: 20,
        paddingHorizontal: 20,
        height: 100,
        justifyContent: "center"
        }}>
        <Text>A sibling box with yellow background</Text>
      </View>
    </View>
  </View>

from react-native-shadow-2.

@rivaros, thanks for the code!

Answering:

1) Margins of everything nested have to be removed

The Shadow will wrap the component, and if the component has a margin, the Shadow will wrap it too. If you want a margin outside the Shadow, you can use the containerStyle property. As said in Readme, this prop is useful for margins.

Also, beware as you are using the width and height style props but also the margin: If the Shadow has a single child, it will get the width, height and all of the borderRadius properties from the children's style property, if defined.. In the first render the Shadow will use the height: 100 instead of 140 from 100 + 20 * 2, from the margin. In the following render the correct sizing will be used, but on the first one, it will use the wrong one as we at the moment don't take margins and padding into consideration. I will give it a thought on having it on the calculation, although that doesn't seem very useful for most users, at a performance cost.

2) Shadows in the corners are 2x thicker (spots) and 3) Round corners are not respected, actually shadows have round corners irrespectful of shape

It actually seems that the Shadow isn't being able to get the child borderRadius, as the distance from the corner border to the end of the shadow is greater than the distance from a side border to its shadow's end.

As you said it's a Nested Component, I suspect that maybe you have a View wrapping that component with the borderRadius defined? I know it's not on the code you provided, but that's what suspect without having a reproducible link. Anyway, try defining the same borderRadius in the Shadow's style.

Also, even a borderRadius=0 will have rounded shadow corners. The borderRadius changes the radius, not the angle. The situations here seems that the Shadow is not being able to get the borderRadius value, as I mentioned above. Please try to give me a reproducible Snack link for this.

4) Adjacent elements - each next element just 'covers' the shadow.

Not sure what you want to achieve here. Do you want the bottom box to be below the upper shadow? Try having the zIndex style in the Shadow's containerStyle or shadowViewProps={{style: {} }}. Or you can try having the zIndex in the bottom box's style.

I will await further feedback and clarification so I can try to help you further ;)

from react-native-shadow-2.

Hi, before all, are you sure you are using the 7.0.5 version? Please, ensure you are using the latest version and do clean the cache, and then try again.

Let me know if the problem persists after that.

from react-native-shadow-2.

And, if so, please provide me a reproducible example in https://snack.expo.dev/

from react-native-shadow-2.

I can reopen this if you have further comments ;)

from react-native-shadow-2.