49 lines
No EOL
1.2 KiB
TypeScript
49 lines
No EOL
1.2 KiB
TypeScript
import React from 'react'
|
|
import { Platform, StyleSheet, View } from 'react-native'
|
|
import { ViewProps } from 'react-native/Libraries/Components/View/ViewPropTypes'
|
|
import { useThemeColor } from '../../hooks/useThemeColor'
|
|
|
|
function generateBoxShadowStyle(
|
|
xOffset: number,
|
|
yOffset: number,
|
|
shadowColorIos: string,
|
|
shadowOpacity: number,
|
|
shadowRadius: number,
|
|
elevation: number,
|
|
shadowColorAndroid: string
|
|
):void {
|
|
if(Platform.OS === 'ios'){
|
|
styles.boxShadow = {
|
|
shadowColor: shadowColorIos,
|
|
shadowOffset : {width: xOffset, height: yOffset},
|
|
shadowOpacity,
|
|
shadowRadius,
|
|
backgroundColor: useThemeColor("backgroundColor")
|
|
}
|
|
}else if (Platform.OS === 'android'){
|
|
styles.boxShadow = {
|
|
elevation: elevation,
|
|
shadowColor: shadowColorAndroid,
|
|
};
|
|
}
|
|
}
|
|
|
|
export default function CustomCard(props : ViewProps) {
|
|
generateBoxShadowStyle(1, 1, '#171717', 0.2, 20, 10, '#171717')
|
|
return (
|
|
<View style={[styles.container, styles.boxShadow, props.style]}>
|
|
{props.children}
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container:{
|
|
flexDirection: "row",
|
|
alignItems: "stretch",
|
|
alignContent: "space-between",
|
|
borderRadius: 20,
|
|
marginHorizontal: 10,
|
|
},
|
|
boxShadow: {},
|
|
}) |