Skip to content

Artifacts on View with borderRadius on only 2 corners on iOS #11897

Closed
@DenJohX

Description

@DenJohX

Description

I need a couple of Views with border radius only on the top or bottom corners, to use as container for TextInputs (its a email/password form).

Reproduction

Using this code:

    // style
    inputExample: {
        borderColor: '#9b9b9b',
        backgroundColor: 'white',
        borderWidth: 1,
        borderStyle: 'solid',
        height: 50,
    },
    inputTop: {
        borderTopLeftRadius: 6,
        borderTopRightRadius: 6,
        borderBottomLeftRadius: 0,
        borderBottomRightRadius: 0,
    },
    inputBottom: {
        borderTopLeftRadius: 0,
        borderTopRightRadius: 0,
        borderBottomLeftRadius: 6,
        borderBottomRightRadius: 6,
        marginBottom: 60
    },
// render
    <View style={[style.inputExample, style.inputTop]}>
    </View>
    <View style={[style.inputExample, style.inputBottom]}>
    </View>

The result is as expected, but with artifacts on the corners with radius:0

screen shot 2017-01-13 at 7 30 12 pm

Solution

Don't know yet

Additional Information

  • React Native version: 0.36.1
  • Platform: iOS
  • Operating System: MacOS

Metadata

Metadata

Assignees

No one assigned

    Labels

    Help Wanted :octocat:Issues ideal for external contributors.Platform: iOSiOS applications.Ran CommandsOne of our bots successfully processed a command.Resolution: FixedA PR that fixes this issue has been merged.Resolution: LockedThis issue was locked by the bot.Resolution: PR SubmittedA pull request with a fix has been provided.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions