Hey there, I'm currently facing an issue with applying a box shadow to one of the buttons in my React Native application. Unfortunately, the box shadow property is not supported in Android. To work around this limitation, I am experimenting with creating a shadow view using the LinearGradient component and positioning the button at the center of that view as illustrated below:
<LinearGradient
colors={['transparent', backgroundColor]}
start={{ x: 0.5, y: 0.5 }}
end={{ x: 1, y: 1 }}
style={{
width: '100%',
padding: 5,
height: 60,
justifyContent: 'center',
alignItems: 'flex-start',
marginTop: 0,
borderRadius: 2,
backgroundColor: 'transparent',
zIndex: 2,
bottom: 0,
}}>
<Pressable
onPress={onPress}
disabled={disabled}
style={({ pressed }) => [
{
borderWidth: state === 'primary_link' ? 0 : pressed ? 4 : borderWidth,
},
styles.background,
]}>
<ButtonTitle />
</Pressable>
</LinearGradient>
I have attempted adjusting the start and end values but haven't been successful in centering it properly. Is there a specific way to achieve this alignment using LinearGradient? My goal is to achieve a design similar to the image shown here: https://i.stack.imgur.com/WOlfO.png