react-native: borderColor (top left bottom right) styling ignored on Android

I solved like this style react native 0.57.1

    borderBottomLeftRadius: 10/2,
    borderBottomRightRadius: 10/2,
    borderTopLeftRadius: 10/2,
    borderTopRightRadius: 10/2,
    borderBottomWidth: 2,
    borderRightWidth: 2,
    borderTopWidth: 2,
    borderLeftWidth: 2,
    borderBottomColor: 'blue',
    borderRightColor: 'bule',
    borderTopColor: 'yellow',
    borderLeftColor: 'yellow'

@NicWickman

Hey guys, I ran into this issue too and noticed my borderRadius was too high. Make sure your borderRadius is exactly half your height and width for the best results.

Note that you need to use borderBottomWidth, borderTopWidth, borderLeftWidth, borderRightWidth instead of borderWidth

Cheers.

@fungilation, please understand that we aren’t trying to be combative or say that this issue doesn’t exist. We are investing our time with this back and forth because we want to help you help us in the future. All the time that we spend responding to issues and reproduce bugs is time that we aren’t spending on other development for React Native.

I do believe you have likely provided an example that reproes this issue, however it requires jumping through more mental hoops by someone looking into it by needing to put together the different pieces that you provided. By providing a simple example that is the absolute minimum required to create the problem, something like what @oblador provided, it lowers the amount of time investigating and the possibility that we can’t reproduce the error that you are reporting. That makes it more likely that someone can get to this issue and fix it.

Please help us help you to be able to help us.

Since 2018 this bug and still a problem… I faced him right now, and it seems that still a bug, ugh. happy holidays guys but not for you, bug.

@fungilation The important parts is very likely in your styles.summaryTouchable, yet it was omitted. A good repo would be something like this (not sure if it actually reflects your issue):

<View style={{
  height: 100, 
  width: 100, 
  borderWidth: 1, 
  borderColor: 'black', 
  borderTopColor: 'red'
}} />

Yes i had the same issue on 0.59 but only in android. If i use borderRadius all the border colors are changed to black even i put the colors on each side. borderRadius: 33, borderWidth: 15, borderTopColor: '#DCDDE2', borderLeftColor: '#DCDDE2', borderRightColor: 'transparent', borderBottomColor: 'transparent',

This same thing is happening to me in 0.60.4.

This is my component:

    <View style={styles.container}>
      <View style={styles.progressLayer} />
    </View> 

This are my styles:

  container: {
    width: vw(200),
    height: vw(200),
    justifyContent: 'center',
    alignItems: 'center',
    borderWidth: vw(20),
    borderRadius: vw(200) / 2,
    borderColor: theme.colors.placeholder,
  },

  progressLayer: {
    width: vw(200),
    height: vw(200),
    borderWidth: vw(20),
    position: 'absolute',
    borderTopRightRadius: vw(200) / 2,
    borderTopLeftRadius: vw(200) / 2,
    borderBottomRightRadius: vw(200) / 2,
    borderBottomLeftRadius: vw(200) / 2,
    borderBottomColor: 'transparent',
    borderRightColor: theme.colors.primary,
    borderTopColor: theme.colors.primary,
    borderLeftColor: 'transparent',
  },

How it looks on iOS:

How it looks on Android:

This is still an issue, as far as I know.

I got some solution for my case! I had to to create semicircle.

Firstly, I just try to set 0 width for borders to hide.

{
    borderRightColor: 'yellow',
    borderTopColor: 'yellow',
    borderRightWidth: 10,
    borderTopWidth: 10,

    borderLeftWidth: 0,
    borderBottomWidth: 0,
 }

But it leads me for this result. I got something like a crescent

And then I set different borderWidth for borders, which has to be hidden and hasnt. And fill useless borders transparent

{
    borderRightColor: 'green',
    borderTopColor: 'green',
    borderRightWidth: 10,
    borderTopWidth: 10,

    borderLeftWidth: 9,
    borderBottomWidth: 9,
    borderBottomColor: 'transparent',
    borderLeftColor: 'transparent',
  }

It works for me!!

No bot. Stale not. Merry Christmas

Silly bot.

Not solved on 0.59. In my environment, borderRightColor is ignored but borderBottomColor take precedence over borderColor.

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.

I have same problem, after updating to react-native 0.56 border[Top]Color is ignored on android haven’t tried on iOS, which has worked before…

example

code

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

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

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text style={styles.instructions}>To get started, edit App.js</Text>
        <Text style={styles.instructions}>{instructions}</Text>


        <View style={{borderWidth: 8, width: 100, height: 100, borderRadius: 50, borderColor: '#00f', borderTopColor: '#ff0'}}></View>

        <View style={{borderWidth: 8, width: 100, height: 100, borderColor: '#00f', borderTopColor: '#ff0'}}></View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

copy pasted View, with removed borderRadius shows diffrent border colors…

repo for the example

@TheSavior I think this should be re-opened. ^

No bot, this issue has not been resolved and repro has been acknowledged. This issue is fresh fresh fresh.

I had a similar (though not exactly the same) problem in the closed issue mentioned above ^

Basically, if I provided a borderColor and then individual border[Top|Bottom|Left|Right]Colors, then the ones on top and bottom would get applied correctly but the ones on the left and right would not.

Reproduction demo: https://snack.expo.io/HJw35DMXX

I’ll also add that I very much appreciate work of both volunteers and Facebook employees on React Native. Don’t get me wrong on that. I couldn’t have made my app WonderSwipe flying solo in “only” a year without RN, and I’ve praised it as such on Medium and elsewhere.

I’m with the same issue on react-native 0.59.10

Same issue here, on Android. I had to apply a single style for each situation. It can’t be overrided. borderWidth and borderColor must be set for each case. Only borderRadius can be set first.

if (AppStore.currentVideo === value) {
  return {
    borderBottomWidth: 1,
    borderRightWidth: 1,
    borderTopWidth: 1,
    borderLeftWidth: 2,
    borderBottomColor: Colors.border,
    borderRightColor: Colors.border,
    borderTopColor: Colors.border,
    borderLeftColor: Colors.primary
  }
} else {
  return {
    borderBottomWidth: 1,
    borderRightWidth: 1,
    borderTopWidth: 1,
    borderLeftWidth: 1,
    borderBottomColor: Colors.border,
    borderRightColor: Colors.border,
    borderTopColor: Colors.border,
    borderLeftColor: Colors.border
  }
}

style={[styles.mainContentBorder, this.handleActiveVideo(item.key)]}

mainContentBorder: {
  padding: 20,
  borderRadius: 4,
  backgroundColor: Colors.white,
},

If I set a borderWidth or a borderColor in mainContentBorder It’s doesn’t work (only bottom and top)

Yes i had the same issue on 0.59 but only in android. If i use borderRadius all the border colors are changed to black even i put the colors on each side. borderRadius: 33, borderWidth: 15, borderTopColor: '#DCDDE2', borderLeftColor: '#DCDDE2', borderRightColor: 'transparent', borderBottomColor: 'transparent',

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community’s attention? This issue may be closed if no further activity occurs. You may also label this issue as “For Discussion” or “Good first issue” and I will leave it open. Thank you for your contributions.

I was able to repro. We are looking into it.

I fully understand minimum repro is easier for you and I’ll keep that in mind in the future. But I’m not near a computer for the long weekend here, and based on full details of what I did provide, anyone can relatively easily distill a more minimal test case from it. With a view that style the 4 border colors separately for example instead of the more common single borderColor. (if that’s not too minimal to still reproduce bug)

Please provide a tiny, complete example that reproduces this issue that can be dropped in to App.js in a new project.

The repro you provided requires a significant amount of other information from your project.

Can you provide the smallest repro possible that can be tried in a brand new app? Reducing this to something we can quickly test will make it easier for us to try it and identify the problem.

It would be great if you could work on reducing your issue. Does it still apply if you only set the border colors and nothing else on a plain View?