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 in CSS by Edureka
• 7,660 points
20 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 by Edureka
• 8,460 points

Related Questions In CSS

0 votes
1 answer
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 5 days ago in CSS by Edureka
• 8,460 points
7 views
0 votes
1 answer

How to build a special polygon (a kite shape) with HTML & CSS only?

I made two divs, one for Arc ...READ MORE

answered May 28 in CSS by Edureka
• 8,460 points
23 views
0 votes
1 answer

How to hide image broken Icon using only CSS/HTML?

Because CSS/HTML has no means of knowing ...READ MORE

answered May 31 in CSS by Edureka
• 8,460 points
13 views
0 votes
1 answer

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

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

answered Feb 16 in Others by Aditya
• 7,280 points
17 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 in Others by Kichu
• 19,040 points
46 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 in CSS by Edureka
• 8,460 points
27 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 in CSS by Edureka
• 8,460 points
13 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP