Unable to set component border radius using React properties such as "borderRadius"

[GriffinSoliminiMSFT]

Currently, it's not possible to set the border radius of the Picker component at all using react properties such as "borderRadius", "borderTopRightRadius", "borderTopLeftRadius", etc.

[erenkulaksiz]

Wrapping component inside a view then giving borderRadius to that view fixed my issue.

Example:

<View style={{width: "100%", height: 54, backgroundColor: "white", elevation: 8, borderRadius: 12}}>
    <Picker
        selectedValue={selectedFilter}
        style={{width: "100%", height: "100%"}}
        mode={"dropdown"}
        onValueChange={(itemValue, itemIndex) =>
            setSelectedFilter(itemValue)
        }>
        <Picker.Item label="Java" value="java" />
        <Picker.Item label="JavaScript" value="js" />
    </Picker>
</View>

[maswerdna]

Wrapping component inside a view then giving borderRadius to that view fixed my issue.

Example:

<View style={{width: "100%", height: 54, backgroundColor: "white", elevation: 8, borderRadius: 12}}>
    <Picker
        selectedValue={selectedFilter}
        style={{width: "100%", height: "100%"}}
        mode={"dropdown"}
        onValueChange={(itemValue, itemIndex) =>
            setSelectedFilter(itemValue)
        }>
        <Picker.Item label="Java" value="java" />
        <Picker.Item label="JavaScript" value="js" />
    </Picker>
</View>

That's how I did it too. I guess that's the best workaround

[GriffinSoliminiMSFT]

I think this is sufficient as a workaround, but I'd still like to see a true solution that doesn't require adding another node to the DOM.

[sykenrussel]

I tried the view wraparound and doesnt seemt to work on android emulator?

[erenkulaksiz]

I tried the view wraparound and doesnt seemt to work on android emulator?

Could you please send a code snippet with your styles?

Make sure you have been given backgroundColor and then try giving borderRadius and overflow: "hidden" to wrapper.