Border radius change the button color inside the Modal
See original GitHub issueUsing the Modal fo react-native it does not happen and in IOS it does not happen either.
- What version of
react-native-modal
- 10.0.0 on Android Nexus_5X emulator
- What packages or other dependencies you’re using
react-native-elements
1.0.0
Button- The behavior you expect to see, and the actual behavior When I add a Button tag like this:
<Button
buttonStyle={{backgroundColor:'ff0000', borderRadius:10}}
title='hello world'
/>
I want to see the button with the right color, but if I use borderRadius, the color become darker and only happen inside the Modal. The other app buttons works.
- Most important of all: An isolated
<Modal isVisible style={{justifyContent: 'center', alignItems: 'center'}}>
<Button
buttonStyle={{backgroundColor:'#ff0000', borderRadius:10}}
title='This color is not the real color'
/>
<Button
buttonStyle={{backgroundColor:'#ff0000'}}
title='this Button works'
/>
</Modal>
This is an example of a button using borderRadius:30
This is exactly the same button element with borderRadius:0
Issue Analytics
- State:
- Created 4 years ago
- Comments:7 (2 by maintainers)
Top Results From Across the Web
How to change border radius of bootstrap modal?
border -radius removes the rounded corners while border removes all borders (left, right, top, bottom) around the modal. Share.
Read more >Borders - Bootstrap
Use border utilities to quickly style the border and border-radius of an element. ... Change the border color using utilities built on our...
Read more >Adjust corner radius and smoothing – Figma Help Center
Figma represents corner radius in (density-independent) pixels. You can adjust corner radius for an entire shape, or for each point in a vector...
Read more >How To Create Round Buttons - W3Schools
Learn how to style round buttons with CSS. ... Add rounded corners to a button with the border-radius property: Example .button { background-color:...
Read more >border-color - CSS: Cascading Style Sheets - MDN Web Docs
You can find more information about border colors in Borders in Applying color to HTML elements using CSS. Constituent properties. This property ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Same thing happened to me when borderRadius is applied
@amirulasrof Removing the borderRadius solved my problem. Thanks. React-Native has problems with borderRadius on Android side. I faced one more time with the borderRadius situation.