Is there a way to eliminate shadows from a View/Image that is absolutely positioned

I recently added a materialistic "Add" button to my Android-primary React Native app. Despite using the elevation style property for shadows on other elements, it seems to stop working when applied to an absolutely positioned element. I understand that this may be due to absolute positioning ignoring general layout rules, but I still believe a shadow should appear.

From what I gather, Android receives elevation while iOS uses different shadow properties.

This is what I'm aiming for:

https://i.sstatic.net/1ZqrR.png

However, no shadow appears once I set the element's style as absolute (in the bottom right corner).

Am I missing something, or is it simply not functional at the moment?

Answer №1

At this time, React Native does not have built-in shadow support for Android. Utilizing the elevation property seems to be the best way forward in achieving this effect. Please keep in mind that this method may only be effective on Android 5.0 and above.

Another option to consider is using the following module: https://github.com/879479119/react-native-shadow. I have personally had success with this solution.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Arranging json array according to alphabetical sections in angularjs 2

In the example below, I am working with JSON data that needs to be formatted and placed in a box according to specific criteria. The data sorted in A-B should go to a particular section, and it needs to be dynamic. Despite numerous attempts, I have not bee ...

Starting an activity after a phone call is ended on an Android device

I am looking to automate sending an SMS after the end of a received call. For example, when I receive a call, I want to automatically send a message to the caller afterwards. However, I am encountering issues starting an activity when extending my class ...

The setting of background-size: cover does not affect the height of the background image

Looking for a solution to make a background image fill a div entirely? Here is the CSS code you can use: .class{ background-image: url('img.jpg'); background-repeat: no-repeat; background-size: cover; } You can implement this within t ...

The file is being saved using the internal path instead of the SD card path

I've been going through different resources and the Android Guide to understand how to save files, but I seem to be missing something along the way. My goal is to store an image in a new folder within the pictures directory of the SD Card. After inc ...

The contents of the div do not display when the button is pressed except in jsfiddle

I have written a script that triggers the appearance of a div where users can adjust the time settings for a timer. The functionality works perfectly on JSFiddle, with the div displaying as intended. However, when tested on other online IDEs such as Coding ...

Display the menu upon activating the hover event icon using only CSS

Assistance Needed - Unable to activate hover and display the rest of the div I want to activate the hover effect where early levels are visible, and when hovering over the first level, the subsequent levels appear List item body { margin: 3%; } div.ti ...

Exploring CSS Outlining in Visual Studio 2013

Back in the days of Visual Studio 2010, whenever you opened a CSS file, a window would automatically pop up displaying all the classes and IDs for easy navigation within the file. However, in Visual Studio 2013, I seem to be unable to locate this helpful ...

Is there a different approach to customizing CellTables in GWT, aside from using ClientBundle?

Here's a two-part inquiry. 1) Although I appreciate the benefits of ClientBundle for styling purposes like minification and obfuscation, is there an alternate method to style a CellTable without relying on generated CSS class names? Can these class n ...

Eliminating an unwelcome gap between two div elements

I couldn't find anything on Google, so I searched this site and came across a similar topic Unwanted space between divs. I tried applying margin:0px; in several places, but there is still space between the two divs. Here's my HTML: <!DOC ...

clicking on links to different sections of the page does not automatically bring you to the top of

I am working on a design similar to this: http://jsfiddle.net/MTWu5/ The layout consists of a centered page with a sticky header. The header contains menu links that lead to anchors within the page. My issue arises when clicking on these links - I would l ...

Issue with Javascript/Jquery functionality within a PHP script

I have been attempting to incorporate a multi-select feature (view at http://jsfiddle.net/eUDRV/318/) into my PHP webpage. While I am able to display the table as desired, pressing the buttons to move elements from one side to another does not trigger any ...

Ways to ensure your page stays confidential

Concept: Exploring the idea of making specific pages on a website private. For example, having 4 navigation links where one link leads to a private page that requires a username and password for access. Currently, my practice website has 7 links directing ...

Position an element in CSS relative to two other elements

Can an element be positioned horizontally in relation to one element and vertically to another using only CSS? I am attempting to include a dropdown menu in my navbar. However, the submenu is not aligning correctly. I want to position element A so that its ...

Managing a fixed footer in an Android webview to prevent it from obstructing an input field when the soft keyboard appears

I am working with a webview that contains a React app, not React Native. The webview features a login page with two input fields and a fixed footer. However, when one of the input fields is focused, the footer moves up and covers part of the input field, ...

The line spacing is not functioning as expected

I'm looking to vertically align my text with my logo in a seamless manner. However, whenever I adjust the line height, it affects the positioning of my logo as well. Is there a way to only modify the text position while keeping the logo centered? Chec ...

Mobile users are unable to access the form

Welcome to my website ! I encounter an issue where I can successfully submit a form on the desktop version, but it seems that the "Next" button below the form is not clickable on mobile. I would greatly appreciate any assistance in resolving this matter. ...

What is the best way to have several automatic slideshows on a single webpage?

Currently, I am exploring the W3 HTML/CSS tutorial on incorporating multiple slideshows into a single page. While the tutorial provides examples for manual navigation of multiple slideshows or a single automatic slideshow, it lacks guidance on setting up m ...

The changing perspective in relation to the current position of a background

I am currently working on implementing a parallax effect, which is mostly successful. However, I have encountered a minor issue. Instead of the parallax effect being relative to the element's current position, it abruptly jumps to position 0. How can ...

Yeoman webapp error: Issue with incorrect CSS path in subfolder

I have been using the yeoman webapp generator (0.5.0) and my app directory is structured like this: app/ ├── dir1 │ └── index.html ├── favicon.ico ├── images ├── index.html ├── robots.txt ├── scripts │ └ ...

Save the time stamp when the application goes into the background. Developed using React Native

REVISED: I am working on a React Native app where I need to keep track of the timestamp when the app goes into the background in order to determine if re-login is required. I am using async storage to store this timestamp on the device, utilizing the appst ...