update

src/components/AppActionSheet.js

@@ -1,4 +1,4 @@
-import { View, Text } from "react-native";
+import { View, Text, Platform } from "react-native";
 import React from "react";
 import ActionSheet from "react-native-actions-sheet";
 import { gutters, Palette } from "../styles";
@@ -27,6 +27,9 @@ const AppActionSheet = ({ children, props }) => {
           borderTopRightRadius: 20,
           overflow: "hidden",
         }}
+        experimentalBlurMethod={
+          Platform.OS !== "ios" ? "dimezisBlurView" : "none"
+        }
       >
         {children}
       </BlurView>

src/components/BlurItemButton.js

@@ -1,4 +1,11 @@
-import { View, Text, Pressable, StyleSheet, Image } from "react-native";
+import {
+  View,
+  Text,
+  Pressable,
+  StyleSheet,
+  Image,
+  Platform,
+} from "react-native";
 import React from "react";
 import { BlurView } from "expo-blur";
 import { Palette, Style } from "../styles";
@@ -9,7 +16,13 @@ import { size } from "../styles/Style";
 const BlurItemButton = ({ onPress, title = "" }) => {
   return (
     <Pressable onPress={onPress}>
-      <BlurView intensity={20} style={styles.buttonContainer}>
+      <BlurView
+        intensity={20}
+        style={styles.buttonContainer}
+        experimentalBlurMethod={
+          Platform.OS !== "ios" ? "dimezisBlurView" : "none"
+        }
+      >
         <Text style={styles.buttonText}>{title}</Text>
         <Image
           source={icons.chevronDown}

src/components/BorderGradientButton.js

@@ -1,4 +1,4 @@
-import { View, Text, Pressable, Image } from "react-native";
+import { View, Text, Pressable, Image, Platform } from "react-native";
 import React from "react";
 import BorderGradient from "./BorderGradient/BorderGradient";
 import { Palette, Style } from "../styles";
@@ -50,6 +50,9 @@ const BorderGradientButton = ({
               borderRadius: 14,
               gap: 11,
             }}
+            experimentalBlurMethod={
+              Platform.OS !== "ios" ? "dimezisBlurView" : "none"
+            }
           >
             {icon && <Image source={icon} style={size({ size: 16 })} />}
             <Text

src/components/ChatInput.js

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "reactn";
-import { Pressable, TextInput, View, Image } from "react-native";
+import { Pressable, TextInput, View, Image, Platform } from "react-native";
 import { BlurView } from "expo-blur";
 
 import { Fonts, gutters, Palette } from "../styles";
@@ -65,6 +65,9 @@ const ChatInput = ({
         intensity={30}
         tint="dark"
         style={{ flex: 1, justifyContent: "center" }}
+        experimentalBlurMethod={
+          Platform.OS !== "ios" ? "dimezisBlurView" : "none"
+        }
       >
         <FilesPreview
           files={files}

src/components/Input.js

@@ -6,6 +6,7 @@ import {
   View,
   Image,
   Keyboard,
+  Platform,
 } from "react-native";
 import { useState } from "react";
 import CountryPicker, { DARK_THEME } from "react-native-country-picker-modal";
@@ -13,10 +14,11 @@ import usePlaceApi from "react-native-minuit/src/hooks/usePlacesApi";
 
 import { art, icons } from "../assets";
 import { Fonts, Palette, Style, gutters } from "../styles";
-import { fontTypeList } from "../styles/Fonts";
+import { FONT_FAMILY, fontTypeList } from "../styles/Fonts";
 
 import { isWeb } from "../hooks/useLayoutType";
 import { GOOGLE_API_KEY } from "../data/keys";
+import { BlurView } from "expo-blur";
 
 const Input = ({
   inputRef = null,
@@ -39,6 +41,7 @@ const Input = ({
   layout = "default", // "default" | "line"
 
   isNumeric = false,
+  isBlur = false,
 }) => {
   const [isFocused, setIsFocused] = useState(false);
   const [showPassword, setShowPassword] = useState(false);
@@ -63,51 +66,66 @@ const Input = ({
     minChars: 2,
   });
 
+  const ContainerView = isBlur ? BlurView : View;
+
   return (
     <>
       <View
         style={{
-          ...(isRoundedRectangle
-            ? {
-                ...Style.containerItem,
-                ...(isDefaultLayout
-                  ? {
-                      paddingVertical: 10,
-                      backgroundColor:
-                        type === "coinAmount"
-                          ? Palette.transparentRadioactivGreen
-                          : Palette.lightPurple,
-                      height: type === "textarea" ? 150 : "auto",
-                    }
-                  : {}),
-              }
-            : {
-                ...Style.containerCenter,
-                borderBottomColor: mainColor,
-                borderBottomWidth: 1,
-              }),
-          ...(borderType === "dashed"
-            ? {
-                borderStyle: "dashed",
-                borderColor: isFocused
-                  ? Palette.primary
-                  : Palette.transparentPrimary,
-                borderWidth: 1,
-              }
-            : {}),
           width: "100%",
           ...containerStyle,
+          gap: 4,
         }}
       >
         {label?.length > 0 && (
-          <Text style={{ ...Fonts({ type: "default" }) }}>{label}</Text>
+          <Text
+            style={{
+              fontSize: 14,
+              color: Palette.white,
+              fontFamily: FONT_FAMILY.HelveticaNeueRegular,
+            }}
+          >
+            {label}
+          </Text>
         )}
 
-        <View
+        <ContainerView
+          tint="dark"
+          experimentalBlurMethod={
+            Platform.OS !== "ios" ? "dimezisBlurView" : "none"
+          }
           style={{
             ...Style.containerRow,
-            ...(isRoundedRectangle ? { flex: 1 } : {}),
-            paddingVertical: 10,
+            ...(isRoundedRectangle
+              ? {
+                  ...Style.containerItem,
+                  ...(isDefaultLayout
+                    ? {
+                        paddingVertical: 10,
+                        backgroundColor:
+                          type === "coinAmount"
+                            ? Palette.transparentRadioactivGreen
+                            : Palette.glass,
+                        height: type === "textarea" ? 150 : 50,
+                        overflow: "hidden",
+                        borderRadius: 12,
+                      }
+                    : {}),
+                }
+              : {
+                  ...Style.containerCenter,
+                  borderBottomColor: mainColor,
+                  borderBottomWidth: 1,
+                }),
+            ...(borderType === "dashed"
+              ? {
+                  borderStyle: "dashed",
+                  borderColor: isFocused
+                    ? Palette.primary
+                    : Palette.transparentPrimary,
+                  borderWidth: 1,
+                }
+              : {}),
             width: "100%",
           }}
         >
@@ -155,7 +173,7 @@ const Input = ({
             <TextInput
               ref={inputRef}
               placeholder={placeholder}
-              placeholderTextColor={mainColor}
+              placeholderTextColor={Palette.gray}
               value={value}
               onChangeText={setValue}
               multiline={type === "textarea"}
@@ -165,9 +183,15 @@ const Input = ({
               style={{
                 width: "100%",
                 ...(isRoundedRectangle
-                  ? { height: "100%", flex: 1, textAlignVertical: "top" }
+                  ? {
+                      height: "100%",
+                      flex: 1,
+                      textAlignVertical: type === "textarea" ? "top" : "center",
+                    }
                   : { textAlign: "center" }),
-                ...Fonts({ type: "default", color: mainColor }),
+                fontSize: 14,
+                color: Palette.white,
+                fontFamily: FONT_FAMILY.InterRegular,
                 ...(isWeb
                   ? {
                       lineHeight: "auto",
@@ -199,10 +223,7 @@ const Input = ({
           )}
 
           {type === "password" ? (
-            <Pressable
-              onPress={() => setShowPassword(!showPassword)}
-              style={{ position: "absolute", right: 0 }}
-            >
+            <Pressable onPress={() => setShowPassword(!showPassword)}>
               <Image
                 source={icons.eye}
                 style={[Style.iconDefault]}
@@ -216,7 +237,7 @@ const Input = ({
               resizeMode="contain"
             />
           ) : null}
-        </View>
+        </ContainerView>
 
         {type === "autoCompleteAddress" &&
           places?.[0]?.description &&

src/components/ItemContainer/ItemContainer.js

@@ -1,4 +1,4 @@
-import { View, Text, StyleSheet } from "react-native";
+import { View, Text, StyleSheet, Platform } from "react-native";
 import React from "react";
 import BorderGradient from "../BorderGradient/BorderGradient";
 import { BlurView } from "expo-blur";
@@ -25,7 +25,14 @@ const ItemContainer = ({
       }}
     >
       <View style={styles.blurContainer}>
-        <BlurView intensity={40} tint="dark" style={{ flex: 1, padding: 6 }}>
+        <BlurView
+          intensity={40}
+          tint="dark"
+          style={{ flex: 1, padding: 6 }}
+          experimentalBlurMethod={
+            Platform.OS !== "ios" ? "dimezisBlurView" : "none"
+          }
+        >
           {children}
         </BlurView>
       </View>

src/components/ItemContainer/ItemContainer.web.js

@@ -1,4 +1,4 @@
-import { View, Text, StyleSheet } from "react-native";
+import { View, Text, StyleSheet, Platform } from "react-native";
 import React, { useState } from "react";
 import BorderGradient from "../BorderGradient/BorderGradient";
 import { responsiveHeight } from "react-native-responsive-dimensions";
@@ -55,6 +55,9 @@ const ItemContainer = ({
             alignSelf: "center",
             height: "99.2%",
           }}
+          experimentalBlurMethod={
+            Platform.OS !== "ios" ? "dimezisBlurView" : "none"
+          }
         >
           {children}
         </BlurView>

src/components/Overlay.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Pressable, StyleSheet } from "react-native";
+import { Platform, Pressable, StyleSheet } from "react-native";
 import { AnimatePresence, Motion } from "@legendapp/motion";
 import { BlurView } from "expo-blur";
 import { Portal } from "@gorhom/portal";
@@ -55,6 +55,9 @@ const Overlay = ({
                 ...StyleSheet.absoluteFillObject,
                 ...contentContainerStyle,
               }}
+              experimentalBlurMethod={
+                Platform.OS !== "ios" ? "dimezisBlurView" : "none"
+              }
             >
               <Pressable
                 style={{

src/components/SearchBar.js

@@ -1,4 +1,4 @@
-import { View, Text, TextInput, Image } from "react-native";
+import { View, Text, TextInput, Image, Platform } from "react-native";
 import React from "react";
 import { BlurView } from "expo-blur";
 import { icons } from "../assets";
@@ -20,6 +20,9 @@ const SearchBar = ({
           gap: 10,
           ...Style.containerRow,
         }}
+        experimentalBlurMethod={
+          Platform.OS !== "ios" ? "dimezisBlurView" : "none"
+        }
       >
         <Image source={icons.search} />
         <TextInput

src/components/modal/DeleteModal.js

@@ -1,8 +1,7 @@
 import { View, Text } from "react-native";
 import React from "react";
-import ActionSheet, { SheetManager } from "react-native-actions-sheet";
-import { gutters, Palette } from "../../styles";
-import { BlurView } from "expo-blur";
+import { SheetManager } from "react-native-actions-sheet";
+import { Palette } from "../../styles";
 import BorderGradientButton from "../BorderGradientButton";
 import GradientButton from "../GradientButton";
 import { FONT_FAMILY } from "../../styles/Fonts";