I'm having trouble trying to round the corners of the "view" of a react native component. I'm using "react-native-drop-shadow"

import DropShadow from "react-native-drop-shadow";

This is after the return statement:

<DropShadow
      style={{
        shadowColor: "#000",
        shadowOffset: {
          width: 0,
          height: 0,
        },
        shadowOpacity: 1,
        shadowRadius: 5
      }}
    >
      <View style={{ display: 'flex', flex: 1, backgroundColor: "transparent" , borderRadius: borderRadius }}>
        <TouchableOpacity
          style={{ display: 'flex', flex: 1, backgroundColor: "transparent" , borderRadius: borderRadius }}
          onPress={clickAction}
        ><LinearGradient
        colors={[ this.props.colorOne, this.props.colorTwo]}
        style={{ paddingTop: paddingTop , paddingBottom: paddingBottom , paddingLeft: paddingLeft , paddingRight: paddingRight , borderRadius: borderRadius}}
        start={{ x: parametersstartx, y: parametersstarty }}
        end={{ x: parametersendx, y: parametersendy }}>
          <Text style={{ color: text.color , fontFamily: text.fontFamily , fontSize: text.fontSize, textAlign: text.textAlign, fontWeight: text.fontWeight }}>{this.props.text}</Text>
          
      </LinearGradient>
        </TouchableOpacity>
      </View></DropShadow>

Then this is the style at the bottom of the index.js

const stylers = StyleSheet.create({
  container: {
        display: 'flex',
    flex: 1,
    backgroundColor: "transparent"
  }
});

This is what I'm getting:

There is a white background stuck somewhere. I've tried making all of the items within the return value as transparent backgrounds but I can't seem to figure out why I can't round the corners of this button.

CodePudding user response：

Try this:

<DropShadow
      style={{
        shadowColor: "#000",
        shadowOffset: {
          width: 0,
          height: 0,
        },
        shadowOpacity: 1,
        shadowRadius: 5,
     borderRadius: borderRadius // add this
      }}
    >