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.

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

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