Skip to content

BorderColor and borderWidth are missing when using borderRadius #17432

Closed
Closed
BorderColor and borderWidth are missing when using borderRadius#17432
Labels
Ran CommandsOne of our bots successfully processed a command.Resolution: LockedThis issue was locked by the bot.

Description

@Patys
Patys
opened on Jan 3, 2018

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

Environment:
OS: Windows 10
Node: 8.6.0
Yarn: Not Found
npm: 5.3.0
Watchman: Not Found
Xcode: N/A
Android Studio: Version 3.0.0.0 AI-171.4443003

Packages: (wanted => installed)
react: 16.0.0 => 16.0.0
react-native: 0.50.3 => 0.50.3

Steps to Reproduce

Minimal example:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={[styles.view, styles.withBottomBorder]}>
          <Text>Only bottom border with color</Text>
        </View>

        <View style={[styles.view, styles.withBorderRadius]}>
          <Text>Only bottom border with radius</Text>
        </View>

        <View style={[styles.view, styles.withBorderRadius, styles.withBottomBorder]}>
          <Text>Bottom border with radius and color, but only backgroundColor applies, green bottom border is missing</Text>
        </View>
        <View style={[styles.view, styles.withBottomBorder, styles.withBorderRadius]} >
          <Text>Bottom border with color and radius, but only backgroundColor applies, green bottom border is missing</Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  view: {
    width: 200,
    height: 100,
    backgroundColor: '#ffa',
    margin: 10,
    padding: 10
  },
  withBorderRadius: {
    borderTopRightRadius: 5,
    borderTopLeftRadius: 5
    /* the same is ofr the borderBottomRight/Left */
  },
  withBottomBorder: {
    borderBottomColor: '#0f0',
    borderBottomWidth: 1,
    backgroundColor: '#faa'
  }
});

Expected Behavior

screenshot_1514990797

Last two should look like first one, but with border radius at the top.

Actual Behavior

Border is missing when using borderRadius

Reproducible Demo

Look minimal example above with screens.

Activity

  1. Patys
    changed the title [-]BorderColor and borderWidth is missing when using borderRadius[/-] [+]BorderColor and borderWidth are missing when using borderRadius[/+] on Jan 3, 2018

  2. dogbutcat commented on Jan 4, 2018

    @dogbutcat
    dogbutcat
    on Jan 4, 2018

    With example you given, it seems no problem on expo, change a physic phone to have a try, maybe resolution problem.
    screen shot 2018-01-04 at 14 51 04

  3. Patys commented on Jan 4, 2018

    @Patys
    Patys
    on Jan 4, 2018
    Author

    I used also real device. Xiaomi redmi 4x in dev mode.
    Problem exists.

  4. porluz commented on Jan 11, 2018

    @porluz
    porluz
    on Jan 11, 2018

    looks related to #8236, #9759, #11042

  5. yexiaosong commented on Feb 7, 2018

    @yexiaosong
    yexiaosong
    on Feb 7, 2018

    same problem

  6. lucasbento commented on Feb 12, 2018

    @lucasbento
    lucasbento
    on Feb 12, 2018

    Reproducible on emulator Nexus 5X API 26 as well.

  7. fufuninja commented on Feb 23, 2018

    @fufuninja
    fufuninja
    on Feb 23, 2018

    +1 here. Using BorderTop instead as temporary replacement.

  8. react-native-bot commented on Feb 24, 2018

    @react-native-bot
    react-native-bot
    on Feb 24, 2018
    Collaborator

    Thanks for posting this! It looks like you may not be using the latest version of React Native, v0.53.0, released on January 2018. Can you make sure this issue can still be reproduced in the latest version?

    I am going to close this, but please feel free to open a new issue if you are able to confirm that this is still a problem in v0.53.0 or newer.

    How to Contribute • What to Expect from Maintainers

  9. react-native-bot
    added
    Ran CommandsOne of our bots successfully processed a command.
    StaleThere has been a lack of activity on this issue and it may be closed soon.
    on Feb 24, 2018
  10. react-native-bot
    closed this as completedon Feb 24, 2018
  11. stale
    removed
    StaleThere has been a lack of activity on this issue and it may be closed soon.
    on Feb 24, 2018

  12. salmanwaheed commented on Feb 24, 2018

    @salmanwaheed
    salmanwaheed
    on Feb 24, 2018 via email

  13. salmanwaheed commented on Feb 24, 2018

    @salmanwaheed
    salmanwaheed
    on Feb 24, 2018 via email

  14. ADcorpo commented on Mar 2, 2018

    @ADcorpo
    ADcorpo
    on Mar 2, 2018

    This is still happenning as of now (React Native 0.54)

  15. usfslk commented on Oct 19, 2018

    @usfslk
    usfslk
    on Oct 19, 2018

    Also happens on react.js, borderWidth and borderColor are ignored if borderRadius is set to a default value

  16. rahulworld commented on Nov 27, 2018

    @rahulworld
    rahulworld
    on Nov 27, 2018

    Can use
    border: '1px solid #000000'
    It will work.

  17. Rojuinex commented on Dec 12, 2018

    @Rojuinex
    Rojuinex
    on Dec 12, 2018
    Contributor

    Still having this issue in 0.57.4

  18. react
    locked as resolved and limited conversation to collaborators on Feb 24, 2019
  19. react-native-bot
    added
    Resolution: LockedThis issue was locked by the bot.
    on Feb 24, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Ran CommandsOne of our bots successfully processed a command.Resolution: LockedThis issue was locked by the bot.

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions