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

[fungilation]

Environment

  React Native Environment Info:
    System:
      OS: macOS High Sierra 10.13.5
      CPU: x64 Intel(R) Core(TM) i7-3520M CPU @ 2.90GHz
      Memory: 36.54 MB / 8.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 10.5.0 - /usr/local/bin/node
      Yarn: 1.7.0 - /usr/local/bin/yarn
      npm: 6.1.0 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
      Android SDK:
        Build Tools: 23.0.1, 23.0.3, 25.0.1, 25.0.3, 26.0.1, 27.0.3
        API Levels: 23, 25, 26, 27
    IDEs:
      Android Studio: 3.1 AI-173.4720617
      Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.4.1 => 16.4.1 
      react-native: 0.56.0-rc.4 => 0.56.0-rc.4 
    npmGlobalPackages:
      eslint-plugin-react-native: 1.2.0
      react-native-cli: 0.2.0
      react-native-git-upgrade: 0.2.7

Description

How my app should look, and did on 0.54.4:

(I know, I'm using iOS screenshot above. But my app looks identical so I'm using this for demo purposes. Pretend this is android)

How my app looks on android, on 0.56.0-rc.4:

The issue being my defined borderColors (top left bottom right) on each of the text boxes being ignored, and defaulting to black. Related to the number of changes to border styling I see on 0.56's changelog, I assume.

Reproducible Demo

Relevant snippet from my styles.js. The text boxes being styled by summaryTouchable:

  summaryTouchable: {
    overflow: 'hidden',
    marginBottom: 10,
    borderTopColor: '#e5e6e9',
    borderLeftColor: '#dfe0e4',
    borderRightColor: '#dfe0e4',
    borderBottomColor: '#d0d1d5',
    borderWidth: 1,
    borderRadius: 3,
  },

My workaround on 0.56 for now is add this line only for Android to style summaryTouchable (no issue on iOS):

borderColor: Platform.OS === 'ios' ? null : '#dfe0e4',   // RN 0.56: workaround for Android ignoring 4 colors above

With this, Android on 0.56 would look similar to 0.54.4 screenshot above with light gray borders.

[TheSavior]

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?

[fungilation]

In my app for the relevant parts, it's a FlatList iterating over Text views. Something like:

<Flatlist
  data={_.map(contentSummary, (sentence, summI) => {
    return { key: 'summaryView' + summI, rowID: summI, sentence: sentence }
  })}
  renderItem={({ item }) => !item || (
          <TouchableHighlight style={styles.summaryTouchable} key={'summary' + item.rowID} onPress={() => {
            console.log('press me')
          }}>
            <View><Text numberOfLines={50} ellipsizeMode="middle">
              {{item.sentence}}
            </Text></View>
          </TouchableHighlight>
)} />

contentSummary being an array of sentences, like the data sample I pasted in https://github.com/facebook/react-native/issues/18258#issue-303287912 under "Steps to Reproduce".

[TheSavior]

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.

[fungilation]

That's a bullshit label. I have provided repro as I'm seeing it, big or "small". Style a View on Android like I've documented and see?

[hramos]

@fungilation please be respectful. We ask that all participants adhere to the Code of Conduct.

You can visit https://stackoverflow.com/help/mcve to read more about what a minimal, complete, and verifiable example might look like.

[fungilation]

Asking for less details, not more like I have is disingenuous for repro. I document what I see.

I've demonstrated the bug. Ignore it because you can slap on a label if you like. I call the label as it is, I mean no disrespect.

[oblador]

@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'
}} />

[fungilation]

summaryTouchable was discussed and pasted in my first comment. I showed how I worked around the bug, a bug that didn't exist on Android on 0.54.4.

[TheSavior]

@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.

[fungilation]

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)

[fungilation]

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.

[zmax92]

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 was able to repro. We are looking into it.

[steveccable]

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

[stale[bot]]

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.

[fungilation]

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

[stale[bot]]

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.

[TheSavior]

Silly bot.

[risabhkumar-cc]

Any fixes to this?

[NicWickman]

This issue still exists.

[parkpoom2984]

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

[TheSavior]

Does this still repro on 0.59? I know that a lot of border code has changed somewhat recently.

I'm closing this as it hasn't been active in a while, but if it still reproes on 0.59 let me know and I'm happy to re-open it.

[Hinaser]

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

[fungilation]

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

[hnrqsss]

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',

[Eden12345]

+1, I appear to be running into some of the same issues. Here are what my style props look like:

container: {
    height: 20,
    width: 20,
    borderWidth: 2,
    borderTopColor: 'green',
    borderBottomColor: 'blue',
    borderLeftColor: 'red',
    borderRightColor: 'yellow'
}

Unexpected Behavior
• Issue #1: As @Hinaser mentioned, if I add a borderColor prop, only borderTop and borderBottom overwrite it (adding borderLeft and borderRight props have no effect).
• Issue #2: As @hnrqsss mentioned, when I set a borderRadius prop to any value, all of the borders are automatically set to black. The only way to change this is by setting all of the borders to one color using the borderColor prop (ie. you cannot set them individually using props like borderTop or borderLeft).

Notes
• The workaround that @parkpoom2984 suggested for issue #2 didn't work in my project (although I do appreciate you sharing it ☺️)
• Issue #2 is more pressing for my project, as issue #1 can be avoided by setting all of the border colors for each side individually

Device Info
• I'm running Android 7.0 on a LG K20V, but I also reproduced these issues using the Android emulator on Expo Snack (https://snack.expo.io/)
• To clarify, I was not able to reproduce these issues on iOS, whether I was using an iPhone or an iOS emulator

[hnrqsss]

+1, I appear to be running into some of the same issues. Here are what my style props look like:

container: {
    height: 20,
    width: 20,
    borderWidth: 2,
    borderTopColor: 'green',
    borderBottomColor: 'blue',
    borderLeftColor: 'red',
    borderRightColor: 'yellow'
}

Unexpected Behavior
• Issue #1: As @Hinaser mentioned, if I add a borderColor prop, only borderTop and borderBottom overwrite it (adding borderLeft and borderRight props have no effect).
• Issue #2: As @hnrqsss mentioned, when I set a borderRadius prop to any value, all of the borders are automatically set to black. The only way to change this is by setting all of the borders to one color using the borderColor prop (ie. you cannot set them individually using props like borderTop or borderLeft).

Notes
• The workaround that @parkpoom2984 suggested for issue #2 didn't work in my project (although I do appreciate you sharing it ☺️)
• Issue #2 is more pressing for my project, as issue #1 can be avoided by setting all of the border colors for each side individually

Device Info
• I'm running Android 7.0 on a LG K20V, but I also reproduced these issues using the Android emulator on Expo Snack (https://snack.expo.io/)
• To clarify, I was not able to reproduce these issues on iOS, whether I was using an iPhone or an iOS emulator

None of the solutions worked for me.

On iOS worked perfectly, so i had to use Platform to check if is on android and my solution was a create a semicircle a little large of my image and position it behind.

[nicovak]

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)

[bass3l]

Facing this too on Android. I have a simple view, which I want to change its left border color and width only. the width is working as expected but the color is not, here it is:

<View style={{ width: 100, height: 100, elevation: 4, borderColor: '#c4c4c4', backgroundColor: 'white', borderLeftColor: 'green', borderLeftWidth: 3 }}>
<View>

[StepanDyubin]

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!!

[stale[bot]]

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 a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[ayelenmarie]

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:

[emilioheinz]

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

[stale[bot]]

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 a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[Glinkis]

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

[raymochi]

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.

[stale[bot]]

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 a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[fungilation]

Arise, zombie bug. Arise!