How can I set elevation shadow only on the bottom on react native?
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
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