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.

Dim Background on Modal Display

See original GitHub issue

Description

Expected default behavior of modals on mobile devices, is that on dispaly of the modal, the background page dims. Currently, the transparent property of the Modal component sets the background to either transparent or white. It would make more sense to have 3 options for background: transparent, white or rgba(0,0,0,0.5) - dim.

Reproduction

Default behavior of modal transparent property.

Solution

I was able to change the code that when transparent is false, it dims the background. However, it would be more correct to allow the user to select from a wider range of options.

backgroundColor: this.props.transparent ? 'transparent' : 'rgba(0,0,0,0.5)',

Dim Background on Modal Display

Additional Information

  • React Native version: Latest
  • Platform: Android
  • Operating System: MacOS

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:3
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
johngorencommented, Oct 19, 2017

I think it should be opened, it’s weird not to have this feature.

0reactions
hramoscommented, Mar 15, 2018

Please open a new issue.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Dim background screen when modal popup opens
I have a modal popup that opens on a button click. I am trying to dim the background when the popup open but...
Read more >
Simple Modal Window With Background Blur Effect - CSS Script
A simple, lightweight vanilla JavaScript library that lets you create a modal window while blurring the background content to focus your ...
Read more >
How To Use Opacity and Transparency to Create a Modal in ...
When styling HTML with CSS, opacity can help soften a shadow, de-emphasize non-essential content during a specific task, or fade content in ...
Read more >
blur modal background css - CodePen
CSS (SCSS) ; 1 .firstBlur, .secondBlur, .imgBlur { ; 2. margin:50px 20px 0; ; 3. border: solid 1px black; ; 4. padding:20px; ;...
Read more >
Modal Options - W3Schools Tryit Editor
The backdrop option specifies whether the modal should have a dark overlay (the background color of the current page) or not. Modal with...
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