Skip to content

Picker does not have rounded corners when "borderRadius" style is used #3796

@jagorrin

Description

@jagorrin

Environment

  1. react-native -v:
    react-native-cli: 2.0.1
    react-native: 0.60.6
  2. npm ls rnpm-plugin-windows:
    rnpm-plugin-windows@0.3.5
  3. npm ls react-native-windows:
    react-native-windows@0.60.0-vnext.39
  4. node -v:
    v10.15.0
  5. npm -v:
    6.13.1

Then, specify:

  • Target Platform Version(s): 10.0.18362.0
  • Target Device(s): Desktop
  • Visual Studio Version: 2017
  • Build Configuration: Debug

Steps to Reproduce

  1. Create a Picker in a project using React Native Windows
  2. Apply a style containing "borderRadius"
  3. Observe that the Picker does not have rounded corners

Example code:

import { Picker, StyleSheet } from "react-native";

const styleSheet = StyleSheet.create({
    roundedCorners: {
        borderRadius: 3,
    },
});

render() {
    return (
          <Picker style={styleSheet.roundedCorners}>
                <Picker.Item label="Any" value="Any" />
          </Picker>
     );
}

Expected Behavior

I expected the Picker to have rounded corners using the supplied border radius.

Actual Behavior

Applying the "borderRadius" style did not visually change the box. It still has rounded corners.

Screenshot:
snip1

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions