How to show shadow over scroll view items in react native

Question

I'm using native-base's Content to scroll and i want a fixed button on bottom when scrolling. How can i show the shadow of fixed button over scroll view Items like this.

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

Try to add to following style to the button styles:

shadowColor: "#000",
shadowOffset: {
    width: 0,
    height: 2,
},
shadowOpacity: 0.23,
shadowRadius: 2.62,
elevation: 4

If it's not working then please share more of the your component code so it will be easier to try help you out.

Answer 2

It is hard to implement such gradient effect in react-native because of the limitation of it on shadow. For Android API 27 or below, you cannot even change the color of elevation in Android by using shadowColor.

For your situation, I would recommend you to use react-native-linear-gradient.

After installed the package simply place the below component at the top of your button, it might do the trick.

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

Answer 3

You can animate items opacity to get something similar look.