question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Border radius change the button color inside the Modal

See original GitHub issue

Using 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 Captura de pantalla 2019-05-05 a la(s) 9 57 23 p  m

This is exactly the same button element with borderRadius:0 Captura de pantalla 2019-05-05 a la(s) 9 57 32 p  m

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:7 (2 by maintainers)

github_iconTop GitHub Comments

3reactions
amirulasrofcommented, Feb 12, 2020

Same thing happened to me when borderRadius is applied

1reaction
emilmammadovcommented, Mar 11, 2020

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.

Read more comments on GitHub >

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

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found