As it can be seen in the attached screenshot, border acts different between ScrollView and View. They both have full width and same border styles. I want the upper one, that bends further. I have tried giving extra padding to the container View, giving margin to the inner element, changing backgrounds to transparent and giving the same border radius to the every element in the View. None of them works. Also, as you can see from the Snack below, even if no element is stacked inside the Views, same thing occurs.

Thanks in advance to all!

CodePudding user response：

Seems like a bug in react native. I've managed to work around it with this:

<ScrollView
                    style={{
                        borderTopLeftRadius: 30,
                        borderTopRightRadius: 30,
                        borderWidth: 0.5,
                        borderTopWidth: 6,
                        borderColor: 'transparent',
                        borderTopColor: 'cyan',
                        width,
                    }}
                    contentContainerStyle={{
                        paddingTop: 150,
                    }}>
                    <View
                        style={{
                            height: 150,
                            width,
                            backgroundColor: '#fff',
                            borderTopLeftRadius: 30,
                            borderTopRightRadius: 30,
                            borderWidth: 0.5,
                            borderTopWidth: 6,
                            borderColor: 'transparent',
                            borderTopColor: 'cyan',
                        }}
                    />
</ScrollView>

CodePudding user response：

In case anyone bumps up with an issue like this, here is how I solved it:

Solved Snack link

<ScrollView
    contentContainerStyle={{
        paddingBottom: bottom,
        paddingTop: IMAGE_HEIGHT,
    }}
>
    <View
        style={{
            backgroundColor: "#fff",
            borderTopLeftRadius: 30,
            borderTopRightRadius: 30,
            borderWidth: 0.2,
            borderTopWidth: 6,
            borderColor: "#fff",
            borderTopColor: "cyan",
        }}
    />
</ScrollView>;

Still, I didn't get why the border behavior is different between ScrollView and View, but at least there is a workaround.