update

src/assets/index.js

@@ -233,6 +233,7 @@ import placeholder2 from "./UI/placeholder2.jpg";
 import placeholder3 from "./UI/placeholder3.png";
 import placeholder4 from "./UI/placeholder4.jpg";
 import profile from "./UI/profile.jpg";
+import goodVibe from './UI/goodVibe.png'
 
 export const img = {
   placeholder,
@@ -240,4 +241,5 @@ export const img = {
   placeholder3,
   placeholder4,
   profile,
+  goodVibe,
 };

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,10 +66,36 @@ const Input = ({
     minChars: 2,
   });
 
+  const ContainerView = isBlur ? BlurView : View;
+
   return (
     <>
       <View
         style={{
+          width: "100%",
+          ...containerStyle,
+          gap: 4,
+        }}
+      >
+        {label?.length > 0 && (
+          <Text
+            style={{
+              fontSize: 14,
+              color: Palette.white,
+              fontFamily: FONT_FAMILY.HelveticaNeueRegular,
+            }}
+          >
+            {label}
+          </Text>
+        )}
+
+        <ContainerView
+          tint="dark"
+          experimentalBlurMethod={
+            Platform.OS !== "ios" ? "dimezisBlurView" : "none"
+          }
+          style={{
+            ...Style.containerRow,
             ...(isRoundedRectangle
               ? {
                   ...Style.containerItem,
@@ -76,8 +105,10 @@ const Input = ({
                         backgroundColor:
                           type === "coinAmount"
                             ? Palette.transparentRadioactivGreen
-                          : Palette.lightPurple,
+                            : Palette.glass,
-                      height: type === "textarea" ? 150 : "auto",
+                        height: type === "textarea" ? 150 : 50,
+                        overflow: "hidden",
+                        borderRadius: 12,
                       }
                     : {}),
                 }
@@ -96,19 +127,6 @@ const Input = ({
                 }
               : {}),
             width: "100%",
-          ...containerStyle,
-        }}
-      >
-        {label?.length > 0 && (
-          <Text style={{ ...Fonts({ type: "default" }) }}>{label}</Text>
-        )}
-
-        <View
-          style={{
-            ...Style.containerRow,
-            ...(isRoundedRectangle ? { flex: 1 } : {}),
-            paddingVertical: 10,
-            width: "100%",
           }}
         >
           {type === "search" ? (
@@ -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
+            <Pressable onPress={() => setShowPassword(!showPassword)}>
-              onPress={() => setShowPassword(!showPassword)}
-              style={{ position: "absolute", right: 0 }}
-            >
               <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 { SheetManager } from "react-native-actions-sheet";
-import { gutters, Palette } from "../../styles";
+import { Palette } from "../../styles";
-import { BlurView } from "expo-blur";
 import BorderGradientButton from "../BorderGradientButton";
 import GradientButton from "../GradientButton";
 import { FONT_FAMILY } from "../../styles/Fonts";

src/layouts/Page.js

@@ -1,3 +1,4 @@
+/* eslint-disable react/display-name */
 import React, { useState } from "reactn";
 import { Image, View } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";

src/navigation/BottomTab.js

@@ -53,7 +53,7 @@ export const BottomTabScreen = () => {
   return (
     <BottomTab.Navigator tabBar={(props) => <TabBar {...props} />}>
       <BottomTab.Screen
-        name={Routes.Create}
+        name={Routes.HomeStack}
         component={HomeStack}
         options={{
           tabBarLabel: "Créer",

src/navigation/HomeStack.js

@@ -5,6 +5,7 @@ import { Palette } from "../styles";
 import { Routes } from "./Routes";
 
 import Home from "../screens/Home";
+import CreateSongs from "../screens/CreateSongs";
 
 const screenOptions = {
   headerShown: false,
@@ -36,6 +37,11 @@ export default function HomeStackScreen() {
         component={Home}
         options={{ headerShown: false }}
       />
+      <HomeStack.Screen
+        name={Routes.Create}
+        component={CreateSongs}
+        options={{ headerShown: false }}
+      />
     </HomeStack.Navigator>
   );
 }

src/navigation/MainStack.js

@@ -57,6 +57,9 @@ import ChangeEmailAddress from "../screens/Profile/ChangeEmailAddress";
 import ChangePassword from "../screens/Profile/ChangePassword";
 import Language from "../screens/Profile/Language";
 import Reels from "../screens/Profile/Reels";
+import Register from "../screens/Register";
+import CreatePassword from "../screens/CreatePassword";
+import CreateName from "../screens/CreateName";
 
 const screenOptions = {
   headerShown: false,
@@ -267,6 +270,18 @@ const screens = [
     name: Routes.Reels,
     component: Reels,
   },
+  {
+    name: Routes.Register,
+    component: Register,
+  },
+  {
+    name: Routes.CreatePassword,
+    component: CreatePassword,
+  },
+  {
+    name: Routes.CreateName,
+    component: CreateName,
+  },
 ];
 
 export default function Main() {

src/navigation/Routes.js

@@ -3,6 +3,9 @@ export const Routes = {
   Onboarding: "Onboarding",
   Login: "Login",
   ForgotPassword: "ForgotPassword",
+  Register: "Register",
+  CreatePassword: "CreatePassword",
+  CreateName: "CreateName",
 
   BottomTab: "BottomTab",
   Welcome: "Welcome",

src/screens/CreateName.js

@@ -0,0 +1,62 @@
+import { View, Text } from "react-native";
+import React from "react";
+import Page from "../layouts/Page";
+import { background } from "../assets";
+import ItemContainer from "../components/ItemContainer/ItemContainer";
+import { Palette } from "../styles";
+import { FONT_FAMILY } from "../styles/Fonts";
+import { Input } from "../components/Input";
+import GradientButton from "../components/GradientButton";
+import { navigate } from "../navigation/NavigationService";
+import { Routes } from "../navigation";
+
+const CreateName = () => {
+  return (
+    <Page
+      backgroundImg={background.homeBG}
+      headerType="NAVIGATION"
+      title="Inscription"
+    >
+      <View style={{ flex: 1, paddingTop: 20 }}>
+        <ItemContainer height={275}>
+          <View style={{ gap: 32, paddingTop: 5, paddingHorizontal: 5 }}>
+            <View style={{ gap: 16 }}>
+              <View style={{ gap: 2 }}>
+                <Text
+                  style={{
+                    fontSize: 22,
+                    color: Palette.white,
+                    fontFamily: FONT_FAMILY.InterSemiBold,
+                  }}
+                >
+                  Comment t’appelles-tu?
+                </Text>
+                <Text
+                  style={{
+                    fontSize: 14,
+                    color: Palette.gray,
+                    fontFamily: FONT_FAMILY.InterRegular,
+                  }}
+                >
+                  Invisible pour les autres, sauf si tu l’utilises comme nom
+                  d’artiste.
+                </Text>
+              </View>
+              <Input placeholder="Prénom" label="Prénom" isBlur />
+            </View>
+            <GradientButton
+              title="Suivant"
+              containerStyle={{
+                width: "80%",
+                alignSelf: "center",
+              }}
+              onPress={() => navigate(Routes.Login)}
+            />
+          </View>
+        </ItemContainer>
+      </View>
+    </Page>
+  );
+};
+
+export default CreateName;

src/screens/CreatePassword.js

@@ -0,0 +1,66 @@
+import { View, Text, Pressable } from "react-native";
+import React from "react";
+import Page from "../layouts/Page";
+import { background } from "../assets";
+import ItemContainer from "../components/ItemContainer/ItemContainer";
+import { Palette } from "../styles";
+import { FONT_FAMILY } from "../styles/Fonts";
+import { Input } from "../components/Input";
+import GradientButton from "../components/GradientButton";
+import { navigate } from "../navigation/NavigationService";
+import { Routes } from "../navigation";
+
+const CreatePassword = () => {
+  return (
+    <Page
+      backgroundImg={background.homeBG}
+      headerType="NAVIGATION"
+      title="Inscription"
+    >
+      <View style={{ flex: 1, paddingTop: 20 }}>
+        <ItemContainer height={300}>
+          <View style={{ gap: 32, paddingTop: 5, paddingHorizontal: 5 }}>
+            <View style={{ gap: 16 }}>
+              <View style={{ gap: 2 }}>
+                <Text
+                  style={{
+                    fontSize: 22,
+                    color: Palette.white,
+                    fontFamily: FONT_FAMILY.InterSemiBold,
+                  }}
+                >
+                  Choisis un mot de passe{"\n"}sécurisé
+                </Text>
+                <Text
+                  style={{
+                    fontSize: 14,
+                    color: Palette.gray,
+                    fontFamily: FONT_FAMILY.InterRegular,
+                  }}
+                >
+                  Utilise au moins 8 caractères pour sécuriser ton compte.
+                </Text>
+              </View>
+              <Input
+                placeholder="Mot de passe"
+                label="Mot de passe"
+                isBlur
+                type="password"
+              />
+            </View>
+            <GradientButton
+              title="Suivant"
+              containerStyle={{
+                width: "80%",
+                alignSelf: "center",
+              }}
+              onPress={() => navigate(Routes.CreateName)}
+            />
+          </View>
+        </ItemContainer>
+      </View>
+    </Page>
+  );
+};
+
+export default CreatePassword;

src/screens/CreateSongs.js

@@ -0,0 +1,193 @@
+import { View, Text, Image, Pressable, Platform } from "react-native";
+import React, { useState } from "react";
+import Page from "../layouts/Page";
+import { ai, background, icons } from "../assets";
+import { Palette, Style } from "../styles";
+import { responsiveHeight } from "react-native-responsive-dimensions";
+import BorderGradient from "../components/BorderGradient/BorderGradient";
+import { BlurView } from "expo-blur";
+import { FONT_FAMILY } from "../styles/Fonts";
+import { size } from "../styles/Style";
+import GradientButton from "../components/GradientButton";
+import { goBack } from "../navigation/NavigationService";
+
+const CreateSongs = () => {
+  const [selectedIndex, setSelectedIndex] = useState(null);
+
+  return (
+    <Page backgroundImg={background.homeBG} headerType="NONE">
+      <View style={{ flex: 1, ...Style.containerCenter }}>
+        <View
+          style={{
+            width: "100%",
+            height: responsiveHeight(60),
+          }}
+        >
+          <BorderGradient
+            gradientProps={{
+              colors: ["#FFFFFF00", Palette.white],
+              start: { x: 0, y: 0 },
+              end: { x: 1, y: 0.4 },
+            }}
+            style={{
+              borderWidth: 1,
+              borderRadius: 20,
+              height: responsiveHeight(55),
+            }}
+          >
+            <Image
+              source={ai.nathalie}
+              style={{
+                width: 171,
+                height: 250,
+                position: "absolute",
+                zIndex: 3,
+                top: -100,
+                alignSelf: "center",
+              }}
+              resizeMode="contain"
+            />
+            <BlurView
+              intensity={40}
+              style={{
+                flex: 1,
+                borderRadius: 20,
+                overflow: "hidden",
+                justifyContent: "flex-end",
+                backgroundColor: Palette.glass,
+                paddingHorizontal: 10,
+                zIndex: 1,
+                gap: 20,
+                paddingVertical: 20,
+              }}
+              experimentalBlurMethod={
+                Platform.OS !== "ios" ? "dimezisBlurView" : "none"
+              }
+            >
+              <Pressable
+                style={{
+                  position: "absolute",
+                  ...Style.containerCenter,
+                  ...size({ size: 24 }),
+                  top: 10,
+                  left: 10,
+                }}
+                onPress={goBack}
+              >
+                <Image
+                  source={icons.close}
+                  style={{
+                    ...size({ size: 15 }),
+                  }}
+                />
+              </Pressable>
+              <View style={{ alignItems: "center", zIndex: 2 }}>
+                <Text
+                  style={{
+                    fontSize: 22,
+                    color: Palette.white,
+                    fontFamily: FONT_FAMILY.InterSemiBold,
+                  }}
+                >
+                  Atelier écriture
+                </Text>
+                <Text
+                  style={{
+                    fontSize: 14,
+                    color: Palette.white,
+                    fontFamily: FONT_FAMILY.InterRegular,
+                  }}
+                >
+                  C'est ici que je vais t'aider à écrire ta chanson.
+                </Text>
+              </View>
+              <View style={{ gap: 10, zIndex: 1 }}>
+                {Array.from({ length: 3 }).map((item, index) => (
+                  <Pressable
+                    key={index}
+                    onPress={() => {
+                      console.log("Pressed");
+                      if (selectedIndex === index) {
+                        setSelectedIndex(null);
+                      } else {
+                        setSelectedIndex(index);
+                      }
+                    }}
+                    style={{ zIndex: 1 }}
+                  >
+                    <BlurView
+                      tint={selectedIndex === index ? "default" : "dark"}
+                      style={{
+                        ...Style.containerSpaceBetween,
+                        paddingHorizontal: 12,
+                        paddingVertical: 10,
+                        borderRadius: 14,
+                        backgroundColor: Palette.glass,
+                        overflow: "hidden",
+                      }}
+                      experimentalBlurMethod={
+                        Platform.OS !== "ios" ? "dimezisBlurView" : "none"
+                      }
+                    >
+                      <View>
+                        <Text
+                          style={{
+                            fontSize: 16,
+                            color:
+                              selectedIndex === index
+                                ? Palette.black
+                                : Palette.white,
+                            fontFamily: FONT_FAMILY.InterRegular,
+                          }}
+                        >
+                          Chanson sans titre
+                        </Text>
+                        <Text
+                          style={{
+                            fontSize: 12,
+                            color:
+                              selectedIndex === index
+                                ? Palette.black
+                                : Palette.white,
+                            fontFamily: FONT_FAMILY.InterRegular,
+                          }}
+                        >
+                          Modifié le 23/04
+                        </Text>
+                      </View>
+                      <Pressable>
+                        <Image
+                          source={icons.threeDots}
+                          style={{
+                            ...size({ size: 24 }),
+                            transform: [{ rotateZ: "90deg" }],
+                          }}
+                          tintColor={
+                            selectedIndex === index
+                              ? Palette.black
+                              : Palette.white
+                          }
+                          resizeMode="contain"
+                        />
+                      </Pressable>
+                    </BlurView>
+                  </Pressable>
+                ))}
+              </View>
+              <GradientButton
+                title="Créer un texte"
+                containerStyle={{
+                  width: "80%",
+                  alignSelf: "center",
+                  marginTop: 10,
+                }}
+              />
+            </BlurView>
+          </BorderGradient>
+        </View>
+      </View>
+    </Page>
+  );
+};
+
+export default CreateSongs;

src/screens/HitParade/components/PlaybacksCard.js

@@ -1,4 +1,4 @@
-import { View, Text, Image } from "react-native";
+import { View, Text, Image, Platform } from "react-native";
 import React from "react";
 import { BlurView } from "expo-blur";
 import { img } from "../../../assets";
@@ -19,6 +19,9 @@ const PlaybacksCard = () => {
         backgroundColor: Palette.glass,
         overflow: "hidden",
       }}
+      experimentalBlurMethod={
+        Platform.OS !== "ios" ? "dimezisBlurView" : "none"
+      }
     >
       <View
         style={{

src/screens/HitParade/components/SongCard.js

@@ -1,4 +1,4 @@
-import { View, Text, Image } from "react-native";
+import { View, Text, Image, Platform } from "react-native";
 import React from "react";
 import { img } from "../../../assets";
 import { BlurView } from "expo-blur";
@@ -31,6 +31,9 @@ const SongCard = () => {
           ...Style.containerRow,
         }}
         tint="dark"
+        experimentalBlurMethod={
+          Platform.OS !== "ios" ? "dimezisBlurView" : "none"
+        }
       >
         <View style={{ flex: 1, ...Style.containerRow, gap: 15 }}>
           <Text

src/screens/Home.js

@@ -1,163 +1,137 @@
-import { useState } from "react";
+import {
-import React from "reactn";
+  View,
-import { responsiveHeight } from "react-native-responsive-dimensions";
+  Text,
-import useMinuit from "react-native-minuit/src/hooks/useMinuit";
+  Image,
-
+  ScrollView,
+  Pressable,
+  Platform,
+} from "react-native";
+import React from "react";
 import Page from "../layouts/Page";
+import { ai, background, img } from "../assets";
+import { responsiveHeight } from "react-native-responsive-dimensions";
+import { BlurView } from "expo-blur";
+import { Palette } from "../styles";
+import { FONT_FAMILY } from "../styles/Fonts";
+import { navigate } from "../navigation/NavigationService";
+import { Routes } from "../navigation";
 
-import { Palette, gutters } from "../styles";
+const CREATE_DATA = [
-
-import SectionTextHeader from "../components/SectionTextHeader";
-import OptionSelector from "../components/OptionSelector";
-import { Input } from "../components/Input";
-import Button from "../components/Button";
-import DocumentDropZone from "../components/DocumentDropZone";
-import FilesPreview from "../components/FilesPreview";
-
-import { documentsRef } from "../config/firebase";
-import { background } from "../assets";
-
-const accountTypeList = {
-  INDIVIDUAL: "Particulier",
-  COMPANY: "Société",
-};
-
-const accountTypeColorMap = {
-  INDIVIDUAL: {
-    primary: Palette.primary,
-    secondary: Palette.transparentPrimary,
-  },
-  COMPANY: {
-    primary: Palette.radioactivGreen,
-    secondary: Palette.transparentRadioactivGreen,
-  },
-};
-
-export default ({ containerStyle = {} }) => {
-  const { setIsLoading, setTooltip } = useMinuit();
-
-  const documentID = "TEST_DOCUMENT_ID";
-
-  const [billingDetails, setBillingDetails] = useState({
-    type: "INDIVIDUAL",
-    name: "",
-    address: "",
-    city: "",
-    zipCode: "",
-    countryCode: "",
-    vatNumber: "",
-    companyIdentifier: "",
-    files: [],
-  });
-
-  const {
-    type = "INDIVIDUAL",
-    name = "",
-    address = "",
-    city = "",
-    zipCode = "",
-    countryCode = "FR",
-    vatNumber = "",
-    companyIdentifier = "",
-    files = [],
-  } = billingDetails || {};
-
-  const updateBillingDetails = (key, value) => {
-    setBillingDetails({
-      ...billingDetails,
-      [key]: value,
-    });
-  };
-
-  const fieldList = [
   {
-      key: "name",
+    img: ai.nathalie,
-      label: type === "COMPANY" ? "Raison sociale" : "Nom",
+    bg: background.writingBG,
-      value: name,
+    label: "Nathalie",
-      inputProps: {
+    desc: "Let’s write lyrics together !",
-        autoCapitalize: type === "COMPANY" ? "none" : "words",
+    type: "Songwriter",
-      },
   },
   {
-      key: "address",
+    img: ai.theo,
-      label: "Adresse",
+    bg: background.studioBG,
-      value: address,
+    label: "Theo",
-      inputProps: {
+    desc: "Come back, when\nyou’ll have lyrics!",
-        type: "autoCompleteAddress",
+    type: "Beatmaker",
-      },
   },
   {
-      key: "city",
+    img: ai.bena,
-      label: "Ville",
+    bg: background.productionBG,
-      value: city,
+    label: "Bena",
+    desc: "Come back when you want\nto publish the song!",
+    type: "Producer",
   },
   {
-      key: "zipCode",
+    img: ai.john,
-      label: "Code postal",
+    bg: background.playbackBG,
-      value: zipCode,
+    label: "John",
-      inputProps: {
+    desc: "Come back when your\naudio is ready!",
-        isNumeric: true,
+    type: "Director",
   },
-    },
+];
-    {
-      key: "countryCode",
-      label: "Pays",
-      value: countryCode,
-      type: "countryPicker",
-    },
-    {
-      key: "vatNumber",
-      label: "Numéro de TVA intracommunautaire (facultatif)",
-      value: vatNumber,
-      condition: type === "COMPANY",
-      required: false,
-    },
-    {
-      key: "companyIdentifier",
-      label: "Numéro SIRET",
-      value: companyIdentifier,
-      condition: type === "COMPANY",
-    },
-  ].filter(({ condition = true }) => condition);
-
-  const onSubmit = async () => {
-    try {
-      setIsLoading(true);
-
-      let cleanObject = {};
-
-      fieldList.forEach(({ key, value, label, required = true }) => {
-        if (value) {
-          cleanObject[key] = value;
-        } else if (required) {
-          throw new Error(`Le champ ${label.toLowerCase()} est obligatoire`);
-        }
-      });
-
-      await documentsRef.doc(documentID).set(
-        {
-          ...cleanObject,
-        },
-        {
-          merge: true,
-        }
-      );
-
-      setTooltip({
-        type: "sucess",
-        text: "Document publié!",
-      });
-    } catch (error) {
-      setTooltip({
-        type: "error",
-        text: error.message,
-      });
-    } finally {
-      setIsLoading(false);
-    }
-  };
 
+const Home = () => {
   return (
-    <Page backgroundImg={background.homeBG} headerType="NONE"></Page>
+    <Page backgroundImg={background.homeBG} headerType="NONE">
+      <View style={{ flex: 1 }}>
+        <Image
+          source={img.goodVibe}
+          style={{ alignSelf: "center", position: "absolute" }}
+        />
+        <ScrollView
+          contentContainerStyle={{
+            flexGrow: 1,
+            gap: 57,
+            paddingBottom: responsiveHeight(20),
+          }}
+          showsVerticalScrollIndicator={false}
+        >
+          <View style={{ height: responsiveHeight(60) }} />
+          {CREATE_DATA.map((item, index) => (
+            <Pressable
+              key={index}
+              onPress={() =>
+                navigate(Routes.Create, {
+                  action: item.type,
+                })
+              }
+            >
+              <BlurView
+                tint="dark"
+                intensity={20}
+                style={{
+                  position: "absolute",
+                  zIndex: 1,
+                  left: 110,
+                  top: 10,
+                  paddingVertical: 8,
+                  paddingHorizontal: 12,
+                  borderRadius: 14,
+                  borderBottomLeftRadius: 0,
+                  overflow: "hidden",
+                  backgroundColor: Palette.glass,
+                }}
+                experimentalBlurMethod={
+                  Platform.OS !== "ios" ? "dimezisBlurView" : "none"
+                }
+              >
+                <Text
+                  style={{
+                    fontSize: 13,
+                    color: Palette.white,
+                    fontFamily: FONT_FAMILY.InterSemiBold,
+                  }}
+                >
+                  {item.label}, {item.type}
+                </Text>
+                <Text
+                  style={{
+                    fontSize: 14,
+                    color: Palette.white,
+                    fontFamily: FONT_FAMILY.InterRegular,
+                  }}
+                >
+                  {item.desc}
+                </Text>
+              </BlurView>
+              <Image
+                source={item.bg}
+                style={{
+                  width: "100%",
+                  height: 152,
+                  borderRadius: 20,
+                  position: "absolute",
+                  bottom: 0,
+                }}
+              />
+              <Image
+                source={item.img}
+                style={{ width: 130, height: 200 }}
+                resizeMode="contain"
+              />
+            </Pressable>
+          ))}
+        </ScrollView>
+      </View>
+    </Page>
   );
 };
+
+export default Home;

src/screens/Library/AllMyLikedMusic.js

@@ -1,4 +1,4 @@
-import { View, Text, Pressable } from "react-native";
+import { View, Text, Pressable, Platform } from "react-native";
 import React, { useState } from "react";
 import Page from "../../layouts/Page";
 import { background } from "../../assets";
@@ -68,6 +68,9 @@ const AllMyLikedMusic = () => {
                     borderRadius: 12,
                     overflow: "hidden",
                   }}
+                  experimentalBlurMethod={
+                    Platform.OS !== "ios" ? "dimezisBlurView" : "none"
+                  }
                 >
                   <Text
                     style={{

src/screens/Library/AllMyPlaylist.js

@@ -1,4 +1,4 @@
-import { View, Text, Image, Pressable } from "react-native";
+import { View, Text, Image, Pressable, Platform } from "react-native";
 import React from "react";
 import Page from "../../layouts/Page";
 import { background, icons } from "../../assets";
@@ -33,6 +33,9 @@ const AllMyPlaylist = () => {
                   height: 59,
                   paddingHorizontal: 10,
                 }}
+                experimentalBlurMethod={
+                  Platform.OS !== "ios" ? "dimezisBlurView" : "none"
+                }
               >
                 <Text
                   style={{

src/screens/Library/components/MusicCard.js

@@ -1,4 +1,11 @@
-import { View, Text, Image, Pressable, StyleSheet } from "react-native";
+import {
+  View,
+  Text,
+  Image,
+  Pressable,
+  StyleSheet,
+  Platform,
+} from "react-native";
 import React, { useEffect, useState } from "react";
 import { Palette, Style } from "../../../styles";
 import { icons, img } from "../../../assets";
@@ -45,6 +52,9 @@ const MusicCard = ({ onPress, onPressMore }) => {
               ...Style.containerSpaceBetween,
               paddingHorizontal: 8,
             }}
+            experimentalBlurMethod={
+              Platform.OS !== "ios" ? "dimezisBlurView" : "none"
+            }
           >
             <View>
               <Text style={styles.title}>Alors on danse</Text>

src/screens/Library/components/MyPlaylist.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 CardContainer from "./CardContainer";
 import { BlurView } from "expo-blur";
@@ -25,6 +25,9 @@ const MyPlaylist = () => {
                 height: 59,
                 paddingHorizontal: 10,
               }}
+              experimentalBlurMethod={
+                Platform.OS !== "ios" ? "dimezisBlurView" : "none"
+              }
             >
               <Text
                 style={{

src/screens/Library/components/ResearchHeader.js

@@ -1,4 +1,4 @@
-import { View, Text, Pressable, StyleSheet } from "react-native";
+import { View, Text, Pressable, StyleSheet, Platform } from "react-native";
 import React from "react";
 import SearchBar from "../../../components/SearchBar";
 import { Palette, Style } from "../../../styles";
@@ -31,7 +31,13 @@ const ResearchHeader = ({ onPress, selected }) => {
               style={styles.borderGradient}
             />
             <View style={styles.blurContainer}>
-              <BlurView intensity={20} style={styles.blurView}>
+              <BlurView
+                intensity={20}
+                style={styles.blurView}
+                experimentalBlurMethod={
+                  Platform.OS !== "ios" ? "dimezisBlurView" : "none"
+                }
+              >
                 <Text style={styles.menu}>{item}</Text>
               </BlurView>
             </View>

src/screens/Login.js

@@ -1,345 +1,121 @@
-import React, { useState, useRef, useEffect, useGlobal } from "reactn";
+/* eslint-disable react/display-name */
-import {
+import React from "reactn";
-  Text,
+import { Pressable, Text, View } from "react-native";
-  View,
-  KeyboardAvoidingView,
-  Image,
-  Pressable,
-} from "react-native";
-import AsyncStorage from "@react-native-async-storage/async-storage";
 
-import {
+import Page from "../layouts/Page.js";
-  responsiveHeight,
+import { background } from "../assets/index.js";
-  responsiveWidth,
+import { Input } from "../components/Input.js";
-} from "../actions/responsiveSizes.js";
+import GradientButton from "../components/GradientButton.js";
-
+import Palette from "../styles/Palette.js";
-import firebase from "../config/firebase";
+import { FONT_FAMILY } from "../styles/Fonts.js";
-
-import Button from "../components/Button";
-import { Input } from "../components/Input";
-
-import { Fonts, gutters, Palette, Style } from "../styles";
-import { Routes } from "../navigation";
-import { art, mockups } from "../assets";
-import {
-  checkIfEmailIsValid,
-  checkIfPasswordIsStrongEnough,
-  handleFirebaseError,
-} from "../actions/signupActions";
-
-import useLayoutType from "../hooks/useLayoutType.js";
-import { capitalize } from "../helpers/index.js";
 import { navigate } from "../navigation/NavigationService.js";
+import { Routes } from "../navigation/Routes.js";
+import ItemContainer from "../components/ItemContainer/ItemContainer.js";
 
 export default ({ navigation }) => {
-  console.log("LOGINSCREEN");
-  const [, setTooltip] = useGlobal("_tooltip");
-  const [, setIsLoading] = useGlobal("_isLoading");
-
-  const [mode, setMode] = useState("LOGIN");
-
-  const [emailIsStatic, setEmailIsStatic] = useState(false);
-
-  const [email, setEmail] = useState("login@minuit.com");
-  const [password, setPassword] = useState("password");
-
-  const [firstName, setFirstName] = useState("");
-  const [lastName, setLastName] = useState("");
-
-  const passwordInputRef = useRef();
-
-  const { isDesktop } = useLayoutType();
-
-  useEffect(() => {
-    const checkIfUserIsLoggedIn = async () => {
-      const userEmail = await AsyncStorage.getItem("userEmail");
-
-      if (userEmail) {
-        setEmail(userEmail);
-        setEmailIsStatic(true);
-      }
-    };
-
-    checkIfUserIsLoggedIn();
-  }, []);
-
-  const onLogin = async () => {
-    try {
-      setIsLoading(true);
-
-      let trimmedEmail = email.trim();
-
-      await firebase.auth().signInWithEmailAndPassword(trimmedEmail, password);
-      await AsyncStorage.setItem("userEmail", trimmedEmail);
-
-      onAuthSuccess();
-    } catch (error) {
-      console.log(error);
-      setTooltip({
-        text: handleFirebaseError(error.code),
-        type: "error",
-      });
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const onSignup = async () => {
-    try {
-      setIsLoading(true);
-
-      if (!checkIfPasswordIsStrongEnough({ password })) {
-        throw new Error(
-          "Votre mot de passe doit contenir au moins 6 caractères, une majuscule et un chiffre."
-        );
-      }
-
-      if (!checkIfEmailIsValid({ email })) {
-        throw new Error("Veuillez renseigner une adresse email valide.");
-      }
-
-      const { user = null } = await firebase
-        .auth()
-        .createUserWithEmailAndPassword(email, password);
-
-      if (!user) {
-        throw new Error("Erreur lors de la création du compte");
-      }
-
-      let userObject = {
-        firstName: capitalize(firstName.trim()),
-        lastName: capitalize(lastName.trim()),
-      };
-
-      // push user data to firestore
-
-      onAuthSuccess();
-
-      setTooltip({
-        text: "Votre compte a été créé avec succès!",
-        type: "success",
-      });
-    } catch (error) {
-      console.log(error);
-      setTooltip({
-        text: error?.code?.startsWith("auth/")
-          ? handleFirebaseError(error.code)
-          : error.message,
-        type: "error",
-      });
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const onAuthSuccess = async () => {
-    navigation.reset({
-      index: 0,
-      routes: [{ name: Routes.Splash }],
-    });
-  };
-
   return (
-    <View
+    <Page
-      headerType="NONE"
+      backgroundImg={background.homeBG}
-      style={{
+      headerType="NAVIGATION"
-        flex: 1,
+      title="Connexion"
-        backgroundColor: Palette.lightPurple,
-        ...Style.containerRow,
-      }}
-    >
-      <View
-        style={{
-          position: "relative",
-          flex: 1,
-          padding: 2 * gutters,
-          backgroundColor: Palette.darkPurple,
-          height: "100%",
-          ...Style.containerCenter,
-        }}
-      >
-        <Image
-          resizeMode="contain"
-          source={art.gradientTriangle}
-          style={{
-            position: "absolute",
-            top: responsiveHeight(20),
-            right: responsiveHeight(5),
-            width: responsiveWidth(140),
-            height: responsiveWidth(140),
-          }}
-        />
-
-        <KeyboardAvoidingView
-          style={{ ...Style.containerCenter, width: "100%" }}
-          behavior="padding"
-          keyboardVerticalOffset={responsiveHeight(10)}
     >
+      <View style={{ flex: 1, paddingTop: 20 }}>
+        <ItemContainer height={490}>
+          <View style={{ gap: 30, paddingTop: 5, paddingHorizontal: 5 }}>
+            <View style={{ gap: 2 }}>
               <Text
                 style={{
-              ...Fonts({ type: "megaTitle" }),
+                  fontSize: 22,
-              marginBottom: responsiveHeight(10),
-            }}
-          >
-            minuit.starter
-          </Text>
-
-          {emailIsStatic && mode === "LOGIN" ? (
-            <>
-              <Text
-                style={{
-                  ...Fonts({
-                    type: "default",
                   color: Palette.white,
-                    style: { marginBottom: 20, textAlign: "center" },
+                  fontFamily: FONT_FAMILY.InterSemiBold,
-                  }),
                 }}
               >
-                {`Vous êtes connecté(e) avec l'adresse ${email},`}
+                Bonjour, pseudo!
               </Text>
-
-              <Pressable
-                onPress={async () => {
-                  await AsyncStorage.removeItem("userEmail");
-
-                  setEmailIsStatic(false);
-                }}
-              >
               <Text
                 style={{
-                    ...Fonts({
+                  fontSize: 14,
-                      type: "default",
+                  color: Palette.gray,
-                      color: Palette.primary,
+                  fontFamily: FONT_FAMILY.InterRegular,
-                      style: {
-                        marginBottom: 20,
-                        textAlign: "center",
-                        textDecorationLine: "underline",
-                      },
-                    }),
                 }}
               >
-                  Modifier
+                Nous sommes heureux de te revoir parmi nous. Prêt·e à reprendre
+                le rythme ?
               </Text>
-              </Pressable>
+            </View>
-            </>
+            <View style={{ gap: 20 }}>
-          ) : (
               <Input
-              layout="line"
+                placeholder="Adresse mail ou pseudo"
-              type="email"
+                label="Adresse mail ou pseudo"
-              label="Adresse email"
+                isBlur
-              placeholder="Votre adresse email"
-              value={email}
-              setValue={setEmail}
-              containerStyle={{ marginBottom: 20 }}
-              textInputProps={{
-                returnKeyType: "next",
-                onSubmitEditing: () => passwordInputRef.current.focus(),
-              }}
               />
-          )}
+              <View style={{ gap: 4 }}>
-
                 <Input
-            layout="line"
+                  placeholder="Mot de passe"
-            inputRef={passwordInputRef}
                   label="Mot de passe"
-            placeholder="Votre mot de passe"
-            value={password}
-            setValue={setPassword}
                   type="password"
-            containerStyle={{ marginBottom: gutters }}
+                  isBlur
-            textInputProps={{
-              returnKeyType: "done",
-              onSubmitEditing: onLogin,
-            }}
                 />
-
+                <Pressable>
-          {mode === "LOGIN" ? (
-            <Pressable
-              onPress={() => navigation.navigate("ForgotPassword")}
-              style={{ marginBottom: gutters }}
-            >
                   <Text
                     style={{
-                  ...Fonts({
+                      fontSize: 12,
-                    type: "default",
+                      color: Palette.white,
-                    style: { textDecorationLine: "underline" },
+                      fontFamily: FONT_FAMILY.HelveticaNeueRegular,
-                  }),
                     }}
                   >
                     Mot de passe oublié?
                   </Text>
                 </Pressable>
-          ) : (
+              </View>
-            <>
+            </View>
-              <Input
+            <GradientButton
-                layout="line"
+              title="Poursuivre la création"
-                label="Prénom"
+              containerStyle={{
-                placeholder="Votre prénom"
+                width: "80%",
-                value={firstName}
+                alignSelf: "center",
-                setValue={setFirstName}
+              }}
-                containerStyle={{ marginBottom: gutters }}
+              onPress={() => navigate(Routes.BottomTab)}
             />
-
+            <View
-              <Input
-                layout="line"
-                label="Nom"
-                placeholder="Votre nom"
-                value={lastName}
-                setValue={setLastName}
-                containerStyle={{ marginBottom: gutters }}
-              />
-            </>
-          )}
-
-          <Button
-            {...(mode === "LOGIN"
-              ? { text: "Connexion", onPress: () => navigate(Routes.BottomTab) }
-              : {
-                  text: "Inscription",
-                  onPress: onSignup,
-                })}
-            containerStyle={{ marginBottom: gutters }}
-          />
-
-          <Pressable onPress={() => navigation.navigate("TermsOfUse")}>
-            <Text
-              style={Fonts({
-                type: "default",
-                style: { textAlign: "center", opacity: 1 },
-              })}
-            >
-              En vous {mode === "LOGIN" ? "connectant" : "inscrivant"}, vous
-              acceptez sans réserve les{" "}
-              <Text
               style={{
-                  color: Palette.primary,
+                alignItems: "center",
-                  textDecorationLine: "underline",
+                gap: 4,
               }}
             >
-                conditions générales d'utilisation
+              <Text
-              </Text>{" "}
+                style={{
-              de minuit.starter.
+                  fontSize: 12,
+                  color: Palette.gray,
+                  fontFamily: FONT_FAMILY.HelveticaNeueRegular,
+                  textAlign: "center",
+                }}
+              >
+                En t’inscrivant, tu acceptes nos conditions générales{"\n"}
+                d’utilisation et notre politique de confidentialité.
+              </Text>
+              <Pressable onPress={() => navigate(Routes.Register)}>
+                <Text
+                  style={{
+                    fontSize: 14,
+                    color: Palette.white,
+                    fontFamily: FONT_FAMILY.HelveticaNeueRegular,
+                  }}
+                >
+                  Tu as déjà un compte?{" "}
+                  <Text
+                    style={{
+                      fontFamily: FONT_FAMILY.InterSemiBold,
+                    }}
+                  >
+                    Se connecter
+                  </Text>
                 </Text>
               </Pressable>
-        </KeyboardAvoidingView>
             </View>
-
-      {isDesktop && (
-        <View style={{ flex: 2, height: "100%", overflow: "hidden" }}>
-          <Image
-            resizeMode="contain"
-            source={mockups.loginAppDashboard}
-            style={{
-              position: "absolute",
-              top: 0,
-              right: 0,
-              bottom: 0,
-              width: "100%",
-              height: "100%",
-            }}
-          />
           </View>
-      )}
+        </ItemContainer>
       </View>
+    </Page>
   );
 };

src/screens/Playback/CreatingDecor.js

@@ -1,4 +1,4 @@
-import { View, Text, Image } from "react-native";
+import { View, Text, Image, Platform } from "react-native";
 import React, { useEffect, useState } from "react";
 import Page from "../../layouts/Page";
 import { ai, background } from "../../assets";
@@ -73,6 +73,9 @@ const CreatingDecor = () => {
               intensity={40}
               tint="dark"
               style={{ flex: 1, padding: 10, paddingBottom: 20 }}
+              experimentalBlurMethod={
+                Platform.OS !== "ios" ? "dimezisBlurView" : "none"
+              }
             >
               <View style={{ flex: 1, justifyContent: "flex-end", gap: 20 }}>
                 <View>

src/screens/Playbacks.js

@@ -1,4 +1,4 @@
-import { View, Text, Image, Pressable } from "react-native";
+import { View, Text, Image, Pressable, Platform } from "react-native";
 import React from "react";
 import { responsiveHeight } from "react-native-responsive-dimensions";
 import { icons, img } from "../assets";
@@ -64,6 +64,9 @@ const Playbacks = () => {
                         borderColor: Palette.white,
                         overflow: "hidden",
                       }}
+                      experimentalBlurMethod={
+                        Platform.OS !== "ios" ? "dimezisBlurView" : "none"
+                      }
                     >
                       <Text
                         style={{
@@ -99,6 +102,9 @@ const Playbacks = () => {
                     backgroundColor: Palette.glass,
                     overflow: "hidden",
                   }}
+                  experimentalBlurMethod={
+                    Platform.OS !== "ios" ? "dimezisBlurView" : "none"
+                  }
                 >
                   <Text
                     style={{

src/screens/Production/DownloadSongs.js

@@ -1,4 +1,11 @@
-import { View, Text, StyleSheet, Image, Pressable } from "react-native";
+import {
+  View,
+  Text,
+  StyleSheet,
+  Image,
+  Pressable,
+  Platform,
+} from "react-native";
 import React from "react";
 import Page from "../../layouts/Page";
 import { background, img } from "../../assets";
@@ -43,7 +50,10 @@ const DownloadSongs = () => {
             }}
           />
           <View style={{ gap: 12, paddingVertical: 12 }}>
-            <Text style={styles.title}>Prêt à télécharger {action === "playback" ? "ton  Playback" : "ta chanson"} ?</Text>
+            <Text style={styles.title}>
+              Prêt à télécharger{" "}
+              {action === "playback" ? "ton  Playback" : "ta chanson"} ?
+            </Text>
             <View style={{ gap: 10 }}>
               <Pressable
                 style={styles.itemContainer}
@@ -53,8 +63,18 @@ const DownloadSongs = () => {
                   })
                 }
               >
-                <BlurView style={styles.blurView} intensity={40} tint="dark">
+                <BlurView
-                  <Text style={styles.label}>Télécharger {action === "playback" ? "mon Playback" : "ma chanson"}</Text>
+                  style={styles.blurView}
+                  intensity={40}
+                  tint="dark"
+                  experimentalBlurMethod={
+                    Platform.OS !== "ios" ? "dimezisBlurView" : "none"
+                  }
+                >
+                  <Text style={styles.label}>
+                    Télécharger{" "}
+                    {action === "playback" ? "mon Playback" : "ma chanson"}
+                  </Text>
                   <Text style={styles.description}>Pour moi uniquement</Text>
                 </BlurView>
               </Pressable>
@@ -66,14 +86,24 @@ const DownloadSongs = () => {
                   })
                 }
               >
-                <BlurView style={styles.blurView} intensity={40} tint="dark">
+                <BlurView
+                  style={styles.blurView}
+                  intensity={40}
+                  tint="dark"
+                  experimentalBlurMethod={
+                    Platform.OS !== "ios" ? "dimezisBlurView" : "none"
+                  }
+                >
                   <Text style={styles.label}>
-                    Diffuser {action === "playback" ? "mon Playback" : "ma chanson"} sur la plateforme de MusicLand (+
+                    Diffuser{" "}
-                    réseaux sociaux) et participer au concours
+                    {action === "playback" ? "mon Playback" : "ma chanson"} sur
+                    la plateforme de MusicLand (+ réseaux sociaux) et participer
+                    au concours
                   </Text>
                   <Text style={styles.description}>
                     Top 3: 1er 15% du CA ML - 2ème 10% du CA ML - 3ème 5% du CA
-                    ML (catégorie {action === "playback" ? "Playback" : "chanson"})
+                    ML (catégorie{" "}
+                    {action === "playback" ? "Playback" : "chanson"})
                   </Text>
                 </BlurView>
               </Pressable>

src/screens/Profile/ChangeEmailAddress.js

@@ -1,4 +1,4 @@
-import { View } from "react-native";
+import { Platform, View } from "react-native";
 import React from "react";
 import Page from "../../layouts/Page";
 import { background } from "../../assets";
@@ -31,6 +31,9 @@ const ChangeEmailAddress = () => {
             overflow: "hidden",
             backgroundColor: Palette.glass,
           }}
+          experimentalBlurMethod={
+            Platform.OS !== "ios" ? "dimezisBlurView" : "none"
+          }
         >
           <EditInput placeholder="Adresse mail" label="Adresse mail" />
         </BlurView>

src/screens/Profile/ChangePassword.js

@@ -1,4 +1,4 @@
-import { View, Text, Pressable } from "react-native";
+import { View, Text, Pressable, Platform } from "react-native";
 import React from "react";
 import Page from "../../layouts/Page";
 import { background } from "../../assets";
@@ -33,6 +33,9 @@ const ChangePassword = () => {
             backgroundColor: Palette.glass,
             gap: 4,
           }}
+          experimentalBlurMethod={
+            Platform.OS !== "ios" ? "dimezisBlurView" : "none"
+          }
         >
           <EditInput
             placeholder="Mot de passe"

src/screens/Profile/EditProfile.js

@@ -1,4 +1,4 @@
-import { View, Text, Image, TextInput } from "react-native";
+import { View, Text, Image, TextInput, Platform } from "react-native";
 import React from "react";
 import Page from "../../layouts/Page";
 import { background, img } from "../../assets";
@@ -34,6 +34,9 @@ const EditProfile = () => {
             overflow: "hidden",
             gap: 24,
           }}
+          experimentalBlurMethod={
+            Platform.OS !== "ios" ? "dimezisBlurView" : "none"
+          }
         >
           <View style={{ alignItems: "center" }}>
             <Image

src/screens/Profile/Language.js

@@ -1,4 +1,4 @@
-import { View, Text, Pressable } from "react-native";
+import { View, Text, Pressable, Platform } from "react-native";
 import React, { useState } from "react";
 import Page from "../../layouts/Page";
 import { background } from "../../assets";
@@ -37,6 +37,9 @@ const Language = () => {
             borderRadius: 20,
             overflow: "hidden",
           }}
+          experimentalBlurMethod={
+            Platform.OS !== "ios" ? "dimezisBlurView" : "none"
+          }
         >
           <Text
             style={{

src/screens/Profile/Notifications.js

@@ -1,8 +1,9 @@
+/* eslint-disable react/display-name */
 import React from "reactn";
 import Page from "../../layouts/Page";
 import { gutters, Palette, Style } from "../../styles";
 import { background } from "../../assets";
-import { Text, View } from "react-native";
+import { Platform, Text, View } from "react-native";
 import { responsiveHeight } from "react-native-responsive-dimensions";
 import { BlurView } from "expo-blur";
 import Switch from "../../components/Switch";
@@ -35,6 +36,9 @@ export default (props) => {
             overflow: "hidden",
             backgroundColor: Palette.glass,
           }}
+          experimentalBlurMethod={
+            Platform.OS !== "ios" ? "dimezisBlurView" : "none"
+          }
         >
           <View style={Style.containerSpaceBetween}>
             <Text

src/screens/Profile/Profile.js

@@ -5,6 +5,7 @@ import {
   Image,
   FlatList,
   StyleSheet,
+  Platform,
 } from "react-native";
 import React, { useState } from "react";
 import Page from "../../layouts/Page";
@@ -54,6 +55,9 @@ const Profile = () => {
               backgroundColor: Palette.glass,
               paddingHorizontal: 20,
             }}
+            experimentalBlurMethod={
+              Platform.OS !== "ios" ? "dimezisBlurView" : "none"
+            }
           >
             <View style={{ alignItems: "center" }}>
               <Image
@@ -122,7 +126,13 @@ const Profile = () => {
                 style={styles.borderGradient}
               />
               <View style={styles.blurContainer}>
-                <BlurView intensity={20} style={styles.blurView}>
+                <BlurView
+                  intensity={20}
+                  style={styles.blurView}
+                  experimentalBlurMethod={
+                    Platform.OS !== "ios" ? "dimezisBlurView" : "none"
+                  }
+                >
                   <Text style={styles.menu}>{item}</Text>
                 </BlurView>
               </View>

src/screens/Profile/Settings.js

@@ -65,7 +65,10 @@ const Settings = () => {
           ))}
         </View>
         <View style={{ width: "80%", gap: 5, alignSelf: "center" }}>
-          <BorderGradientButton title="Déconnexion" />
+          <BorderGradientButton
+            title="Déconnexion"
+            onPress={() => navigate(Routes.Login)}
+          />
           <BorderGradientButton
             title="Supprimer mon profil"
             titleStyle={{

src/screens/Profile/SingerProfile.js

@@ -5,6 +5,7 @@ import {
   Image,
   StyleSheet,
   FlatList,
+  Platform,
 } from "react-native";
 import React, { useState } from "react";
 import Page from "../../layouts/Page";
@@ -54,6 +55,9 @@ const SingerProfile = () => {
               backgroundColor: Palette.glass,
               paddingHorizontal: 20,
             }}
+            experimentalBlurMethod={
+              Platform.OS !== "ios" ? "dimezisBlurView" : "none"
+            }
           >
             <View style={{ alignItems: "center" }}>
               <Image
@@ -122,7 +126,13 @@ const SingerProfile = () => {
                 style={styles.borderGradient}
               />
               <View style={styles.blurContainer}>
-                <BlurView intensity={20} style={styles.blurView}>
+                <BlurView
+                  intensity={20}
+                  style={styles.blurView}
+                  experimentalBlurMethod={
+                    Platform.OS !== "ios" ? "dimezisBlurView" : "none"
+                  }
+                >
                   <Text style={styles.menu}>{item}</Text>
                 </BlurView>
               </View>

src/screens/Profile/components/EditInput.js

@@ -1,4 +1,11 @@
-import { View, Text, TextInput, Image, Pressable } from "react-native";
+import {
+  View,
+  Text,
+  TextInput,
+  Image,
+  Pressable,
+  Platform,
+} from "react-native";
 import React, { useState } from "react";
 import { Palette, Style } from "../../../styles";
 import { FONT_FAMILY } from "../../../styles/Fonts";
@@ -44,6 +51,9 @@ const EditInput = ({ label = "", placeholder = "", type = "default" }) => {
           height: 52,
           ...Style.containerRow,
         }}
+        experimentalBlurMethod={
+          Platform.OS !== "ios" ? "dimezisBlurView" : "none"
+        }
       >
         <TextInput
           placeholder={placeholder}

src/screens/Register.js

@@ -0,0 +1,84 @@
+import { View, Text, Pressable } from "react-native";
+import React from "react";
+import Page from "../layouts/Page";
+import { background } from "../assets";
+import { Palette } from "../styles";
+import { FONT_FAMILY } from "../styles/Fonts";
+import { Input } from "../components/Input";
+import BorderGradientButton from "../components/BorderGradientButton";
+import { navigate } from "../navigation/NavigationService";
+import { Routes } from "../navigation";
+import ItemContainer from "../components/ItemContainer/ItemContainer";
+
+const Register = () => {
+  return (
+    <Page
+      backgroundImg={background.homeBG}
+      headerType="NAVIGATION"
+      title="Inscription"
+    >
+      <View style={{ flex: 1, paddingTop: 20 }}>
+        <ItemContainer height={360}>
+          <View style={{ gap: 32, paddingTop: 5, paddingHorizontal: 5 }}>
+            <Text
+              style={{
+                fontSize: 22,
+                color: Palette.white,
+                fontFamily: FONT_FAMILY.InterSemiBold,
+              }}
+            >
+              Saisis ton adresse mail pour commencer
+            </Text>
+            <Input placeholder="Adresse mail" label="Adresse mail" isBlur />
+            <BorderGradientButton
+              title="Créer mon compte"
+              containerStyle={{
+                width: "80%",
+                alignSelf: "center",
+              }}
+              onPress={() => navigate(Routes.CreatePassword)}
+            />
+            <View
+              style={{
+                alignItems: "center",
+                gap: 4,
+              }}
+            >
+              <Text
+                style={{
+                  fontSize: 12,
+                  color: Palette.gray,
+                  fontFamily: FONT_FAMILY.HelveticaNeueRegular,
+                  textAlign: "center",
+                }}
+              >
+                En t’inscrivant, tu acceptes nos conditions générales{"\n"}
+                d’utilisation et notre politique de confidentialité.
+              </Text>
+              <Pressable onPress={() => navigate(Routes.Login)}>
+                <Text
+                  style={{
+                    fontSize: 14,
+                    color: Palette.white,
+                    fontFamily: FONT_FAMILY.HelveticaNeueRegular,
+                  }}
+                >
+                  Tu as déjà un compte?{" "}
+                  <Text
+                    style={{
+                      fontFamily: FONT_FAMILY.InterSemiBold,
+                    }}
+                  >
+                    Se connecter
+                  </Text>
+                </Text>
+              </Pressable>
+            </View>
+          </View>
+        </ItemContainer>
+      </View>
+    </Page>
+  );
+};
+
+export default Register;

src/screens/Studio/CreatingSong.js

@@ -1,4 +1,4 @@
-import { View, Text, Image, Pressable } from "react-native";
+import { View, Text, Image, Pressable, Platform } from "react-native";
 import React, { useEffect, useState } from "react";
 import { ai, icons } from "../../assets";
 import { BlurView } from "expo-blur";
@@ -69,7 +69,7 @@ const CreatingSong = ({ active, config }) => {
       const elapsed = moment().diff(moment(startDate));
       const pct = Math.max(
         0,
-        Math.min(100, Math.floor((elapsed / totalMs) * 100)),
+        Math.min(100, Math.floor((elapsed / totalMs) * 100))
       );
       setProgress(pct);
       if (pct >= 100) {
@@ -119,10 +119,11 @@ const CreatingSong = ({ active, config }) => {
             {
               sunoTaskId: taskId,
               musicStatus: "GENERATING",
-              generationStartAt: firebase.firestore.FieldValue.serverTimestamp(),
+              generationStartAt:
+                firebase.firestore.FieldValue.serverTimestamp(),
               updatedAt: firebase.firestore.FieldValue.serverTimestamp(),
             },
-            { merge: true },
+            { merge: true }
           );
         }
       } catch (e) {
@@ -179,6 +180,9 @@ const CreatingSong = ({ active, config }) => {
             intensity={40}
             tint="dark"
             style={{ flex: 1, padding: 10, paddingBottom: 20 }}
+            experimentalBlurMethod={
+              Platform.OS !== "ios" ? "dimezisBlurView" : "none"
+            }
           >
             <Pressable
               style={{

src/screens/Studio/SongReady.js

@@ -4,7 +4,7 @@ import { background, icons } from "../../assets";
 import MusicLandHeader from "../../components/MusicLandHeader";
 import { goBack, navigate } from "../../navigation/NavigationService";
 import Slider from "../../components/Slider";
-import { Image, Pressable, View } from "react-native";
+import { Image, Platform, Pressable, View } from "react-native";
 import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
 import { BlurView } from "expo-blur";
 import { Style } from "../../styles";
@@ -39,6 +39,9 @@ const SongReady = () => {
             intensity={40}
             tint="dark"
             style={{ ...Style.containerCenter, flex: 1 }}
+            experimentalBlurMethod={
+              Platform.OS !== "ios" ? "dimezisBlurView" : "none"
+            }
           >
             <Image source={icons.disk} />
           </BlurView>

src/screens/Writing/CreatingLyrics.js

@@ -1,4 +1,4 @@
-import { View, Text, Pressable, Image } from "react-native";
+import { View, Text, Pressable, Image, Platform } from "react-native";
 import React, { useEffect, useState } from "react";
 import { Palette, Style } from "../../styles";
 import { BlurView } from "expo-blur";
@@ -117,6 +117,9 @@ const CreatingLyrics = ({ active, config, regenerateKey, selections }) => {
             intensity={40}
             tint="dark"
             style={{ flex: 1, padding: 10, paddingBottom: 20 }}
+            experimentalBlurMethod={
+              Platform.OS !== "ios" ? "dimezisBlurView" : "none"
+            }
           >
             <Pressable
               style={{
@@ -161,7 +164,11 @@ const CreatingLyrics = ({ active, config, regenerateKey, selections }) => {
                   alignSelf: "center",
                 }}
                 onPress={() =>
-                  navigate(Routes.Lyrics, { lyricsData: result, config, selections })
+                  navigate(Routes.Lyrics, {
+                    lyricsData: result,
+                    config,
+                    selections,
+                  })
                 }
               />
             </View>

src/screens/Writing/components/CreateLyricsHeader.js

@@ -1,4 +1,4 @@
-import { View, Text, Pressable } from "react-native";
+import { View, Text, Pressable, Platform } from "react-native";
 import React, { useState } from "react";
 import { BlurView } from "expo-blur";
 import BorderGradient from "../../../components/BorderGradient/BorderGradient";
@@ -65,6 +65,9 @@ const CreateLyricsHeader = ({
             gap: 4,
             ...blurViewStyle,
           }}
+          experimentalBlurMethod={
+            Platform.OS !== "ios" ? "dimezisBlurView" : "none"
+          }
         >
           {title && (
             <Text