57 lines
1.3 KiB
JavaScript
57 lines
1.3 KiB
JavaScript
import {
|
|
View,
|
|
Text,
|
|
Pressable,
|
|
StyleSheet,
|
|
Image,
|
|
Platform,
|
|
} from "react-native";
|
|
import React from "react";
|
|
import { BlurView } from "expo-blur";
|
|
import { Palette, Style } from "../styles";
|
|
import { FONT_FAMILY } from "../styles/Fonts";
|
|
import { icons } from "../assets";
|
|
import { size } from "../styles/Style";
|
|
|
|
const BlurItemButton = ({ onPress, title = "" }) => {
|
|
return (
|
|
<Pressable onPress={onPress}>
|
|
<BlurView
|
|
intensity={Platform.OS === "ios" ? 20 : 10}
|
|
style={styles.buttonContainer}
|
|
// experimentalBlurMethod={
|
|
// Platform.OS !== "ios" ? "dimezisBlurView" : "none"
|
|
// }
|
|
>
|
|
<Text style={styles.buttonText}>{title}</Text>
|
|
<Image
|
|
source={icons.chevronDown}
|
|
style={{
|
|
...size({ size: 15 }),
|
|
transform: [{ rotate: "-90deg" }],
|
|
}}
|
|
resizeMode="contain"
|
|
/>
|
|
</BlurView>
|
|
</Pressable>
|
|
);
|
|
};
|
|
|
|
export default BlurItemButton;
|
|
|
|
const styles = StyleSheet.create({
|
|
buttonContainer: {
|
|
...Style.containerSpaceBetween,
|
|
paddingHorizontal: 12,
|
|
height: 56,
|
|
borderRadius: 14,
|
|
overflow: "hidden",
|
|
backgroundColor: Palette.glass,
|
|
},
|
|
buttonText: {
|
|
fontSize: 16,
|
|
color: Palette.white,
|
|
fontFamily: FONT_FAMILY.InterRegular,
|
|
},
|
|
});
|