androidreact-nativeandroid-stylesshadow

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


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.

IOS/ANDROID


Solution

  • 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: 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