diff --git a/App.js b/App.js
index 80fad04..8eca2ee 100644
--- a/App.js
+++ b/App.js
@@ -27,6 +27,7 @@ import Providers from "./src/providers";
import AppLayout from "./src/layouts/AppLayout";
import {
Inter_400Regular,
+ Inter_400Regular_Italic,
Inter_500Medium,
Inter_600SemiBold,
Inter_700Bold,
@@ -56,6 +57,7 @@ const App = () => {
InterMedium: Inter_500Medium,
InterSemiBold: Inter_600SemiBold,
InterBold: Inter_700Bold,
+ InterRegularItalic: Inter_400Regular_Italic,
});
useEffect(() => {
diff --git a/package.json b/package.json
index 4a5eb0e..425dd09 100644
--- a/package.json
+++ b/package.json
@@ -81,6 +81,7 @@
"react-native-store-review": "^0.3.0",
"react-native-super-grid": "^5.0.0",
"react-native-svg": "15.8.0",
+ "react-native-swiper-flatlist": "^3.2.5",
"react-native-web": "~0.19.6",
"react-native-web-linear-gradient": "^1.1.2",
"react-native-webview": "13.12.5",
diff --git a/src/components/BorderGradient/BorderGradient.js b/src/components/BorderGradient/BorderGradient.js
index 44197ec..a7c5d23 100644
--- a/src/components/BorderGradient/BorderGradient.js
+++ b/src/components/BorderGradient/BorderGradient.js
@@ -2,19 +2,31 @@ import { StyleSheet, View } from "react-native";
import { GradientBorderView } from "../GradientBorderView";
-const BorderGradient = ({ children, gradientProps, ...props }) => {
+const BorderGradient = ({
+ children,
+ contentContainerStyle,
+ gradientProps,
+ ...props
+}) => {
return (
-
- {children}
- );
-
+ {...props}
+ >
+
+ {children}
+
+
+ );
};
export default BorderGradient;
@@ -22,5 +34,5 @@ export default BorderGradient;
const styles = StyleSheet.create({
innerContainer: {
flex: 1,
- }
-});
\ No newline at end of file
+ },
+});
diff --git a/src/components/MusicLandHeader.js b/src/components/MusicLandHeader.js
index 38ab935..aad6577 100644
--- a/src/components/MusicLandHeader.js
+++ b/src/components/MusicLandHeader.js
@@ -5,7 +5,12 @@ import { Palette, Style } from "../styles";
import ProgressBar from "./ProgressBar";
import { FONT_FAMILY } from "../styles/Fonts";
-const MusicLandHeader = ({ onPressBack, onPressSkip, showSkip = false }) => {
+const MusicLandHeader = ({
+ onPressBack,
+ onPressSkip,
+ showSkip = false,
+ progress = 1,
+}) => {
return (
@@ -21,7 +26,7 @@ const MusicLandHeader = ({ onPressBack, onPressSkip, showSkip = false }) => {
/>
-
+
{showSkip && (
diff --git a/src/data/data.js b/src/data/data.js
new file mode 100644
index 0000000..05d03a0
--- /dev/null
+++ b/src/data/data.js
@@ -0,0 +1,9 @@
+export const GOALS = [
+ "Envoyer un message universel",
+ "Souhaiter un joyeux anniversaire à un ami",
+ "Déclaration d'amour",
+ "Pour mon club sportif",
+ "Pour un mariage",
+ "Pour mon entreprise",
+ "Envoyer un message politique",
+];
diff --git a/src/navigation/MainStack.js b/src/navigation/MainStack.js
index af1b8f1..c9ddd0a 100644
--- a/src/navigation/MainStack.js
+++ b/src/navigation/MainStack.js
@@ -17,6 +17,7 @@ import TermsOfUse from "../screens/TermsOfUse";
import PrivacyPolicy from "../screens/PrivacyPolicy";
import Writing from "../screens/Writing/Writing";
import WritingLyrics from "../screens/Writing/WritingLyrics";
+import CreateLyricsWithAi from "../screens/Writing/CreateLyricsWithAi";
const screenOptions = {
headerShown: false,
@@ -68,6 +69,11 @@ const screens = [
name: Routes.WritingLyrics,
component: WritingLyrics,
},
+
+ {
+ name: Routes.CreateLyricsWithAi,
+ component: CreateLyricsWithAi,
+ },
];
export default function Main() {
diff --git a/src/navigation/Routes.js b/src/navigation/Routes.js
index 7a0443e..f4fb077 100644
--- a/src/navigation/Routes.js
+++ b/src/navigation/Routes.js
@@ -25,4 +25,5 @@ export const Routes = {
Writing: "Writing",
WritingLyrics: "WritingLyrics",
+ CreateLyricsWithAi: "CreateLyricsWithAi",
};
diff --git a/src/screens/Splash.js b/src/screens/Splash.js
index 9951ecf..a4f802c 100644
--- a/src/screens/Splash.js
+++ b/src/screens/Splash.js
@@ -51,7 +51,7 @@ export default ({ navigation }) => {
index: 0,
routes: [
{
- name: isDesktop || isWeb ? Routes.Login : Routes.Onboarding,
+ name: Routes.Onboarding,
},
],
});
diff --git a/src/screens/Writing/CreateLyricsWithAi.js b/src/screens/Writing/CreateLyricsWithAi.js
new file mode 100644
index 0000000..3e91709
--- /dev/null
+++ b/src/screens/Writing/CreateLyricsWithAi.js
@@ -0,0 +1,88 @@
+import { View, Text, ScrollView, Dimensions } from "react-native";
+import React, { useRef, useState } from "react";
+import Page from "../../layouts/Page";
+import MusicLandHeader from "../../components/MusicLandHeader";
+import CreateLyricsHeader from "./components/CreateLyricsHeader";
+import GradientButton from "../../components/GradientButton";
+import { gutters } from "../../styles";
+import { SwiperFlatList } from "react-native-swiper-flatlist";
+import Goals from "./Goals";
+import { goBack } from "../../navigation/NavigationService";
+import SpecificityContext from "./SpecificityContext";
+import EmotionConvey from "./EmotionConvey";
+
+const { width } = Dimensions.get("window");
+
+const CreateLyricsWithAi = () => {
+ const scrollRef = useRef(null);
+ const [selectedIndex, setSelectedIndex] = useState(0);
+ const [progress, setProgress] = useState(8);
+
+ const onPressNext = () => {
+ setSelectedIndex(selectedIndex + 1);
+ setProgress(progress + 8);
+ scrollRef.current.scrollToIndex({
+ index: selectedIndex + 1,
+ animated: true,
+ });
+ };
+
+ const onPressBack = () => {
+ if (selectedIndex > 0) {
+ setSelectedIndex(selectedIndex - 1);
+ setProgress(progress - 8);
+ scrollRef.current.scrollToIndex({
+ index: selectedIndex - 1,
+ animated: true,
+ });
+ } else {
+ goBack();
+ }
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default CreateLyricsWithAi;
diff --git a/src/screens/Writing/EmotionConvey.js b/src/screens/Writing/EmotionConvey.js
new file mode 100644
index 0000000..02a9ca4
--- /dev/null
+++ b/src/screens/Writing/EmotionConvey.js
@@ -0,0 +1,104 @@
+import { View, Text, StyleSheet, FlatList } from "react-native";
+import React, { useState } from "react";
+import CreateLyricsHeader from "./components/CreateLyricsHeader";
+import BorderGradient from "../../components/BorderGradient/BorderGradient";
+import { responsiveHeight } from "react-native-responsive-dimensions";
+import { BlurView } from "expo-blur";
+import { Palette } from "../../styles";
+import { FONT_FAMILY } from "../../styles/Fonts";
+
+const EmotionConvey = () => {
+ const [itemLayout, setItemLayout] = useState([]);
+
+ console.log("itemLayout: ", itemLayout);
+
+ return (
+
+
+
+
+
+ (
+
+
+ {
+ e.persist();
+ setItemLayout((prev) => [...prev, e.nativeEvent.layout]);
+ }}
+ >
+
+
+
+ La Joie
+ {" "}
+ : expose un bonheur profond, l'émerveillement, la
+ gratitude, satisfaction intense, énergie positive.
+
+
+
+
+ )}
+ />
+
+
+
+
+ );
+};
+
+export default EmotionConvey;
+
+const styles = StyleSheet.create({
+ borderGradientStyle: {
+ borderWidth: 1,
+ borderRadius: 20,
+ height: responsiveHeight(55),
+ shadowColor: "#000",
+ shadowOffset: {
+ width: 0,
+ height: 2,
+ },
+ shadowOpacity: 0.25,
+ shadowRadius: 3.84,
+ elevation: 100,
+ },
+ blurContainer: {
+ flex: 1,
+ borderRadius: 20,
+ overflow: "hidden",
+ zIndex: 1,
+ },
+});
diff --git a/src/screens/Writing/Goals.js b/src/screens/Writing/Goals.js
new file mode 100644
index 0000000..42085e8
--- /dev/null
+++ b/src/screens/Writing/Goals.js
@@ -0,0 +1,105 @@
+import { View, Text, FlatList, StyleSheet, Pressable } from "react-native";
+import React from "react";
+import CreateLyricsHeader from "./components/CreateLyricsHeader";
+import BorderGradient from "../../components/BorderGradient/BorderGradient";
+import { Palette, Style } from "../../styles";
+import { BlurView } from "expo-blur";
+import { GOALS } from "../../data/data";
+import { FONT_FAMILY } from "../../styles/Fonts";
+import CustomInput from "./components/CustomInput";
+import { responsiveHeight } from "react-native-responsive-dimensions";
+
+const Goals = () => {
+ return (
+
+
+
+
+
+
+ (
+
+
+ {item}
+
+
+ )}
+ />
+
+
+
+
+
+
+ );
+};
+
+export default Goals;
+
+const styles = StyleSheet.create({
+ borderGradientStyle: {
+ borderWidth: 1,
+ borderRadius: 20,
+ height: responsiveHeight(40),
+ shadowColor: "#000",
+ shadowOffset: {
+ width: 0,
+ height: 2,
+ },
+ shadowOpacity: 0.25,
+ shadowRadius: 3.84,
+ elevation: 100,
+ },
+ blurContainer: {
+ flex: 1,
+ borderRadius: 20,
+ overflow: "hidden",
+ zIndex: 1,
+ },
+ contentContainer: {
+ flexGrow: 1,
+ padding: 8,
+ gap: 10,
+ backgroundColor: "#FFFFFF00",
+ paddingBottom: 100,
+ },
+ itemContainer: {
+ height: 54,
+ backgroundColor: Palette.glass,
+ borderRadius: 14,
+ overflow: "hidden",
+ shadowColor: "#00000040",
+ shadowOffset: {
+ width: 0,
+ height: 2,
+ },
+ shadowOpacity: 0.25,
+ shadowRadius: 3.84,
+
+ elevation: 5,
+ },
+ itemText: {
+ fontSize: 16,
+ color: Palette.white,
+ fontFamily: FONT_FAMILY.InterRegular,
+ },
+});
diff --git a/src/screens/Writing/SpecificityContext.js b/src/screens/Writing/SpecificityContext.js
new file mode 100644
index 0000000..9c7a77c
--- /dev/null
+++ b/src/screens/Writing/SpecificityContext.js
@@ -0,0 +1,19 @@
+import { View, Text } from "react-native";
+import React from "react";
+import CreateLyricsHeader from "./components/CreateLyricsHeader";
+import CustomInput from "./components/CustomInput";
+import { gutters } from "../../styles";
+
+const SpecificityContext = () => {
+ return (
+
+
+
+
+ );
+};
+
+export default SpecificityContext;
diff --git a/src/screens/Writing/WritingLyrics.js b/src/screens/Writing/WritingLyrics.js
index 702521c..739f104 100644
--- a/src/screens/Writing/WritingLyrics.js
+++ b/src/screens/Writing/WritingLyrics.js
@@ -6,7 +6,8 @@ import GradientButton from "../../components/GradientButton";
import { gutters } from "../../styles";
import BorderGradientButton from "../../components/BorderGradientButton";
import MusicLandHeader from "../../components/MusicLandHeader";
-import { goBack } from "../../navigation/NavigationService";
+import { goBack, navigate } from "../../navigation/NavigationService";
+import { Routes } from "../../navigation";
const WritingLyrics = () => {
return (
@@ -24,7 +25,10 @@ const WritingLyrics = () => {
}}
>
-
+ navigate(Routes.CreateLyricsWithAi)}
+ />
diff --git a/src/screens/Writing/components/CreateLyricsHeader.js b/src/screens/Writing/components/CreateLyricsHeader.js
new file mode 100644
index 0000000..a8dbd9d
--- /dev/null
+++ b/src/screens/Writing/components/CreateLyricsHeader.js
@@ -0,0 +1,69 @@
+import { View, Text } from "react-native";
+import React, { useState } from "react";
+import { BlurView } from "expo-blur";
+import BorderGradient from "../../../components/BorderGradient/BorderGradient";
+import { Palette } from "../../../styles";
+import { FONT_FAMILY } from "../../../styles/Fonts";
+
+const CreateLyricsHeader = ({ title = "", subTitle = "", height = 45 }) => {
+ const [onLayout, setOnLayout] = useState(null);
+
+ return (
+ <>
+
+ {
+ setOnLayout(event.nativeEvent.layout);
+ }}
+ >
+
+
+ {title}
+
+ {subTitle && (
+
+ {subTitle}
+
+ )}
+
+
+
+ );
+};
+
+export default CreateLyricsHeader;
diff --git a/src/screens/Writing/components/CustomInput.js b/src/screens/Writing/components/CustomInput.js
new file mode 100644
index 0000000..65f21f4
--- /dev/null
+++ b/src/screens/Writing/components/CustomInput.js
@@ -0,0 +1,52 @@
+import { View, Text, TextInput } from "react-native";
+import React from "react";
+import { Palette } from "../../../styles";
+import { FONT_FAMILY } from "../../../styles/Fonts";
+
+const CustomInput = ({
+ label = "",
+ placeholder = "",
+ value,
+ setValue,
+ height = 65,
+}) => {
+ return (
+
+ {label && (
+
+ {label}
+
+ )}
+
+
+
+
+ );
+};
+
+export default CustomInput;
diff --git a/src/styles/Fonts.js b/src/styles/Fonts.js
index 37506d5..104cedb 100644
--- a/src/styles/Fonts.js
+++ b/src/styles/Fonts.js
@@ -35,6 +35,7 @@ export const FONT_FAMILY = {
InterMedium: "InterMedium",
InterSemiBold: "InterSemiBold",
InterBold: "InterBold",
+ InterRegularItalic: "InterRegularItalic",
};
const Fonts = ({
diff --git a/src/styles/Palette.js b/src/styles/Palette.js
index 85b80d0..107552a 100644
--- a/src/styles/Palette.js
+++ b/src/styles/Palette.js
@@ -32,6 +32,9 @@ const Palette = {
ultraLightBlack: "rgba(0, 0, 0, 0.6)",
tran: "transparent",
+
+ glass: "#73737324",
+ grayMid: "#8C8C8C",
};
export default Palette;
diff --git a/yarn.lock b/yarn.lock
index 20f6d05..8fa8359 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7453,6 +7453,11 @@ react-native-swipe-gestures@^1.0.5:
resolved "https://registry.yarnpkg.com/react-native-swipe-gestures/-/react-native-swipe-gestures-1.0.5.tgz#a172cb0f3e7478ccd681fd36b8bfbcdd098bde7c"
integrity sha512-Ns7Bn9H/Tyw278+5SQx9oAblDZ7JixyzeOczcBK8dipQk2pD7Djkcfnf1nB/8RErAmMLL9iXgW0QHqiII8AhKw==
+react-native-swiper-flatlist@^3.2.5:
+ version "3.2.5"
+ resolved "https://registry.yarnpkg.com/react-native-swiper-flatlist/-/react-native-swiper-flatlist-3.2.5.tgz#d69030e2986b8a322ff274ad2896ca809c1ebe0e"
+ integrity sha512-pP6Yioo//PgxBf1Ac/utPaAMaCTXF0QW/Q55hQofGtE7B5/hL0nb9u4cXEdgGJslx0oBCkir4AJAbbD5FpWnaA==
+
react-native-web-linear-gradient@^1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/react-native-web-linear-gradient/-/react-native-web-linear-gradient-1.1.2.tgz#33f85f7085a0bb5ffa5106faf02ed105b92a9ed7"