How can I set elevation shadow only on the bottom on react native?

Question

I'm trying to add a shadow on the bottom of a view, but I don't how to do it on Android. With elevation it put a shadow also on the top. Is there a way to do it like on iOS?

Here's my code:

export function makeElevation(elevation) {
const iosShadowElevation = {
    shadowOpacity: 0.0015 * elevation + 0.18,
    shadowRadius: 0.5 * elevation,
    shadowOffset: {
        height: 0.6 * elevation,
    },
};
const androidShadowElevation = {
    elevation,
};
return Platform.OS === 'ios' ? iosShadowElevation : androidShadowElevation;

}

left: iOS (expected)

right: Android

EDIT: The only "fake" solution I found is to use react-native-linear-gradient instead to create a custom shadow.

Delacroix

Answer 1

You can use overflow: 'hidden' to achieve the desired result without having to install a library.
wrap the view in a parent view and set the parent's overflow to hidden and apply a padding only on the side where you want your shadow to appear like so:

  <View style={{ overflow: 'hidden', paddingBottom: 5 }}>
    <View
      style={{
        backgroundColor: '#fff',
        width: 300,
        height: 60,
        shadowColor: '#000',
        shadowOffset: { width: 1, height: 1 },
        shadowOpacity:  0.4,
        shadowRadius: 3,
        elevation: 5,
      }} 
    />
  </View>

result:

here's a custom component that you can use:

import React from 'react'
import { View, StyleSheet, ViewPropTypes } from 'react-native'
import PropTypes from 'prop-types'


const SingleSidedShadowBox = ({ children, style }) => (
  <View style={[ styles.container, style ]}>
    { children }
  </View>
);

const styles = StyleSheet.create({
  container:{
    overflow: 'hidden',
    paddingBottom: 5,
  }
});

SingleSidedShadowBox.propTypes = {
  children: PropTypes.element,
  style: ViewPropTypes.style,
};

export default SingleSidedShadowBox;

example:

<SingleSidedShadowBox style={{width: '90%', height: 40}}>
  <View style={{
    backgroundColor: '#fff',
    width: '100%',
    height: '100%',
    shadowColor: '#000',
    shadowOffset: { width: 1, height: 1 },
    shadowOpacity:  0.4,
    shadowRadius: 3,
    elevation: 5,
  }} />
</SingleSidedShadowBox>

you can adjust the padding depending on your shadow

Waterline

best patch i've seen for this issue – Sturtevant

Answer 2

Unfortunately RN don't support it by default, check blow link https://ethercreative.github.io/react-native-shadow-generator/

but you can use npm packages like this

Onset

react-native-shadow is not perfect but it seems working. Thanks :-) It would be great if react-native handle it natively – Delacroix

Answer 3

Answers above are quite helpful but the workaround that worked best for me is by wrapping both, 1-The component dropping the shadow and 2-The component the shadow is being dropped on in a component with the style rule overflow: "hidden"

Example:

function SomeScreen (){
  return (
    <View style={{overflow: "hidden"}}/*Top shadow is hidden*/>
      <NavBar style={styles.shadow}/*The component dropping a shadow*/ /> 
      <ProductList /*The component under the shadow*/ />
    </View>
  );
}

const styles = StyleSheet.create({
  shadow: {
    shadowColor: "black",
    shadowOffset: { width: 0, height: 4 },
    shadowRadius: 6,
    shadowOpacity: 0.2,
    elevation: 3,
  }
});

Palestra

This is the best answer! The accepted answer creates an unrealistic shadow that isn't cast onto the next component, because the overflow: "hidden" clips the shadow at the bottom of the shadow casting component. Thanks for this! – Nomarchy

Answer 4

Just append/put this to main view container:

const styles = StyleSheet.create({
      container: {
        ...Platform.select({
          ios: {
            shadowColor: '#000',
            shadowOffset: {width: 1, height: 3},
            shadowOpacity: 0.4,
          },
          android: {
            elevation: 4,
          },
        }),
      },
    });

Rafter

It will add a shadow on the top as well – Delacroix