Skip to content

TextInput does not have rounded corners when "borderRadius" style is used #3737

@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 TextInput in a project using React Native Windows
  2. Apply a style containing "borderRadius"
  3. Observe that the TextInput does not have rounded corners

Example code:

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

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

render() {
    return <TextInput style={styleSheet.roundedCorners} />;
}

Expected Behavior

I expected the TextInput 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:
snip

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions