React Native border right / left colors do not work

Issue

I am using styled-components in React Native and the problem is that border-left-color and border-right-color fields do nothing. Border top and bottom fields function correctly. Same problem persists also when using StyleSheet. I am testing on Android emulator.

I have searched for solutions everywhere and I am unable to find any answer, since no one seems to be having this same problem.

Here is a simple demonstration:

import styled from 'styled-components/native'
import { TextInput as NativeTextInput } from 'react-native'
import theme from '../components/theme'

const formFieldBaseStyle = css`
  background-color: ${theme.colors.appBackground};
  margin: 5px;
  padding: 5px;
  border-width: 1px;
  border-color: ${theme.colors.borderLight}
`

const TextInput = styled(NativeTextInput).attrs({
  placeholderTextColor: theme.colors.textSecondary,
})`
  ${formFieldBaseStyles}
  color: ${theme.colors.textPrimary};
  font-size: ${theme.fontSizes.body};
  padding-left: 10px;
  padding-right: 10px;
  border-left-color: #F00
`

Solution

The problem was that for some reason border-left-color and border-right-color did not override border-color value, but for some reason border-top-color and border-bottom-color did. Defining all border colors individually solved the problem. This is probably a bug.

Solution:

const formFieldBaseStyle = css`
  background-color: ${theme.colors.appBackground};
  margin: 5px;
  padding: 5px;
  border-width: 1px;
  /* Colors must be defined individually so they can be overridden*/
  border-left-color: ${theme.colors.borderLight};
  border-right-color: ${theme.colors.borderLight};
  border-top-color: ${theme.colors.borderLight};
  border-bottom-color: ${theme.colors.borderLight};
`

Answered By - Crossoni