Philip Cesar Garay
74 lines
1.6 KiB
JavaScript
74 lines
1.6 KiB
JavaScript
import { View, Text, StyleSheet, Platform } from "react-native";
|
|
import React from "react";
|
|
import BorderGradient from "../BorderGradient/BorderGradient";
|
|
import { BlurView } from "expo-blur";
|
|
import { responsiveHeight } from "react-native-responsive-dimensions";
|
|
import { useKeyboard } from "@react-native-community/hooks";
|
|
|
|
const ItemContainer = ({
|
|
height = responsiveHeight(40),
|
|
children,
|
|
gradientProps,
|
|
style,
|
|
disableKeyboardHeight = false,
|
|
}) => {
|
|
const { keyboardShown } = useKeyboard();
|
|
|
|
return (
|
|
<BorderGradient
|
|
gradientProps={{
|
|
colors: ["#FFFFFF00", "#FFFFFF"],
|
|
start: { x: 0.3, y: 0 },
|
|
end: { x: 1, y: 1 },
|
|
...gradientProps,
|
|
}}
|
|
style={{
|
|
...styles.borderGradientStyle,
|
|
height: !disableKeyboardHeight
|
|
? keyboardShown
|
|
? responsiveHeight(30)
|
|
: height
|
|
: height,
|
|
|
|
...style,
|
|
}}
|
|
>
|
|
<View style={styles.blurContainer}>
|
|
<BlurView
|
|
intensity={40}
|
|
tint="dark"
|
|
style={{ flex: 1, padding: 6 }}
|
|
experimentalBlurMethod={
|
|
Platform.OS !== "ios" ? "dimezisBlurView" : "none"
|
|
}
|
|
>
|
|
{children}
|
|
</BlurView>
|
|
</View>
|
|
</BorderGradient>
|
|
);
|
|
};
|
|
|
|
export default ItemContainer;
|
|
|
|
const styles = StyleSheet.create({
|
|
borderGradientStyle: {
|
|
borderWidth: 1,
|
|
borderRadius: 20,
|
|
shadowColor: "#000",
|
|
shadowOffset: {
|
|
width: 0,
|
|
height: 2,
|
|
},
|
|
shadowOpacity: 0.25,
|
|
shadowRadius: 3.84,
|
|
elevation: 100,
|
|
},
|
|
blurContainer: {
|
|
flex: 1,
|
|
borderRadius: 20,
|
|
overflow: "hidden",
|
|
zIndex: 1,
|
|
},
|
|
});
|