leonm/musicland
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Philip Cesar Garay
2025-08-05 21:04:28 +08:00
parent e22b87bd49
commit d08ec7b778
24 changed files with 994 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/screens/Writing/CreateLyricsWithAi.js
+73 -5
View File
@@ -10,17 +10,25 @@ import Goals from "./Goals";
import { goBack } from "../../navigation/NavigationService";
import SpecificityContext from "./SpecificityContext";
import EmotionConvey from "./EmotionConvey";
import SongStyle from "./SongStyle";
import SongTo from "./SongTo";
import SongStructure from "./SongStructure";
import CustomizeSongStructure from "./CustomizeSongStructure";
import Rhymes from "./Rhymes";
import CreatingLyrics from "./CreatingLyrics";
const { width } = Dimensions.get("window");
const CreateLyricsWithAi = () => {
const scrollRef = useRef(null);
const [selectedIndex, setSelectedIndex] = useState(0);
const [progress, setProgress] = useState(8);
const [progress, setProgress] = useState(16);
console.log("progress: ", progress);
const onPressNext = () => {
setSelectedIndex(selectedIndex + 1);
setProgress(progress + 8);
setProgress(progress + 9);
scrollRef.current.scrollToIndex({
index: selectedIndex + 1,
animated: true,
@@ -30,7 +38,7 @@ const CreateLyricsWithAi = () => {
const onPressBack = () => {
if (selectedIndex > 0) {
setSelectedIndex(selectedIndex - 1);
setProgress(progress - 8);
setProgress(progress - 9);
scrollRef.current.scrollToIndex({
index: selectedIndex - 1,
animated: true,
@@ -42,7 +50,11 @@ const CreateLyricsWithAi = () => {
return (
<Page headerType="NONE">
<MusicLandHeader onPressBack={onPressBack} progress={progress} />
<MusicLandHeader
onPressBack={onPressBack}
progress={progress}
showSkip={selectedIndex === 4}
/>
<View style={{ flex: 1, marginTop: 16, paddingBottom: gutters, gap: 48 }}>
<View style={{ flex: 1 }}>
<SwiperFlatList
@@ -77,9 +89,65 @@ const CreateLyricsWithAi = () => {
>
<EmotionConvey />
</View>
<View
style={{
width: width,
height: "100%",
paddingHorizontal: gutters,
}}
>
<SongStyle />
</View>
<View
style={{
width: width,
height: "100%",
paddingHorizontal: gutters,
}}
>
<SongTo />
</View>
<View
style={{
width: width,
height: "100%",
paddingHorizontal: gutters,
}}
>
<SongStructure />
</View>
<View
style={{
width: width,
height: "100%",
paddingHorizontal: gutters,
}}
>
<CustomizeSongStructure />
</View>
<View
style={{
width: width,
height: "100%",
paddingHorizontal: gutters,
}}
>
<Rhymes />
</View>
<View
style={{
width: width,
height: "100%",
paddingHorizontal: gutters,
}}
>
<CreatingLyrics active={selectedIndex === 8} />
</View>
</SwiperFlatList>
</View>
<GradientButton title="Suivant" onPress={onPressNext} />
{selectedIndex !== 8 && (
<GradientButton title="Suivant" onPress={onPressNext} />
)}
</View>
</Page>
);
src/screens/Writing/CreatingLyrics.js
+125
View File
@@ -0,0 +1,125 @@
import { View, Text, Pressable, Image } from "react-native";
import React, { useEffect, useState } from "react";
import { Palette, Style } from "../../styles";
import { BlurView } from "expo-blur";
import { ai, icons } from "../../assets";
import { size } from "../../styles/Style";
import ProgressBar from "../../components/ProgressBar";
import { FONT_FAMILY } from "../../styles/Fonts";
import GradientButton from "../../components/GradientButton";
import { navigate } from "../../navigation/NavigationService";
import { Routes } from "../../navigation";
const CreatingLyrics = ({ active }) => {
const [progress, setProgress] = useState(0);
useEffect(() => {
if (active) {
const interval = setInterval(() => {
setProgress((prevProgress) => {
if (prevProgress >= 100) {
clearInterval(interval);
return 100;
}
return prevProgress + 1;
});
}, 100);
return () => clearInterval(interval);
}
}, [active]);
return (
<View
style={{
flex: 1,
...Style.containerCenter,
}}
>
<View
style={{
width: "100%",
height: "50%",
}}
>
<View
style={{
zIndex: 1,
position: "absolute",
top: -150,
width: "50%",
height: "80%",
alignSelf: "center",
}}
>
<Image
source={ai.nathalie}
style={{ width: "100%", height: "100%", right: -10 }}
resizeMode="contain"
/>
</View>
<View
style={{
flex: 1,
borderRadius: 20,
overflow: "hidden",
backgroundColor: "#0F0C1933",
}}
>
<BlurView
intensity={40}
style={{ flex: 1, padding: 10, paddingBottom: 20 }}
>
<Pressable
style={{
...size({ size: 24 }),
...Style.containerCenter,
position: "absolute",
top: 10,
left: 10,
zIndex: 3,
}}
onPress={() => console.log("Pressed")}
>
<Image source={icons.close} style={size({ size: 11 })} />
</Pressable>
<View style={{ flex: 1, justifyContent: "flex-end", gap: 20 }}>
<Text
style={{
fontSize: 22,
color: Palette.white,
fontFamily: FONT_FAMILY.InterSemiBold,
textAlign: "center",
}}
>
Ton texte est{"\n"}en cours de création
</Text>
<View style={{ alignItems: "center", gap: 16 }}>
<ProgressBar gradient progress={progress} />
<Text
style={{
fontSize: 14,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
}}
>
{progress}%
</Text>
</View>
<GradientButton
title="Découvrir mon texte"
containerStyle={{
width: "80%",
alignSelf: "center",
}}
onPress={() => navigate(Routes.Lyrics)}
/>
</View>
</BlurView>
</View>
</View>
</View>
);
};
export default CreatingLyrics;
src/screens/Writing/CustomizeSongStructure.js
+120
View File
@@ -0,0 +1,120 @@
import { View, Text, StyleSheet, ScrollView } from "react-native";
import React from "react";
import CreateLyricsHeader from "./components/CreateLyricsHeader";
import { responsiveHeight } from "react-native-responsive-dimensions";
import BorderGradient from "../../components/BorderGradient/BorderGradient";
import { BlurView } from "expo-blur";
import { Palette, Style } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
const CustomizeSongStructure = () => {
return (
<View style={{ flex: 1, gap: 10 }}>
<CreateLyricsHeader
title="Personnalise la structure de ta chanson"
subTitle="Intègre en Drag and drop"
/>
<View style={{ flex: 1, gap: 10 }}>
<BorderGradient
gradientProps={{
colors: ["#FFFFFF00", "#FFFFFF"],
}}
style={styles.borderGradientStyle}
>
<View style={styles.blurContainer}>
<BlurView intensity={40} style={{ flex: 1, padding: 6 }}>
<ScrollView
contentContainerStyle={{ gap: 10, paddingBottom: 20 }}
>
{Array.from({ length: 10 }).map((_, index) => (
<View key={index} style={styles.dropzoneContainer}>
<Text style={styles.dropzone}>Couplet</Text>
</View>
))}
</ScrollView>
</BlurView>
</View>
</BorderGradient>
<BorderGradient
gradientProps={{
colors: ["#FFFFFF00", "#FFFFFF"],
}}
style={styles.borderGradientStyle}
>
<View style={styles.blurContainer}>
<BlurView intensity={40} style={{ flex: 1, padding: 6 }}>
<ScrollView
contentContainerStyle={{ gap: 10, paddingBottom: 20 }}
>
{Array.from({ length: 10 }).map((_, index) => (
<View key={index} style={styles.itemContainer}>
<BlurView
intensity={30}
style={{
flex: 1,
backgroundColor: Palette.glass,
justifyContent: "center",
paddingHorizontal: 12,
}}
>
<Text style={styles.dropzone}>Introduction instrumentale longue.</Text>
</BlurView>
</View>
))}
</ScrollView>
</BlurView>
</View>
</BorderGradient>
</View>
</View>
);
};
export default CustomizeSongStructure;
const styles = StyleSheet.create({
borderGradientStyle: {
borderWidth: 1,
borderRadius: 20,
height: responsiveHeight(30),
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 100,
},
blurContainer: {
flex: 1,
borderRadius: 20,
overflow: "hidden",
zIndex: 1,
},
dropzoneContainer: {
paddingVertical: 14,
paddingHorizontal: 12,
backgroundColor: "#00000080",
borderRadius: 14,
},
dropzone: {
fontSize: 16,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
},
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,
},
});
src/screens/Writing/EmotionConvey.js
+73 -59
View File
@@ -1,4 +1,4 @@
import { View, Text, StyleSheet, FlatList } from "react-native";
import { View, Text, StyleSheet, FlatList, Pressable } from "react-native";
import React, { useState } from "react";
import CreateLyricsHeader from "./components/CreateLyricsHeader";
import BorderGradient from "../../components/BorderGradient/BorderGradient";
@@ -6,75 +6,88 @@ import { responsiveHeight } from "react-native-responsive-dimensions";
import { BlurView } from "expo-blur";
import { Palette } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import { EMOTION_CONVEY } from "../../data/data";
const EmotionConvey = () => {
const [containerLayout, setContainerLayout] = useState(null);
const [itemLayout, setItemLayout] = useState([]);
console.log("itemLayout: ", itemLayout);
return (
<View style={{ flex: 1, gap: 10 }}>
<CreateLyricsHeader
title={`Quel émotion veux-tu\ntransmettre ?`}
subTitle="Sélectionne tes intentions émotionnelles. (2 max)"
/>
<BorderGradient
gradientProps={{
colors: ["#FFFFFF00", "#FFFFFF"],
}}
style={styles.borderGradientStyle}
>
<View style={styles.blurContainer}>
<BlurView intensity={40} style={{ flex: 1, padding: 6 }}>
<FlatList
data={Array.from({ length: 3 })}
contentContainerStyle={{ gap: 16 }}
renderItem={({ item, index }) => (
<View>
<BorderGradient
gradientProps={{
colors: ["#FBFF00", "#99999900"],
}}
style={{
borderWidth: 1,
height: itemLayout[index]?.height,
borderRadius: 14,
position: "absolute",
width: "100%",
}}
/>
<View
style={{ borderRadius: 14, overflow: "hidden" }}
onLayout={(e) => {
e.persist();
setItemLayout((prev) => [...prev, e.nativeEvent.layout]);
}}
<View style={styles.blurContainer}>
<BorderGradient
gradientProps={{
colors: ["#FFFFFF00", "#FFFFFF"],
}}
style={{
...styles.borderGradientStyle,
height: containerLayout?.height,
}}
/>
<BlurView
intensity={40}
style={{ padding: 6, zIndex: 2, }}
onLayout={(e) => {
e.persist();
setContainerLayout(e.nativeEvent.layout);
}}
>
<FlatList
data={EMOTION_CONVEY}
contentContainerStyle={{
gap: 16,
flexGrow: 1,
zIndex: 2,
}}
renderItem={({ item, index }) => (
<View>
<BorderGradient
gradientProps={{
colors: item.color,
}}
style={{
borderWidth: 1,
height: itemLayout[index]?.height,
borderRadius: 14,
position: "absolute",
width: "100%",
}}
/>
<View
style={{ borderRadius: 14, overflow: "hidden" }}
onLayout={(e) => {
e.persist();
setItemLayout((prev) => [...prev, e.nativeEvent.layout]);
}}
>
<BlurView
intensity={30}
style={{ paddingVertical: 14, paddingHorizontal: 12 }}
>
<BlurView
intensity={30}
style={{ paddingVertical: 14, paddingHorizontal: 12 }}
<Text
style={{
fontSize: 16,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
}}
>
<Text
style={{
fontSize: 16,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
}}
>
<Text style={{ fontFamily: FONT_FAMILY.InterBold }}>
La Joie
</Text>{" "}
: expose un bonheur profond, l'émerveillement, la
gratitude, satisfaction intense, énergie positive.
</Text>
</BlurView>
</View>
<Text style={{ fontFamily: FONT_FAMILY.InterBold }}>
{item.title}
</Text>{" "}
: {item.description}
</Text>
</BlurView>
</View>
)}
/>
</BlurView>
</View>
</BorderGradient>
</View>
)}
/>
</BlurView>
</View>
</View>
);
};
@@ -85,7 +98,6 @@ const styles = StyleSheet.create({
borderGradientStyle: {
borderWidth: 1,
borderRadius: 20,
height: responsiveHeight(55),
shadowColor: "#000",
shadowOffset: {
width: 0,
@@ -94,11 +106,13 @@ const styles = StyleSheet.create({
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 100,
position: "absolute",
width: "100%",
},
blurContainer: {
flex: 1,
borderRadius: 20,
overflow: "hidden",
zIndex: 1,
maxHeight: responsiveHeight(55),
},
});
src/screens/Writing/FinishedWriting.js
+48
View File
@@ -0,0 +1,48 @@
import { View, Text, Image, StyleSheet } from "react-native";
import React from "react";
import Page from "../../layouts/Page";
import { ai } from "../../assets";
import MusicLandHeader from "../../components/MusicLandHeader";
import { goBack, navigate } from "../../navigation/NavigationService";
import { gutters } from "../../styles";
import BorderGradientButton from "../../components/BorderGradientButton";
import GradientButton from "../../components/GradientButton";
import { Routes } from "../../navigation";
const FinishedWriting = () => {
return (
<Page headerType="NONE">
<Image source={ai.nathalie} style={styles.img} resizeMode="contain" />
<MusicLandHeader onPressBack={goBack} progress={100} />
<View
style={{ flex: 1, position: "relative", justifyContent: "flex-end" }}
>
<View
style={{
paddingBottom: gutters * 2,
paddingHorizontal: gutters,
gap: 12,
}}
>
<BorderGradientButton title="Enregistrer et continuer plus tard" />
<GradientButton
title="Passer à la composition musicale"
onPress={() => navigate(Routes.Onboarding)}
/>
</View>
</View>
</Page>
);
};
export default FinishedWriting;
const styles = StyleSheet.create({
img: {
width: "100%",
height: "70%",
position: "absolute",
bottom: -40,
right: -30,
},
});
src/screens/Writing/Lyrics.js
+100
View File
@@ -0,0 +1,100 @@
import { View, Text, Image, StyleSheet, ScrollView } from "react-native";
import React from "react";
import Page from "../../layouts/Page";
import { ai } from "../../assets";
import MusicLandHeader from "../../components/MusicLandHeader";
import { goBack, navigate } from "../../navigation/NavigationService";
import { gutters, Palette } from "../../styles";
import BorderGradientButton from "../../components/BorderGradientButton";
import GradientButton from "../../components/GradientButton";
import { Routes } from "../../navigation";
import BorderGradient from "../../components/BorderGradient/BorderGradient";
import { BlurView } from "expo-blur";
import CustomInput from "./components/CustomInput";
import { FONT_FAMILY } from "../../styles/Fonts";
const Lyrics = () => {
return (
<Page headerType="NONE">
<MusicLandHeader onPressBack={goBack} progress={95} />
<View style={{ flex: 1, marginTop: 16, paddingBottom: gutters, gap: 48 }}>
<BorderGradient
gradientProps={{
colors: ["#FFFFFF00", "#FFFFFF"],
start: { x: 0, y: 0 },
end: { x: 0, y: 1 },
}}
style={styles.borderGradientStyle}
>
<View style={{ borderRadius: 20, overflow: "hidden", flex: 1 }}>
<BlurView intensity={40} style={{ flex: 1 }}>
<ScrollView
contentContainerStyle={{
paddingHorizontal: 14,
paddingVertical: 10,
gap: 10,
flexGrow: 1,
}}
>
<CustomInput label="Titre" placeholder="Titre" height={45} />
<View
style={{
height: 45,
justifyContent: "center",
backgroundColor: "#00000080",
borderRadius: 14,
paddingHorizontal: 12,
marginTop: 20,
}}
>
<Text
style={{
fontSize: 16,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
}}
>
Introduction instrumentale longue
</Text>
</View>
<CustomInput
label="Couplet"
placeholder="Couplet"
height={225}
/>
<CustomInput
label="Refrain"
placeholder="Refrain"
height={170}
/>
</ScrollView>
</BlurView>
</View>
</BorderGradient>
</View>
<View
style={{
paddingBottom: gutters * 2,
paddingHorizontal: gutters,
gap: 12,
}}
>
<BorderGradientButton title="Générer des autres paroles" />
<GradientButton
title="Valider"
onPress={() => navigate(Routes.FinishedWriting)}
/>
</View>
</Page>
);
};
export default Lyrics;
const styles = StyleSheet.create({
borderGradientStyle: {
height: "100%",
borderWidth: 1,
borderRadius: 20,
},
});
src/screens/Writing/Rhymes.js
+99
View File
@@ -0,0 +1,99 @@
import { View, Text, StyleSheet } from "react-native";
import React, { useState } from "react";
import CreateLyricsHeader from "./components/CreateLyricsHeader";
import { BlurView } from "expo-blur";
import { Palette } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import BorderGradient from "../../components/BorderGradient/BorderGradient";
import { responsiveHeight } from "react-native-responsive-dimensions";
const Rhymes = () => {
const [containerLayout, setContainerLayout] = useState(null);
return (
<View style={{ flex: 1, gap: 10 }}>
<CreateLyricsHeader title="Avec ou sans rimes" />
<View style={styles.blurContainer}>
<BorderGradient
gradientProps={{
colors: ["#FFFFFF00", "#FFFFFF"],
}}
style={{
...styles.borderGradientStyle,
height: containerLayout?.height,
}}
/>
<BlurView
intensity={40}
style={{ padding: 6, zIndex: 2, gap: 10 }}
onLayout={(e) => {
e.persist();
setContainerLayout(e.nativeEvent.layout);
}}
>
{Array.from({ length: 3 }).map((_, index) => (
<View key={index} style={styles.itemContainer}>
<BlurView
intensity={30}
style={{
flex: 1,
backgroundColor: Palette.glass,
justifyContent: "center",
paddingHorizontal: 12,
}}
>
<Text style={styles.dropzone}>
Introduction instrumentale longue.
</Text>
</BlurView>
</View>
))}
</BlurView>
</View>
</View>
);
};
export default Rhymes;
const styles = StyleSheet.create({
borderGradientStyle: {
borderWidth: 1,
borderRadius: 20,
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 100,
position: "absolute",
width: "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,
},
dropzone: {
fontSize: 16,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
},
blurContainer: {
borderRadius: 20,
overflow: "hidden",
zIndex: 1,
maxHeight: responsiveHeight(55),
},
});
src/screens/Writing/SongStructure.js
+101
View File
@@ -0,0 +1,101 @@
import { View, Text, StyleSheet, FlatList, Pressable } from "react-native";
import React from "react";
import CreateLyricsHeader from "./components/CreateLyricsHeader";
import BorderGradient from "../../components/BorderGradient/BorderGradient";
import { BlurView } from "expo-blur";
import { GOALS } from "../../data/data";
import { Palette, Style } from "../../styles";
import { responsiveHeight } from "react-native-responsive-dimensions";
import { FONT_FAMILY } from "../../styles/Fonts";
const SongStructure = () => {
return (
<View style={{ flex: 1, gap: 10 }}>
<CreateLyricsHeader
title="Comment veux-tu structurer ta chanson ?"
subTitle="Sélectionne une structure.o"
/>
<BorderGradient
gradientProps={{
colors: ["#FFFFFF00", "#FFFFFF"],
}}
style={styles.borderGradientStyle}
>
<View style={styles.blurContainer}>
<BlurView intensity={40} style={{ flex: 1, padding: 6 }}>
<FlatList
data={GOALS}
showsVerticalScrollIndicator={false}
contentContainerStyle={styles.contentContainer}
renderItem={({ item }) => (
<Pressable style={styles.itemContainer}>
<BlurView
intensity={30}
style={{
flex: 1,
backgroundColor: Palette.glass,
...Style.containerCenter,
}}
>
<Text style={styles.itemText}>{item}</Text>
</BlurView>
</Pressable>
)}
/>
</BlurView>
</View>
</BorderGradient>
</View>
);
};
export default SongStructure;
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,
},
});
src/screens/Writing/SongStyle.js
+108
View File
@@ -0,0 +1,108 @@
import { View, Text, FlatList, Pressable, StyleSheet } from "react-native";
import React from "react";
import CreateLyricsHeader from "./components/CreateLyricsHeader";
import BorderGradient from "../../components/BorderGradient/BorderGradient";
import { BlurView } from "expo-blur";
import { GOALS } from "../../data/data";
import { Palette, Style } from "../../styles";
import CustomInput from "./components/CustomInput";
import { responsiveHeight } from "react-native-responsive-dimensions";
import { FONT_FAMILY } from "../../styles/Fonts";
const SongStyle = () => {
return (
<View style={{ flex: 1, gap: 16 }}>
<View style={{ gap: 10 }}>
<CreateLyricsHeader
title={`Quel est le style de ta chanson ?`}
subTitle="Choisis l'ambiance émotions que tu veux faire passer."
/>
<BorderGradient
gradientProps={{
colors: ["#FFFFFF00", "#FFFFFF"],
}}
style={styles.borderGradientStyle}
>
<View style={styles.blurContainer}>
<BlurView intensity={40} style={{ flex: 1, padding: 6 }}>
<FlatList
data={GOALS}
showsVerticalScrollIndicator={false}
contentContainerStyle={styles.contentContainer}
renderItem={({ item }) => (
<Pressable style={styles.itemContainer}>
<BlurView
intensity={30}
style={{
flex: 1,
backgroundColor: Palette.glass,
...Style.containerCenter,
}}
>
<Text style={styles.itemText}>{item}</Text>
</BlurView>
</Pressable>
)}
/>
</BlurView>
</View>
</BorderGradient>
</View>
<CustomInput
label="Tu as un autre style de chanson ?"
placeholder="Décrire l’objectif"
/>
</View>
);
};
export default SongStyle;
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,
},
});
src/screens/Writing/SongTo.js
+15
View File
@@ -0,0 +1,15 @@
import { View, Text } from "react-native";
import React from "react";
import CreateLyricsHeader from "./components/CreateLyricsHeader";
import CustomInput from "./components/CustomInput";
const SongTo = () => {
return (
<View style={{ flex: 1, gap: 10 }}>
<CreateLyricsHeader title="À qui s’adresse ta chanson ?" />
<CustomInput placeholder="Ecrire mon contexte" height={283} />
</View>
);
};
export default SongTo;
src/screens/Writing/WritingLyrics.js
+1 -1
View File
@@ -13,7 +13,7 @@ const WritingLyrics = () => {
return (
<Page headerType="NONE">
<Image source={ai.nathalie} style={styles.img} resizeMode="contain" />
<MusicLandHeader showSkip onPressBack={goBack} />
<MusicLandHeader showSkip onPressBack={goBack} progress={9} />
<View
style={{ flex: 1, position: "relative", justifyContent: "flex-end" }}
>