How to get border radius of linear gradient showing when overflow is set to visible - React Native IOS

Question

So I have this issue which only affects how the app looks like in IOS. Seems fine on Android

However in IOS the LinearGradient border radius only shows when overflow is set to hidden

The problem with this it will cut off the top of the image in some of the buttons which go outside the button

How can I get the radius of the linear gradient to show and my image to show as desired?

As above the bottom one has overflow set to hidden whereas the top one doesn't

<TouchableOpacity
      onPress={handlePress}
      style={{ width: "100%", height: "100%" }}
    >
      <View style={[styles.buttonParent, { backgroundColor: "#e23000" }]}>
        <LinearGradient
          colors={["#fc4e18", "#fa9f42"]}
                  style={[styles.buttonGrad, { overflow: "hidden" }]}
        >
         
          <View style={{ width: "100%", height: "100%", flex: 0.15 }} />
          <View
            style={{
              flex: 1.8,
              display: "flex",
              flexDirecton: "column",
              alignContent: "center",
              justifyContent: "center",
              width: "100%",
              height: "100%",
            }}
          >
            <Image
              source={no}
              style={{
                width: Math.round(100 * lengthFactor),
                height: Math.round(100 * lengthFactor),
              }}
            />
          </View>

          <View
            style={{
              flex: 2.4,
              width: "100%",
              height: "100%",
              display: "flex",
              flexDirection: "column",
              justifyContent: "center",
            }}
          >
            <Text style={styles.textSmall}>Socially</Text>
            <Text style={styles.textBig}>Unacceptable</Text>
          </View>
          <View style={{ width: "100%", height: "100%", flex: 0.15 }} />
        </LinearGradient>
      </View>
    </TouchableOpacity>

Styles

buttonGrad: {
    height: "100%",
    width: "100%",
    borderRadius: Math.round(20 * lengthFactor),
    position: "absolute",
    bottom: Math.round(5 * lengthFactor),
    justifyContent: "center",
    alignContent: "center",
    alignItems: "center",
    width: "100%",
    height: "100%",
    display: "flex",
    flexDirection: "row",
    overflow: "visible",
    
  },
  buttonParent: {
    height: "100%",
    width: "100%",
    borderRadius: Math.round(20 * lengthFactor),
    overflow: "visible",

    shadowColor: "black",
    shadowOpacity: 1,
    shadowOffset: { width: 2, height: 2 },
    shadowRadius: Math.round(10 * lengthFactor),
    elevation: 8,
  }





  

Answer 1

So to get this working I had to take the image outside of the linear gradient and set the zIndex, position:absolute etc

Overflow hidden to be set for the linear gradient object

 <View style={[styles.buttonParent, { backgroundColor: "#0537a5" }]}>

              <Image
                  source={invasive}
                  style={{
                      width: Math.round(125 * lengthFactor),
                      height: Math.round(155 * lengthFactor),
                      position: "absolute",
                      bottom: Math.round(5 * lengthFactor),
                      zIndex: 1000,
                      right:10
                  }}
              />

        <LinearGradient
          colors={["#4d60fe", "#11a8fe"]}
          style={styles.buttonGrad}
        >