How to show shadow over scroll view items in react native

Question

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. 

But what i achieve is this 

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,
  },

Answer 1

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} />

If you need to know more about React, Its recommended to join React JS course today.