React-native: Border radius on android 4.4.2

[sm2017]

On android 4.4.2 borderRadius and borderWidth is not render correctly

Environment

OS: Windows 10

Node: 8.5.0

Yarn: 1.2.1

npm: 5.3.0

Watchman: Not Found

Xcode: N/A

Android Studio: Version 2.3.0.0 AI-162.4069837


Packages: (wanted => installed)

react: 16.2.0 => 16.2.0

react-native: 0.53.0 => 0.53.0

Expected Behavior

A rounded rectangle must be rendered

Actual Behavior

Screen shot on android 4.4.2

Steps to Reproduce

Correct demo : https://snack.expo.io/BJuR6khOM

Run the following code on android 4.4.2

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


export default class App extends Component {
  render() {
    return (
      <TextInput style={styles.container}/>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    borderWidth: 1,
    borderColor: '#00ff00',
    borderRadius:10,
    backgroundColor: '#ff0000',
    color: '#252525',
    paddingLeft: 15,
    paddingRight: 15,
    marginTop:50,
  },
});

[react-native-bot]

Thanks for posting this! It looks like your issue may refer to an older version of React Native. Can you reproduce the issue on the latest stable release?

Thank you for your contributions.

_{How to Contribute • What to Expect from Maintainers}

[sm2017]

@react-native-bot it reproduced in last stable version too

[arma7x]

Have you test with borderTopRightRadius ? I'm on RN0.54 and using TopRight, TopLeft, BottomRight, BottomLeft to get radius render properly. and no border width.

[martjoao]

I'm having this issue as well. Have you found any workarounds for this, @sm2017 ? Border-width works OK, border radius too. When both are together I'm getting the same results you are.

[sm2017]

@martjoao I think it is a react native bug and must be fixed in native side
I have no workaround

[himabindugadupudi]

Fixed with commit c5ca26a which is now in Master. Please test with Master build.

[AkilLis]

It is working without borderWidth. With borderWidth issue still exists. Tested on latest release rn: 55.3 @himabindugadupudi

[sorakrisc]

Workaround I did was wrap the TextInput with View component and move all the style related with border to the View component.

<View style={...all the border style}>
<TextInput style={...textinput styling no border} />
</View>

Hope this help anyone..