How to show shadow over scroll view items in react native

0 votes

I'm scrolling with native-Content, base's and I'd like a fixed button at the bottom. What is the best way to show the shadow of a fixed button over a scroll view? This sort of thing. enter image description here

But what i achieve is this enter image description here

My Code

    <Container>
      <Content>
       ...
      </Content>
      <View style={styles.footer}>
        <Button style={styles.footerBtn}>
          <Text>{strings('consultant_profile.book_an_appointment')}</Text>
        </Button>
      </View>
</Container>

//Css
footer: {
    padding: 20,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.23,
    shadowRadius: 2.62,
    elevation: 4,
  },
Jun 9, 2022 in CSS by Edureka
• 12,890 points
1,049 views

1 answer to this question.

0 votes

Because of the limitations of react-native on shadow, it is difficult to build such a gradient effect. When utilising elevation, for example, you can't even select a colour on Android.

I would pick react-native-linear-gradient for your circumstance.

Simply insert the below component at the top of your button after installing the package; it should do the work.

<LinearGradient colors={['rgba(255, 255, 255, 0)', 'rgba(255, 255, 255, 1)']} {...otherGradientProps} />

answered Jun 10, 2022 by Edureka
• 11,450 points

Related Questions In CSS

0 votes
0 answers

How to make in CSS an overlay over an image?

I want to add this dark hue, ...READ MORE

Jul 22, 2022 in CSS by Edureka
• 12,890 points
112 views
0 votes
1 answer

"SyntaxError: Invalid or unexpected token" - How to SSR images/css with react

The first thing to highlight is that ...READ MORE

answered Jun 1, 2022 in CSS by Edureka
• 11,450 points
1,991 views
0 votes
1 answer

How to add border in my clip-path: polygon(); CSS style

Using an SVG Dilation Filter to Add ...READ MORE

answered Jun 21, 2022 in CSS by Edureka
• 11,450 points
2,382 views
0 votes
1 answer

How to overlay image with color in CSS?

Use the rgba() Function to Overlay Background ...READ MORE

answered Jun 28, 2022 in CSS by Edureka
• 11,450 points
130 views
0 votes
1 answer

How does the "position: sticky;" property work?

Do check if an ancestor element has ...READ MORE

answered Feb 16, 2022 in Others by Aditya
• 7,660 points
174 views
0 votes
0 answers

error: package com.android.annotations does not exist

This is my class: import com.android.annotations.NonNullByDefault; @NonNullByDefault public final class ...READ MORE

May 13, 2022 in Others by Kichu
• 19,040 points
1,575 views
0 votes
1 answer

How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags

I use jQuery for this: jQuery('li').wrapInner('<span class="li_content" />'); & ...READ MORE

answered May 27, 2022 in CSS by Edureka
• 11,450 points
313 views
0 votes
1 answer

How to insert spaces/tabs in text using HTML/CSS

For spaces, use &nbsp;, for (less than, ...READ MORE

answered Jun 1, 2022 in CSS by Edureka
• 11,450 points
93 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP