update
This commit is contained in:
Philip Cesar Garay
@@ -21,7 +21,7 @@ import { Palette } from "./src/styles";
|
||||
import { navigationRef, reset } from "./src/navigation/NavigationService";
|
||||
|
||||
import initialGlobalState from "./src/config/initialGlobalState";
|
||||
import { MenuProvider } from 'react-native-popup-menu';
|
||||
import { MenuProvider } from "react-native-popup-menu";
|
||||
|
||||
import firebase from "./src/config/firebase";
|
||||
import Providers from "./src/providers";
|
||||
@@ -34,6 +34,8 @@ import {
|
||||
Inter_700Bold,
|
||||
} from "@expo-google-fonts/inter";
|
||||
|
||||
import "./src/utils/Sheet";
|
||||
|
||||
console.disableYellowBox = true;
|
||||
console.reportErrorsAsExceptions = false;
|
||||
|
||||
|
||||
+4
-1
@@ -37,6 +37,7 @@
|
||||
"@react-navigation/stack": "^6.0.11",
|
||||
"@stripe/react-stripe-js": "^2.5.0",
|
||||
"@stripe/stripe-js": "^3.0.0",
|
||||
"add": "^2.0.6",
|
||||
"deprecated-react-native-prop-types": "^3.0.1",
|
||||
"expo": "~52.0.17",
|
||||
"expo-av": "~15.0.1",
|
||||
@@ -66,6 +67,7 @@
|
||||
"react": "18.3.1",
|
||||
"react-dom": "18.3.1",
|
||||
"react-native": "0.76.5",
|
||||
"react-native-actions-sheet": "^0.9.7",
|
||||
"react-native-compressor": "^1.8.24",
|
||||
"react-native-country-picker-modal": "^2.0.0",
|
||||
"react-native-dialog": "^9.3.0",
|
||||
@@ -88,7 +90,8 @@
|
||||
"react-native-web-linear-gradient": "^1.1.2",
|
||||
"react-native-webview": "13.12.5",
|
||||
"reactn": "^2.2.7",
|
||||
"rxjs": "^7.6.0"
|
||||
"rxjs": "^7.6.0",
|
||||
"yarn": "^1.22.22"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.20.5",
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 437 B After Width: | Height: | Size: 359 B |
Binary file not shown.
|
Before Width: | Height: | Size: 266 B After Width: | Height: | Size: 341 B |
Binary file not shown.
|
After Width: | Height: | Size: 445 B |
@@ -81,6 +81,7 @@ import heartOutline from "./icons/heartOutline.png";
|
||||
import more from "./icons/more.png";
|
||||
import forward from "./icons/forward.png";
|
||||
import pause from "./icons/pause.png";
|
||||
import share from "./icons/share.png";
|
||||
|
||||
export const icons = {
|
||||
bell,
|
||||
@@ -139,6 +140,7 @@ export const icons = {
|
||||
more,
|
||||
forward,
|
||||
pause,
|
||||
share,
|
||||
};
|
||||
|
||||
import triangle from "./art/triangle.png";
|
||||
|
||||
@@ -0,0 +1,37 @@
|
||||
import { View, Text } from "react-native";
|
||||
import React from "react";
|
||||
import ActionSheet from "react-native-actions-sheet";
|
||||
import { gutters, Palette } from "../styles";
|
||||
import { BlurView } from "expo-blur";
|
||||
|
||||
const AppActionSheet = ({ children, props }) => {
|
||||
return (
|
||||
<ActionSheet
|
||||
containerStyle={{ backgroundColor: Palette.tran }}
|
||||
gestureEnabled
|
||||
indicatorStyle={{
|
||||
top: 20,
|
||||
width: 50,
|
||||
zIndex: 2,
|
||||
}}
|
||||
{...props}
|
||||
>
|
||||
<BlurView
|
||||
intensity={20}
|
||||
style={{
|
||||
paddingTop: 36,
|
||||
paddingHorizontal: 14,
|
||||
paddingBottom: gutters,
|
||||
backgroundColor: Palette.glass,
|
||||
borderTopLeftRadius: 20,
|
||||
borderTopRightRadius: 20,
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</BlurView>
|
||||
</ActionSheet>
|
||||
);
|
||||
};
|
||||
|
||||
export default AppActionSheet;
|
||||
@@ -0,0 +1,43 @@
|
||||
import { View, Text, Pressable, StyleSheet, Image } from "react-native";
|
||||
import React from "react";
|
||||
import { BlurView } from "expo-blur";
|
||||
import { Palette, Style } from "../styles";
|
||||
import { FONT_FAMILY } from "../styles/Fonts";
|
||||
import { icons } from "../assets";
|
||||
import { size } from "../styles/Style";
|
||||
|
||||
const BlurItemButton = ({ onPress, title = "" }) => {
|
||||
return (
|
||||
<Pressable onPress={onPress}>
|
||||
<BlurView intensity={20} style={styles.buttonContainer}>
|
||||
<Text style={styles.buttonText}>{title}</Text>
|
||||
<Image
|
||||
source={icons.chevronDown}
|
||||
style={{
|
||||
...size({ size: 15 }),
|
||||
transform: [{ rotate: "-90deg" }],
|
||||
}}
|
||||
resizeMode="contain"
|
||||
/>
|
||||
</BlurView>
|
||||
</Pressable>
|
||||
);
|
||||
};
|
||||
|
||||
export default BlurItemButton;
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
buttonContainer: {
|
||||
...Style.containerSpaceBetween,
|
||||
paddingHorizontal: 12,
|
||||
height: 56,
|
||||
borderRadius: 14,
|
||||
overflow: "hidden",
|
||||
backgroundColor: Palette.glass,
|
||||
},
|
||||
buttonText: {
|
||||
fontSize: 16,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
},
|
||||
});
|
||||
@@ -10,6 +10,7 @@ const BorderGradientButton = ({
|
||||
title = "J’ai déjà mes paroles",
|
||||
onPress,
|
||||
icon,
|
||||
titleStyle,
|
||||
}) => {
|
||||
return (
|
||||
<Pressable onPress={onPress}>
|
||||
@@ -54,6 +55,7 @@ const BorderGradientButton = ({
|
||||
fontSize: 15,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterMedium,
|
||||
...titleStyle,
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
|
||||
@@ -12,6 +12,7 @@ export default ({
|
||||
onBackPressed = null,
|
||||
containerStyle = {},
|
||||
headerTitleStyle = {},
|
||||
hideBackButton = false,
|
||||
}) => {
|
||||
return (
|
||||
<View
|
||||
@@ -26,17 +27,19 @@ export default ({
|
||||
]}
|
||||
>
|
||||
<View style={{ flex: 1 }}>
|
||||
<Pressable onPress={() => onBackPressed?.() || goBack()}>
|
||||
<Image
|
||||
source={icons.chevronDown}
|
||||
style={[
|
||||
Style.iconSmall,
|
||||
Style.mirrorHorizontal,
|
||||
{ transform: [{ rotate: "90deg" }] },
|
||||
]}
|
||||
resizeMode="contain"
|
||||
/>
|
||||
</Pressable>
|
||||
{!hideBackButton && (
|
||||
<Pressable onPress={() => onBackPressed?.() || goBack()}>
|
||||
<Image
|
||||
source={icons.chevronDown}
|
||||
style={[
|
||||
Style.iconSmall,
|
||||
Style.mirrorHorizontal,
|
||||
{ transform: [{ rotate: "90deg" }] },
|
||||
]}
|
||||
resizeMode="contain"
|
||||
/>
|
||||
</Pressable>
|
||||
)}
|
||||
</View>
|
||||
|
||||
<Motion.Text
|
||||
|
||||
+32
-31
@@ -3,48 +3,49 @@ import { Pressable, View } from "react-native";
|
||||
import { Easing } from "react-native-reanimated";
|
||||
|
||||
import { Palette } from "../styles";
|
||||
import { LinearGradient } from "./LinearGradient/LinearGradient";
|
||||
|
||||
export default ({ value, setValue, containerStyle = {} }) => {
|
||||
const currentColor = value ? Palette.green : Palette.red;
|
||||
const currentColor = value ? ["#F94697", "#7023F7"] : ["#8C8C8C", "#8C8C8C"];
|
||||
|
||||
const switchHeight = 28;
|
||||
const borderWidth = 2;
|
||||
const internalMargin = 2;
|
||||
|
||||
const itemSize = switchHeight - borderWidth * 2 - internalMargin * 2;
|
||||
const itemSize = switchHeight - internalMargin * 2;
|
||||
|
||||
return (
|
||||
<Pressable
|
||||
onPress={() => setValue(!value)}
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
width: switchHeight * 2,
|
||||
height: switchHeight,
|
||||
borderColor: currentColor,
|
||||
borderWidth: borderWidth,
|
||||
borderRadius: 25,
|
||||
...containerStyle,
|
||||
}}
|
||||
>
|
||||
<Motion.View
|
||||
animate={{
|
||||
right: value ? 0 : switchHeight,
|
||||
left: value ? switchHeight : 0,
|
||||
}}
|
||||
transition={{
|
||||
type: "timing",
|
||||
duration: 300,
|
||||
easing: Easing.easing,
|
||||
}}
|
||||
<Pressable onPress={() => setValue(!value)}>
|
||||
<LinearGradient
|
||||
colors={currentColor}
|
||||
style={{
|
||||
position: "absolute",
|
||||
width: itemSize,
|
||||
height: itemSize,
|
||||
margin: internalMargin,
|
||||
flexDirection: "row",
|
||||
width: switchHeight * 2,
|
||||
height: switchHeight,
|
||||
borderRadius: 25,
|
||||
backgroundColor: currentColor,
|
||||
backgroundColor: "red",
|
||||
...containerStyle,
|
||||
}}
|
||||
/>
|
||||
>
|
||||
<Motion.View
|
||||
animate={{
|
||||
right: value ? 0 : switchHeight,
|
||||
left: value ? switchHeight : 0,
|
||||
}}
|
||||
transition={{
|
||||
type: "timing",
|
||||
duration: 300,
|
||||
easing: Easing.easing,
|
||||
}}
|
||||
style={{
|
||||
position: "absolute",
|
||||
width: itemSize,
|
||||
height: itemSize,
|
||||
margin: internalMargin,
|
||||
borderRadius: 25,
|
||||
backgroundColor: Palette.white,
|
||||
}}
|
||||
/>
|
||||
</LinearGradient>
|
||||
</Pressable>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -0,0 +1,50 @@
|
||||
import { View, Text } from "react-native";
|
||||
import React from "react";
|
||||
import AppActionSheet from "../AppActionSheet";
|
||||
import BorderGradientButton from "../BorderGradientButton";
|
||||
import GradientButton from "../GradientButton";
|
||||
import { Palette } from "../../styles";
|
||||
import { FONT_FAMILY } from "../../styles/Fonts";
|
||||
import { SheetManager } from "react-native-actions-sheet";
|
||||
|
||||
const DeleteAccountModal = () => {
|
||||
const onClose = async () => {
|
||||
await SheetManager.hide("DeleteAccount");
|
||||
};
|
||||
|
||||
return (
|
||||
<AppActionSheet id="DeleteAccount">
|
||||
<View style={{ gap: 20 }}>
|
||||
<View style={{ gap: 2 }}>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 20,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.HelveticaNeueMedium,
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
Supprimer mon compte
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 16,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.HelveticaNeueRegular,
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
Es-tu sur de vouloir supprimer ton compte?{"\n"}Attention, cette
|
||||
action est irréversible!
|
||||
</Text>
|
||||
</View>
|
||||
<View style={{ width: "80%", alignSelf: "center", gap: 12 }}>
|
||||
<BorderGradientButton title="Oui, supprimer" onPress={onClose} />
|
||||
<GradientButton title="Non, annuler" onPress={onClose} />
|
||||
</View>
|
||||
</View>
|
||||
</AppActionSheet>
|
||||
);
|
||||
};
|
||||
|
||||
export default DeleteAccountModal;
|
||||
@@ -0,0 +1,50 @@
|
||||
import { View, Text } from "react-native";
|
||||
import React from "react";
|
||||
import AppActionSheet from "../AppActionSheet";
|
||||
import { Palette } from "../../styles";
|
||||
import { FONT_FAMILY } from "../../styles/Fonts";
|
||||
import BorderGradientButton from "../BorderGradientButton";
|
||||
import GradientButton from "../GradientButton";
|
||||
import { SheetManager } from "react-native-actions-sheet";
|
||||
|
||||
const DeleteAudioModal = () => {
|
||||
const onClose = () => {
|
||||
SheetManager.hide("DeleteAudio");
|
||||
};
|
||||
|
||||
return (
|
||||
<AppActionSheet id="DeleteAudio">
|
||||
<View style={{ gap: 20 }}>
|
||||
<View style={{ gap: 2 }}>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 20,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.HelveticaNeueMedium,
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
Supprimer mon audio
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 16,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.HelveticaNeueRegular,
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
Es-tu sur de vouloir supprimer ton audio?{"\n"}
|
||||
Attention, cette action est irréversible!
|
||||
</Text>
|
||||
</View>
|
||||
<View style={{ width: "80%", alignSelf: "center", gap: 12 }}>
|
||||
<BorderGradientButton title="Oui, supprimer" onPress={onClose} />
|
||||
<GradientButton title="Non, annuler" onPress={onClose} />
|
||||
</View>
|
||||
</View>
|
||||
</AppActionSheet>
|
||||
);
|
||||
};
|
||||
|
||||
export default DeleteAudioModal;
|
||||
@@ -0,0 +1,50 @@
|
||||
import { View, Text } from "react-native";
|
||||
import React from "react";
|
||||
import ActionSheet, { SheetManager } from "react-native-actions-sheet";
|
||||
import { gutters, Palette } from "../../styles";
|
||||
import { BlurView } from "expo-blur";
|
||||
import BorderGradientButton from "../BorderGradientButton";
|
||||
import GradientButton from "../GradientButton";
|
||||
import { FONT_FAMILY } from "../../styles/Fonts";
|
||||
import AppActionSheet from "../AppActionSheet";
|
||||
|
||||
const DeleteModal = () => {
|
||||
const onClose = () => {
|
||||
SheetManager.hide("Delete");
|
||||
};
|
||||
|
||||
return (
|
||||
<AppActionSheet id="Delete">
|
||||
<View style={{ gap: 20 }}>
|
||||
<View style={{ gap: 2 }}>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 20,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.HelveticaNeueMedium,
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
Supprimer ma playlist
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 16,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.HelveticaNeueRegular,
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
Es-tu sur de vouloir supprimer ta playlist?
|
||||
</Text>
|
||||
</View>
|
||||
<View style={{ width: "80%", alignSelf: "center", gap: 12 }}>
|
||||
<BorderGradientButton title="Oui, supprimer" onPress={onClose} />
|
||||
<GradientButton title="Non, annuler" onPress={onClose} />
|
||||
</View>
|
||||
</View>
|
||||
</AppActionSheet>
|
||||
);
|
||||
};
|
||||
|
||||
export default DeleteModal;
|
||||
@@ -0,0 +1,50 @@
|
||||
import { View, Text } from "react-native";
|
||||
import React from "react";
|
||||
import AppActionSheet from "../AppActionSheet";
|
||||
import { Palette } from "../../styles";
|
||||
import { FONT_FAMILY } from "../../styles/Fonts";
|
||||
import BorderGradientButton from "../BorderGradientButton";
|
||||
import GradientButton from "../GradientButton";
|
||||
import { SheetManager } from "react-native-actions-sheet";
|
||||
|
||||
const DeletePlaybackModal = () => {
|
||||
const onClose = () => {
|
||||
SheetManager.hide("DeletePlayback");
|
||||
};
|
||||
|
||||
return (
|
||||
<AppActionSheet id="DeletePlayback">
|
||||
<View style={{ gap: 20 }}>
|
||||
<View style={{ gap: 2 }}>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 20,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.HelveticaNeueMedium,
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
Supprimer mon playback
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 16,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.HelveticaNeueRegular,
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
Es-tu sur de vouloir supprimer ton playback?{"\n"}
|
||||
Attention, cette action est irréversible!
|
||||
</Text>
|
||||
</View>
|
||||
<View style={{ width: "80%", alignSelf: "center", gap: 12 }}>
|
||||
<BorderGradientButton title="Oui, supprimer" onPress={onClose} />
|
||||
<GradientButton title="Non, annuler" onPress={onClose} />
|
||||
</View>
|
||||
</View>
|
||||
</AppActionSheet>
|
||||
);
|
||||
};
|
||||
|
||||
export default DeletePlaybackModal;
|
||||
@@ -0,0 +1,50 @@
|
||||
import { View, Text } from "react-native";
|
||||
import React from "react";
|
||||
import AppActionSheet from "../AppActionSheet";
|
||||
import { Palette } from "../../styles";
|
||||
import { FONT_FAMILY } from "../../styles/Fonts";
|
||||
import BlurItemButton from "../BlurItemButton";
|
||||
import { SheetManager } from "react-native-actions-sheet";
|
||||
import { navigate } from "../../navigation/NavigationService";
|
||||
import { Routes } from "../../navigation";
|
||||
|
||||
const ProfileSettingsModal = () => {
|
||||
const onClose = async () => {
|
||||
await SheetManager.hide("ProfileSettings");
|
||||
};
|
||||
|
||||
return (
|
||||
<AppActionSheet id="ProfileSettings">
|
||||
<View style={{ paddingTop: 10, gap: 30 }}>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 20,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.HelveticaNeueMedium,
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
Paramètres
|
||||
</Text>
|
||||
<View style={{ gap: 10 }}>
|
||||
<BlurItemButton
|
||||
title="Modifier mon profil"
|
||||
onPress={() => {
|
||||
onClose();
|
||||
navigate(Routes.EditProfile);
|
||||
}}
|
||||
/>
|
||||
<BlurItemButton
|
||||
title="Paramètres"
|
||||
onPress={() => {
|
||||
onClose();
|
||||
navigate(Routes.Settings);
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</AppActionSheet>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProfileSettingsModal;
|
||||
@@ -36,6 +36,7 @@ export default ({
|
||||
onBackPressed = null,
|
||||
backgroundImg = background.writingBG,
|
||||
headerTitleStyle = {},
|
||||
hideBackButton = false,
|
||||
}) => {
|
||||
const { currentUID } = useUserData();
|
||||
|
||||
@@ -81,6 +82,7 @@ export default ({
|
||||
rightComponent={rightComponent}
|
||||
onBackPressed={onBackPressed}
|
||||
headerTitleStyle={headerTitleStyle}
|
||||
hideBackButton={hideBackButton}
|
||||
/>
|
||||
)
|
||||
) : null}
|
||||
|
||||
@@ -18,6 +18,7 @@ import HomeStack from "./HomeStack";
|
||||
import ChatStack from "./ChatStack";
|
||||
import SettingsStack from "./SettingsStack";
|
||||
import Library from "../screens/Library/Library.js";
|
||||
import Profile from "../screens/Profile/Profile.js";
|
||||
|
||||
const bottomTabStyles = StyleSheet.create({
|
||||
icon: {
|
||||
@@ -91,7 +92,7 @@ export const BottomTabScreen = () => {
|
||||
/>
|
||||
<BottomTab.Screen
|
||||
name={Routes.Profile}
|
||||
component={SettingsStack}
|
||||
component={Profile}
|
||||
options={{
|
||||
tabBarLabel: "Profil",
|
||||
headerShown: false,
|
||||
|
||||
@@ -11,7 +11,7 @@ import Onboarding from "../screens/Onboarding";
|
||||
import Login from "../screens/Login";
|
||||
import ForgotPassword from "../screens/ForgotPassword";
|
||||
|
||||
import Notifications from "../screens/Notifications";
|
||||
import Notifications from "../screens/Profile/Notifications";
|
||||
|
||||
import TermsOfUse from "../screens/TermsOfUse";
|
||||
import PrivacyPolicy from "../screens/PrivacyPolicy";
|
||||
@@ -51,6 +51,12 @@ import AllMyLikedMusic from "../screens/Library/AllMyLikedMusic";
|
||||
import Research from "../screens/Library/Research";
|
||||
import MusicDetails from "../screens/Library/MusicDetails";
|
||||
import SingerProfile from "../screens/Profile/SingerProfile";
|
||||
import EditProfile from "../screens/Profile/EditProfile";
|
||||
import Settings from "../screens/Profile/Settings";
|
||||
import ChangeEmailAddress from "../screens/Profile/ChangeEmailAddress";
|
||||
import ChangePassword from "../screens/Profile/ChangePassword";
|
||||
import Language from "../screens/Profile/Language";
|
||||
import Reels from "../screens/Profile/Reels";
|
||||
|
||||
const screenOptions = {
|
||||
headerShown: false,
|
||||
@@ -79,11 +85,6 @@ const screens = [
|
||||
component: BottomTabScreen,
|
||||
options: { animationEnabled: false },
|
||||
},
|
||||
{
|
||||
name: Routes.Notifications,
|
||||
component: Notifications,
|
||||
title: "Notifications",
|
||||
},
|
||||
{
|
||||
name: Routes.TermsOfUse,
|
||||
component: TermsOfUse,
|
||||
@@ -238,6 +239,34 @@ const screens = [
|
||||
name: Routes.SingerProfile,
|
||||
component: SingerProfile,
|
||||
},
|
||||
{
|
||||
name: Routes.EditProfile,
|
||||
component: EditProfile,
|
||||
},
|
||||
{
|
||||
name: Routes.Settings,
|
||||
component: Settings,
|
||||
},
|
||||
{
|
||||
name: Routes.ChangeEmailAddress,
|
||||
component: ChangeEmailAddress,
|
||||
},
|
||||
{
|
||||
name: Routes.ChangePassword,
|
||||
component: ChangePassword,
|
||||
},
|
||||
{
|
||||
name: Routes.Notifications,
|
||||
component: Notifications,
|
||||
},
|
||||
{
|
||||
name: Routes.Language,
|
||||
component: Language,
|
||||
},
|
||||
{
|
||||
name: Routes.Reels,
|
||||
component: Reels,
|
||||
},
|
||||
];
|
||||
|
||||
export default function Main() {
|
||||
|
||||
@@ -6,7 +6,6 @@ export const Routes = {
|
||||
|
||||
BottomTab: "BottomTab",
|
||||
Welcome: "Welcome",
|
||||
Notifications: "Notifications",
|
||||
|
||||
HomeStack: "HomeStack",
|
||||
Home: "Home",
|
||||
@@ -16,7 +15,6 @@ export const Routes = {
|
||||
Chat: "Chat",
|
||||
|
||||
SettingsStack: "SettingsStack",
|
||||
Settings: "Settings",
|
||||
ProjectSettings: "ProjectSettings",
|
||||
AccountSettings: "AccountSettings",
|
||||
|
||||
@@ -70,4 +68,11 @@ export const Routes = {
|
||||
|
||||
Profile: "Profile",
|
||||
SingerProfile: "SingerProfile",
|
||||
EditProfile: "EditProfile",
|
||||
Settings: "Settings",
|
||||
ChangeEmailAddress: "ChangeEmailAddress",
|
||||
ChangePassword: "ChangePassword",
|
||||
Notifications: "Notifications",
|
||||
Language: "Language",
|
||||
Reels: "Reels",
|
||||
};
|
||||
|
||||
@@ -4,9 +4,9 @@ import { createStackNavigator } from "@react-navigation/stack";
|
||||
import { Palette } from "../styles";
|
||||
import { Routes } from "./Routes";
|
||||
|
||||
import Settings from "../screens/Settings";
|
||||
import ProjectSettings from "../screens/ProjectSettings";
|
||||
import AccountSettings from "../screens/AccountSettings";
|
||||
import Settings from "../screens/Profile/Settings";
|
||||
|
||||
const screenOptions = {
|
||||
headerShown: false,
|
||||
|
||||
@@ -8,6 +8,7 @@ import SplashAnimationProvider from "./SplashAnimationProvider";
|
||||
import UniversalLinkProvider from "./UniversalLinkProvider";
|
||||
import PremiumProvider from "./PremiumProvider";
|
||||
import StripeEmbeddedProvider from "./StripeEmbeddedProvider";
|
||||
import { SheetProvider } from "react-native-actions-sheet";
|
||||
|
||||
const SharedProviders = ({ children }) => {
|
||||
const providers = [
|
||||
@@ -19,6 +20,7 @@ const SharedProviders = ({ children }) => {
|
||||
[StripeEmbeddedProvider, {}],
|
||||
[PremiumProvider, {}],
|
||||
[UniversalLinkProvider, {}],
|
||||
[SheetProvider, {}],
|
||||
];
|
||||
|
||||
// Dynamically nest the providers using reduce
|
||||
|
||||
@@ -1,11 +1,18 @@
|
||||
import { View, Text } from "react-native";
|
||||
import React from "react";
|
||||
import { View, Text, Pressable } from "react-native";
|
||||
import React, { useState } from "react";
|
||||
import Page from "../../layouts/Page";
|
||||
import { background } from "../../assets";
|
||||
import { gutters } from "../../styles";
|
||||
import { gutters, Palette } from "../../styles";
|
||||
import MusicCard from "./components/MusicCard";
|
||||
import Animated, { Easing, FadeIn, FadeOut } from "react-native-reanimated";
|
||||
import { BlurView } from "expo-blur";
|
||||
import { FONT_FAMILY } from "../../styles/Fonts";
|
||||
import { SheetManager } from "react-native-actions-sheet";
|
||||
|
||||
const AllMyLikedMusic = () => {
|
||||
const [top, setTop] = useState(0);
|
||||
const [showMenu, setShowMenu] = useState(false);
|
||||
|
||||
return (
|
||||
<Page
|
||||
headerType="NAVIGATION"
|
||||
@@ -16,8 +23,65 @@ const AllMyLikedMusic = () => {
|
||||
<View style={{ flex: 1 }}>
|
||||
<View style={{ gap: 10 }}>
|
||||
{Array.from({ length: 3 }).map((_, index) => (
|
||||
<MusicCard key={index} />
|
||||
<MusicCard
|
||||
key={index}
|
||||
onPressMore={(posTop) => {
|
||||
setTop(posTop);
|
||||
if (showMenu) {
|
||||
if (posTop === top) {
|
||||
setShowMenu(false);
|
||||
} else {
|
||||
setShowMenu(false);
|
||||
setTimeout(() => {
|
||||
setShowMenu(true);
|
||||
}, 300);
|
||||
}
|
||||
} else {
|
||||
setShowMenu(true);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
{showMenu && (
|
||||
<Animated.View
|
||||
entering={FadeIn.duration(300).easing(Easing.ease)}
|
||||
exiting={FadeOut.duration(300).easing(Easing.ease)}
|
||||
style={{
|
||||
position: "absolute",
|
||||
right: 0,
|
||||
top: top,
|
||||
zIndex: 2,
|
||||
}}
|
||||
>
|
||||
<Pressable
|
||||
onPress={() => {
|
||||
setShowMenu(false);
|
||||
SheetManager.show("Delete");
|
||||
}}
|
||||
>
|
||||
<BlurView
|
||||
intensity={20}
|
||||
style={{
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 10,
|
||||
backgroundColor: Palette.glass,
|
||||
borderRadius: 12,
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 14,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
}}
|
||||
>
|
||||
Supprimer de la playlist
|
||||
</Text>
|
||||
</BlurView>
|
||||
</Pressable>
|
||||
</Animated.View>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
</Page>
|
||||
|
||||
@@ -13,15 +13,31 @@ import { Palette } from "../../styles";
|
||||
import Style, { gutters, size } from "../../styles/Style";
|
||||
import { FONT_FAMILY } from "../../styles/Fonts";
|
||||
import Slider from "../../components/Slider";
|
||||
import { useRoute } from "@react-navigation/core";
|
||||
import { SheetManager } from "react-native-actions-sheet";
|
||||
|
||||
const MusicDetails = () => {
|
||||
const params = useRoute().params;
|
||||
const action = params?.action;
|
||||
const [fav, setFav] = useState(false);
|
||||
|
||||
return (
|
||||
<Page
|
||||
headerType="NAVIGATION"
|
||||
title="Recherche"
|
||||
backgroundImg={background.libraryBG2}
|
||||
title={action === "userProfile" ? "Mon profil" : "Recherche"}
|
||||
backgroundImg={
|
||||
action === "userProfile" ? background.profileBG : background.libraryBG2
|
||||
}
|
||||
{...(action === "userProfile" && {
|
||||
containerStyle: {
|
||||
backgroundColor: "#0000004D",
|
||||
},
|
||||
rightComponent: () => (
|
||||
<Pressable onPress={() => SheetManager.show("DeleteAudio")}>
|
||||
<Image source={icons.trash} />
|
||||
</Pressable>
|
||||
),
|
||||
})}
|
||||
>
|
||||
<ScrollView
|
||||
contentContainerStyle={{
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { View, Text, Image, Pressable, StyleSheet } from "react-native";
|
||||
import React, { useState } from "react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Palette, Style } from "../../../styles";
|
||||
import { icons, img } from "../../../assets";
|
||||
import { size } from "../../../styles/Style";
|
||||
@@ -8,52 +8,82 @@ import { FONT_FAMILY } from "../../../styles/Fonts";
|
||||
|
||||
const MusicCard = ({ onPress, onPressMore }) => {
|
||||
const [selected, setSelected] = useState(false);
|
||||
const [open, setOpen] = useState(false);
|
||||
const [layout, setLayout] = useState(null);
|
||||
const [menuPos, setMenuPos] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
if (layout) {
|
||||
const top = layout?.y + 45;
|
||||
setMenuPos(top);
|
||||
}
|
||||
}, [layout]);
|
||||
|
||||
const onPressMenu = () => {
|
||||
onPressMore?.(menuPos);
|
||||
};
|
||||
|
||||
return (
|
||||
<Pressable
|
||||
style={{
|
||||
...Style.containerRow,
|
||||
gap: 6,
|
||||
}}
|
||||
onPress={onPress}
|
||||
>
|
||||
<Image
|
||||
source={img.placeholder2}
|
||||
style={{ ...size({ size: 60 }), borderRadius: 12 }}
|
||||
/>
|
||||
<View style={styles.blurContainer}>
|
||||
<BlurView
|
||||
intensity={20}
|
||||
style={{
|
||||
flex: 1,
|
||||
...Style.containerSpaceBetween,
|
||||
paddingHorizontal: 8,
|
||||
}}
|
||||
>
|
||||
<View>
|
||||
<Text style={styles.title}>Alors on danse</Text>
|
||||
<Text style={styles.subTitle}>Stromae</Text>
|
||||
</View>
|
||||
<View
|
||||
<>
|
||||
<Pressable
|
||||
style={{
|
||||
...Style.containerRow,
|
||||
gap: 6,
|
||||
}}
|
||||
onPress={onPress}
|
||||
onLayout={(e) => setLayout(e.nativeEvent.layout)}
|
||||
>
|
||||
<Image
|
||||
source={img.placeholder2}
|
||||
style={{ ...size({ size: 60 }), borderRadius: 12 }}
|
||||
/>
|
||||
<View style={styles.blurContainer}>
|
||||
<BlurView
|
||||
intensity={20}
|
||||
style={{
|
||||
...Style.containerRow,
|
||||
gap: 12,
|
||||
flex: 1,
|
||||
...Style.containerSpaceBetween,
|
||||
paddingHorizontal: 8,
|
||||
}}
|
||||
>
|
||||
<Pressable onPress={() => setSelected(!selected)}>
|
||||
<Image
|
||||
source={selected ? icons.heart : icons.heartOutline}
|
||||
style={size({ size: 24 })}
|
||||
resizeMode="contain"
|
||||
/>
|
||||
</Pressable>
|
||||
<Pressable onPress={onPressMore}>
|
||||
<Image source={icons.more} />
|
||||
</Pressable>
|
||||
</View>
|
||||
</BlurView>
|
||||
</View>
|
||||
</Pressable>
|
||||
<View>
|
||||
<Text style={styles.title}>Alors on danse</Text>
|
||||
<Text style={styles.subTitle}>Stromae</Text>
|
||||
</View>
|
||||
<View
|
||||
style={{
|
||||
...Style.containerRow,
|
||||
gap: 12,
|
||||
}}
|
||||
>
|
||||
<Pressable onPress={() => setSelected(!selected)}>
|
||||
<Image
|
||||
source={selected ? icons.heart : icons.heartOutline}
|
||||
style={size({ size: 24 })}
|
||||
resizeMode="contain"
|
||||
/>
|
||||
</Pressable>
|
||||
<Pressable onPress={onPressMenu}>
|
||||
<Image source={icons.more} />
|
||||
</Pressable>
|
||||
</View>
|
||||
</BlurView>
|
||||
</View>
|
||||
</Pressable>
|
||||
{/* {open && (
|
||||
<View
|
||||
style={{
|
||||
width: 100,
|
||||
height: 50,
|
||||
backgroundColor: "red",
|
||||
position: "absolute",
|
||||
right: 0,
|
||||
top: menuPos,
|
||||
zIndex: 2,
|
||||
}}
|
||||
/>
|
||||
)} */}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -76,4 +106,7 @@ const styles = StyleSheet.create({
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
},
|
||||
filterContainer: {
|
||||
backgroundColor: Palette.tran,
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,92 +0,0 @@
|
||||
import React, { useEffect } from "reactn";
|
||||
import { Text, View, FlatList } from "react-native";
|
||||
import { useDataFromRef } from "react-native-minuit/src/hooks";
|
||||
import moment from "moment";
|
||||
import { Motion } from "@legendapp/motion";
|
||||
|
||||
import Page from "../layouts/Page";
|
||||
|
||||
import { Fonts, Style } from "../styles";
|
||||
import { notificationsRef } from "../config/firebase";
|
||||
|
||||
import { LoaderIndicator } from "../providers/LoadingProvider";
|
||||
|
||||
export default (props) => {
|
||||
const baseNotificationRef = notificationsRef;
|
||||
|
||||
useEffect(() => {
|
||||
markAsRead();
|
||||
}, []);
|
||||
|
||||
const markAsRead = async () => {
|
||||
try {
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
const {
|
||||
data: notificationList,
|
||||
loading,
|
||||
loadMore,
|
||||
} = useDataFromRef({
|
||||
ref: baseNotificationRef.orderBy("timestamp", "desc"),
|
||||
usePagination: true,
|
||||
batchSize: 40,
|
||||
documentID: "notificationID",
|
||||
});
|
||||
|
||||
return (
|
||||
<Page headerType="NAVIGATE" title="Notifications">
|
||||
<FlatList
|
||||
removeClippedSubviews={true}
|
||||
estimatedItemSize={100}
|
||||
showsVerticalScrollIndicator={false}
|
||||
data={notificationList}
|
||||
renderItem={({ item, index }) => {
|
||||
const { title = "", timestamp } = item;
|
||||
|
||||
const randomDuration = Math.floor(Math.random() * 1000) + 500;
|
||||
|
||||
return (
|
||||
<Motion.Pressable
|
||||
key={index}
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{
|
||||
opacity: {
|
||||
type: "tween",
|
||||
duration: randomDuration,
|
||||
},
|
||||
}}
|
||||
style={Style.containerSpaceBetween}
|
||||
onPress={() => {}}
|
||||
>
|
||||
<View style={Style.containerRow}>
|
||||
<Text
|
||||
numberOfLines={2}
|
||||
style={Fonts({ style: { width: "100%" } })}
|
||||
>
|
||||
{title}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<Text style={Fonts({ style: { opacity: 0.5 } })}>
|
||||
{moment(timestamp.toDate()).format("[Le] DD/MM [à] HH:mm")}
|
||||
</Text>
|
||||
</Motion.Pressable>
|
||||
);
|
||||
}}
|
||||
keyExtractor={(item) =>
|
||||
`Notifications_${item.notificationID}_${item.projectID}`
|
||||
}
|
||||
ItemSeparatorComponent={() => (
|
||||
<View style={{ ...Style.separatorHorizontal }} />
|
||||
)}
|
||||
ListFooterComponent={loading ? <LoaderIndicator /> : null}
|
||||
onEndReached={loadMore}
|
||||
onEndReachedThreshold={0.5}
|
||||
/>
|
||||
</Page>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,49 @@
|
||||
import { View } from "react-native";
|
||||
import React from "react";
|
||||
import Page from "../../layouts/Page";
|
||||
import { background } from "../../assets";
|
||||
import { gutters, Palette } from "../../styles";
|
||||
import { responsiveHeight } from "react-native-responsive-dimensions";
|
||||
import { BlurView } from "expo-blur";
|
||||
import EditInput from "./components/EditInput";
|
||||
import GradientButton from "../../components/GradientButton";
|
||||
|
||||
const ChangeEmailAddress = () => {
|
||||
return (
|
||||
<Page
|
||||
headerType="NAVIGATE"
|
||||
title="Paramètres"
|
||||
backgroundImg={background.profileBG}
|
||||
contentContainerStyle={{
|
||||
paddingBottom: gutters * 4,
|
||||
}}
|
||||
containerStyle={{
|
||||
backgroundColor: "#0000004D",
|
||||
}}
|
||||
>
|
||||
<View style={{ flex: 1, marginTop: responsiveHeight(2) }}>
|
||||
<BlurView
|
||||
intensity={20}
|
||||
style={{
|
||||
paddingHorizontal: 20,
|
||||
paddingVertical: 23,
|
||||
borderRadius: 20,
|
||||
overflow: "hidden",
|
||||
backgroundColor: Palette.glass,
|
||||
}}
|
||||
>
|
||||
<EditInput placeholder="Adresse mail" label="Adresse mail" />
|
||||
</BlurView>
|
||||
</View>
|
||||
<GradientButton
|
||||
title="Enregistrer les modifications"
|
||||
containerStyle={{
|
||||
width: "80%",
|
||||
alignSelf: "center",
|
||||
}}
|
||||
/>
|
||||
</Page>
|
||||
);
|
||||
};
|
||||
|
||||
export default ChangeEmailAddress;
|
||||
@@ -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 { gutters, Palette } from "../../styles";
|
||||
import { responsiveHeight } from "react-native-responsive-dimensions";
|
||||
import { BlurView } from "expo-blur";
|
||||
import EditInput from "./components/EditInput";
|
||||
import GradientButton from "../../components/GradientButton";
|
||||
import { FONT_FAMILY } from "../../styles/Fonts";
|
||||
|
||||
const ChangePassword = () => {
|
||||
return (
|
||||
<Page
|
||||
headerType="NAVIGATE"
|
||||
title="Paramètres"
|
||||
backgroundImg={background.profileBG}
|
||||
contentContainerStyle={{
|
||||
paddingBottom: gutters * 4,
|
||||
}}
|
||||
containerStyle={{
|
||||
backgroundColor: "#0000004D",
|
||||
}}
|
||||
>
|
||||
<View style={{ flex: 1, marginTop: responsiveHeight(2) }}>
|
||||
<BlurView
|
||||
intensity={20}
|
||||
style={{
|
||||
paddingHorizontal: 20,
|
||||
paddingVertical: 16,
|
||||
borderRadius: 20,
|
||||
overflow: "hidden",
|
||||
backgroundColor: Palette.glass,
|
||||
gap: 4,
|
||||
}}
|
||||
>
|
||||
<EditInput
|
||||
placeholder="Mot de passe"
|
||||
label="Mot de passe"
|
||||
type="password"
|
||||
/>
|
||||
<Pressable>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 12,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.HelveticaNeueRegular,
|
||||
}}
|
||||
>
|
||||
Mot de passe oublié?
|
||||
</Text>
|
||||
</Pressable>
|
||||
</BlurView>
|
||||
</View>
|
||||
<GradientButton
|
||||
title="Enregistrer les modifications"
|
||||
containerStyle={{
|
||||
width: "80%",
|
||||
alignSelf: "center",
|
||||
}}
|
||||
/>
|
||||
</Page>
|
||||
);
|
||||
};
|
||||
|
||||
export default ChangePassword;
|
||||
@@ -0,0 +1,72 @@
|
||||
import { View, Text, Image, TextInput } from "react-native";
|
||||
import React from "react";
|
||||
import Page from "../../layouts/Page";
|
||||
import { background, img } from "../../assets";
|
||||
import { gutters, Palette } from "../../styles";
|
||||
import { BlurView } from "expo-blur";
|
||||
import Style, { size } from "../../styles/Style";
|
||||
import { FONT_FAMILY } from "../../styles/Fonts";
|
||||
import GradientButton from "../../components/GradientButton";
|
||||
import { responsiveHeight } from "react-native-responsive-dimensions";
|
||||
import { goBack } from "../../navigation/NavigationService";
|
||||
import EditInput from "./components/EditInput";
|
||||
|
||||
const EditProfile = () => {
|
||||
return (
|
||||
<Page
|
||||
headerType="NAVIGATE"
|
||||
backgroundImg={background.profileBG}
|
||||
contentContainerStyle={{
|
||||
paddingBottom: gutters * 2,
|
||||
}}
|
||||
containerStyle={{
|
||||
backgroundColor: "#0000004D",
|
||||
}}
|
||||
>
|
||||
<View style={{ flex: 1, marginTop: responsiveHeight(2) }}>
|
||||
<BlurView
|
||||
intensity={20}
|
||||
style={{
|
||||
paddingVertical: 14,
|
||||
backgroundColor: Palette.glass,
|
||||
paddingHorizontal: 20,
|
||||
borderRadius: 20,
|
||||
overflow: "hidden",
|
||||
gap: 24,
|
||||
}}
|
||||
>
|
||||
<View style={{ alignItems: "center" }}>
|
||||
<Image
|
||||
source={img.profile}
|
||||
style={{
|
||||
...size({ size: 108 }),
|
||||
borderRadius: 100,
|
||||
}}
|
||||
/>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 14,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
}}
|
||||
>
|
||||
Modifier la photo
|
||||
</Text>
|
||||
</View>
|
||||
<EditInput label="Pseudo" placeholder="Pseudo" />
|
||||
|
||||
<GradientButton
|
||||
title="Enregistrer les modifications"
|
||||
containerStyle={{
|
||||
width: "80%",
|
||||
alignSelf: "center",
|
||||
}}
|
||||
onPress={goBack}
|
||||
/>
|
||||
</BlurView>
|
||||
</View>
|
||||
</Page>
|
||||
);
|
||||
};
|
||||
|
||||
export default EditProfile;
|
||||
@@ -0,0 +1,96 @@
|
||||
import { View, Text, Pressable } from "react-native";
|
||||
import React, { useState } from "react";
|
||||
import Page from "../../layouts/Page";
|
||||
import { background } from "../../assets";
|
||||
import { gutters, Palette } from "../../styles";
|
||||
import { responsiveHeight } from "react-native-responsive-dimensions";
|
||||
import { BlurView } from "expo-blur";
|
||||
import { FONT_FAMILY } from "../../styles/Fonts";
|
||||
import Style, { size } from "../../styles/Style";
|
||||
|
||||
const LANGUAGE = ["Anglais", "Français", "Chinois", "Japonais", "Coreen"];
|
||||
|
||||
const Language = () => {
|
||||
const [selected, setSelected] = useState("Français");
|
||||
|
||||
return (
|
||||
<Page
|
||||
headerType="NAVIGATE"
|
||||
title="Paramètres"
|
||||
backgroundImg={background.profileBG}
|
||||
contentContainerStyle={{
|
||||
paddingBottom: gutters * 4,
|
||||
}}
|
||||
containerStyle={{
|
||||
backgroundColor: "#0000004D",
|
||||
}}
|
||||
>
|
||||
<View style={{ flex: 1, marginTop: responsiveHeight(2) }}>
|
||||
<BlurView
|
||||
intensity={20}
|
||||
style={{
|
||||
paddingVertical: 10,
|
||||
paddingHorizontal: 20,
|
||||
backgroundColor: Palette.glass,
|
||||
gap: 10,
|
||||
borderRadius: 20,
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 20,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.HelveticaNeueMedium,
|
||||
}}
|
||||
>
|
||||
Langue
|
||||
</Text>
|
||||
<View style={{ gap: 12 }}>
|
||||
{LANGUAGE.map((item, index) => (
|
||||
<Pressable
|
||||
key={index}
|
||||
style={{
|
||||
...Style.containerRow,
|
||||
gap: 6,
|
||||
}}
|
||||
onPress={() => setSelected(item)}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
...size({ size: 17 }),
|
||||
...Style.containerCenter,
|
||||
borderWidth: 1,
|
||||
borderRadius: 100,
|
||||
borderColor: Palette.white,
|
||||
}}
|
||||
>
|
||||
{selected === item && (
|
||||
<View
|
||||
style={{
|
||||
...size({ size: 9 }),
|
||||
borderRadius: 100,
|
||||
backgroundColor: Palette.white,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 16,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.HelveticaNeueRegular,
|
||||
}}
|
||||
>
|
||||
{item}
|
||||
</Text>
|
||||
</Pressable>
|
||||
))}
|
||||
</View>
|
||||
</BlurView>
|
||||
</View>
|
||||
</Page>
|
||||
);
|
||||
};
|
||||
|
||||
export default Language;
|
||||
@@ -0,0 +1,65 @@
|
||||
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 { responsiveHeight } from "react-native-responsive-dimensions";
|
||||
import { BlurView } from "expo-blur";
|
||||
import Switch from "../../components/Switch";
|
||||
import { useState } from "react";
|
||||
import { FONT_FAMILY } from "../../styles/Fonts";
|
||||
|
||||
export default (props) => {
|
||||
const [isSwitch, setIsSwitch] = useState(false);
|
||||
|
||||
return (
|
||||
<Page
|
||||
headerType="NAVIGATE"
|
||||
title="Paramètres"
|
||||
backgroundImg={background.profileBG}
|
||||
contentContainerStyle={{
|
||||
paddingBottom: gutters * 4,
|
||||
}}
|
||||
containerStyle={{
|
||||
backgroundColor: "#0000004D",
|
||||
}}
|
||||
>
|
||||
<View style={{ flex: 1, marginTop: responsiveHeight(2) }}>
|
||||
<BlurView
|
||||
intensity={20}
|
||||
style={{
|
||||
gap: 12,
|
||||
paddingVertical: 15,
|
||||
paddingHorizontal: 20,
|
||||
borderRadius: 20,
|
||||
overflow: "hidden",
|
||||
backgroundColor: Palette.glass,
|
||||
}}
|
||||
>
|
||||
<View style={Style.containerSpaceBetween}>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 20,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.HelveticaNeueMedium,
|
||||
}}
|
||||
>
|
||||
Notifications
|
||||
</Text>
|
||||
<Switch value={isSwitch} setValue={setIsSwitch} />
|
||||
</View>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 12,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
}}
|
||||
>
|
||||
Nous t’encourageons à activer les notifications pour découvrir les
|
||||
derniers classements, les nouveaux sons et les meilleurs playbacks.
|
||||
</Text>
|
||||
</BlurView>
|
||||
</View>
|
||||
</Page>
|
||||
);
|
||||
};
|
||||
@@ -1,12 +1,229 @@
|
||||
import { View, Text } from "react-native";
|
||||
import React from "react";
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
Pressable,
|
||||
Image,
|
||||
FlatList,
|
||||
StyleSheet,
|
||||
} from "react-native";
|
||||
import React, { useState } from "react";
|
||||
import Page from "../../layouts/Page";
|
||||
import { background, icons, img } from "../../assets";
|
||||
import { BlurView } from "expo-blur";
|
||||
import { responsiveHeight } from "react-native-responsive-dimensions";
|
||||
import Style, { gutters, size } from "../../styles/Style";
|
||||
import { Palette } from "../../styles";
|
||||
import { FONT_FAMILY } from "../../styles/Fonts";
|
||||
import GradientButton from "../../components/GradientButton";
|
||||
import BorderGradient from "../../components/BorderGradient/BorderGradient";
|
||||
import MusicCard from "../Library/components/MusicCard";
|
||||
import { SheetManager } from "react-native-actions-sheet";
|
||||
import { navigate } from "../../navigation/NavigationService";
|
||||
import { Routes } from "../../navigation";
|
||||
|
||||
const Profile = () => {
|
||||
const [selected, setSelected] = useState("Chansons");
|
||||
|
||||
const onPressMenu = (item) => {
|
||||
setSelected(item);
|
||||
};
|
||||
|
||||
return (
|
||||
<View>
|
||||
<Text>Profile</Text>
|
||||
</View>
|
||||
<Page
|
||||
backgroundImg={background.profileBG}
|
||||
headerType="NAVIGATE"
|
||||
hideBackButton
|
||||
contentContainerStyle={{
|
||||
paddingBottom: gutters * 2,
|
||||
}}
|
||||
containerStyle={{
|
||||
backgroundColor: "#0000004D",
|
||||
}}
|
||||
rightComponent={() => (
|
||||
<Pressable onPress={() => SheetManager.show("ProfileSettings")}>
|
||||
<Image source={icons.more} />
|
||||
</Pressable>
|
||||
)}
|
||||
>
|
||||
<View style={{ flex: 1, marginTop: responsiveHeight(2), gap: 20 }}>
|
||||
<View style={{ borderRadius: 20, overflow: "hidden" }}>
|
||||
<BlurView
|
||||
intensity={20}
|
||||
style={{
|
||||
paddingVertical: 14,
|
||||
backgroundColor: Palette.glass,
|
||||
paddingHorizontal: 20,
|
||||
}}
|
||||
>
|
||||
<View style={{ alignItems: "center" }}>
|
||||
<Image
|
||||
source={img.profile}
|
||||
style={{
|
||||
...size({ size: 108 }),
|
||||
borderRadius: 100,
|
||||
}}
|
||||
/>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 22,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterSemiBold,
|
||||
}}
|
||||
>
|
||||
elia.mrn
|
||||
</Text>
|
||||
</View>
|
||||
<View style={{ ...Style.containerRow, gap: 10, marginTop: 10 }}>
|
||||
<View style={{ flex: 1, alignItems: "center" }}>
|
||||
<Text style={styles.value}>0</Text>
|
||||
<Text style={styles.label}>playbacks</Text>
|
||||
</View>
|
||||
<View style={{ flex: 1, alignItems: "center" }}>
|
||||
<Text style={styles.value}>880</Text>
|
||||
<Text style={styles.label}>abonnés</Text>
|
||||
</View>
|
||||
<View style={{ flex: 1, alignItems: "center" }}>
|
||||
<Text style={styles.value}>6</Text>
|
||||
<Text style={styles.label}>abonnements</Text>
|
||||
</View>
|
||||
</View>
|
||||
<GradientButton
|
||||
title="Suivre"
|
||||
containerStyle={{
|
||||
width: "80%",
|
||||
alignSelf: "center",
|
||||
marginTop: 18,
|
||||
}}
|
||||
/>
|
||||
</BlurView>
|
||||
</View>
|
||||
<View
|
||||
style={{
|
||||
...Style.containerRow,
|
||||
gap: 6,
|
||||
}}
|
||||
>
|
||||
{["Chansons", "Playbacks", "Clips"].map((item, index) => (
|
||||
<Pressable
|
||||
key={index}
|
||||
onPress={() => onPressMenu(item)}
|
||||
style={{ flex: 1 }}
|
||||
>
|
||||
<BorderGradient
|
||||
gradientProps={{
|
||||
colors:
|
||||
selected === item
|
||||
? ["#FFFFFF00", "#FFFFFF"]
|
||||
: [Palette.tran, Palette.tran],
|
||||
locations: [0, 1],
|
||||
start: { x: 0, y: 0 },
|
||||
end: { x: 1, y: 0 },
|
||||
}}
|
||||
style={styles.borderGradient}
|
||||
/>
|
||||
<View style={styles.blurContainer}>
|
||||
<BlurView intensity={20} style={styles.blurView}>
|
||||
<Text style={styles.menu}>{item}</Text>
|
||||
</BlurView>
|
||||
</View>
|
||||
</Pressable>
|
||||
))}
|
||||
</View>
|
||||
{selected === "Playbacks" && (
|
||||
<View style={{ flex: 1 }}>
|
||||
<FlatList
|
||||
data={Array.from({ length: 6 })}
|
||||
numColumns={3}
|
||||
contentContainerStyle={{ gap: 14 }}
|
||||
columnWrapperStyle={{ gap: 10 }}
|
||||
renderItem={() => (
|
||||
<Pressable
|
||||
style={{ flex: 1, gap: 6 }}
|
||||
onPress={() => navigate(Routes.Reels)}
|
||||
>
|
||||
<Image
|
||||
source={img.placeholder3}
|
||||
style={{
|
||||
width: "100%",
|
||||
height: 147,
|
||||
borderRadius: 10,
|
||||
}}
|
||||
/>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 12,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
}}
|
||||
>
|
||||
Pour Lili
|
||||
</Text>
|
||||
</Pressable>
|
||||
)}
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
{selected === "Chansons" && (
|
||||
<View style={{ flex: 1 }}>
|
||||
<FlatList
|
||||
data={Array.from({ length: 3 })}
|
||||
contentContainerStyle={{
|
||||
gap: 10,
|
||||
}}
|
||||
renderItem={() => (
|
||||
<MusicCard
|
||||
onPress={() =>
|
||||
navigate(Routes.MusicDetails, {
|
||||
action: "userProfile",
|
||||
})
|
||||
}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</Page>
|
||||
);
|
||||
};
|
||||
|
||||
export default Profile;
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
value: {
|
||||
fontSize: 16,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
},
|
||||
label: {
|
||||
fontSize: 12,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
},
|
||||
menu: {
|
||||
fontSize: 12,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
},
|
||||
borderGradient: {
|
||||
borderWidth: 1,
|
||||
borderRadius: 10,
|
||||
height: 33,
|
||||
position: "absolute",
|
||||
zIndex: 1,
|
||||
width: "100%",
|
||||
},
|
||||
blurContainer: {
|
||||
height: 33,
|
||||
zIndex: -1,
|
||||
borderRadius: 10,
|
||||
overflow: "hidden",
|
||||
backgroundColor: Palette.glass,
|
||||
},
|
||||
blurView: {
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
paddingHorizontal: 10,
|
||||
...Style.containerCenter,
|
||||
},
|
||||
});
|
||||
|
||||
@@ -0,0 +1,85 @@
|
||||
import { View, Text, Pressable, Image } from "react-native";
|
||||
import React, { useState } from "react";
|
||||
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
||||
import { icons, img } from "../../assets";
|
||||
import Style, { gutters, size } from "../../styles/Style";
|
||||
import { Palette } from "../../styles";
|
||||
import { FONT_FAMILY } from "../../styles/Fonts";
|
||||
import { goBack } from "../../navigation/NavigationService";
|
||||
import { SheetManager } from "react-native-actions-sheet";
|
||||
|
||||
const Reels = () => {
|
||||
const { top } = useSafeAreaInsets();
|
||||
const [isFav, setIsFav] = useState(false);
|
||||
|
||||
return (
|
||||
<View style={{ flex: 1 }}>
|
||||
<View
|
||||
style={{
|
||||
...Style.containerRow,
|
||||
position: "absolute",
|
||||
top: top + 10,
|
||||
zIndex: 1,
|
||||
paddingHorizontal: gutters,
|
||||
}}
|
||||
>
|
||||
<View style={{ flex: 1 }}>
|
||||
<Pressable onPress={goBack}>
|
||||
<Image
|
||||
source={icons.chevronDown}
|
||||
style={{
|
||||
...size({ size: 15 }),
|
||||
transform: [{ rotate: "90deg" }],
|
||||
}}
|
||||
resizeMode="contain"
|
||||
/>
|
||||
</Pressable>
|
||||
</View>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 16,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
}}
|
||||
>
|
||||
Mon Profile
|
||||
</Text>
|
||||
<View style={{ flex: 1, alignItems: "flex-end" }}>
|
||||
<Pressable onPress={() => SheetManager.show("DeletePlayback")}>
|
||||
<Image source={icons.trash} />
|
||||
</Pressable>
|
||||
</View>
|
||||
</View>
|
||||
<Image
|
||||
source={img.placeholder3}
|
||||
style={{ width: "100%", height: "100%" }}
|
||||
/>
|
||||
<View
|
||||
style={{
|
||||
position: "absolute",
|
||||
zIndex: 1,
|
||||
bottom: gutters * 2,
|
||||
right: 33,
|
||||
gap: 20,
|
||||
}}
|
||||
>
|
||||
<Pressable onPress={() => setIsFav(!isFav)}>
|
||||
<Image
|
||||
source={isFav ? icons.heart : icons.heartOutline}
|
||||
style={size({ size: 26 })}
|
||||
resizeMode="contain"
|
||||
/>
|
||||
</Pressable>
|
||||
<Pressable>
|
||||
<Image
|
||||
source={icons.share}
|
||||
style={size({ size: 26 })}
|
||||
resizeMode="contain"
|
||||
/>
|
||||
</Pressable>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export default Reels;
|
||||
@@ -0,0 +1,82 @@
|
||||
import { View, Text } from "react-native";
|
||||
import React from "react";
|
||||
import Page from "../../layouts/Page";
|
||||
import { background } from "../../assets";
|
||||
import { gutters, Palette } from "../../styles";
|
||||
import { responsiveHeight } from "react-native-responsive-dimensions";
|
||||
import BlurItemButton from "../../components/BlurItemButton";
|
||||
import BorderGradientButton from "../../components/BorderGradientButton";
|
||||
import { SheetManager } from "react-native-actions-sheet";
|
||||
import { navigate } from "../../navigation/NavigationService";
|
||||
import { Routes } from "../../navigation";
|
||||
|
||||
const SETTINGS = [
|
||||
{
|
||||
title: "Adresse mail",
|
||||
action: () => {
|
||||
navigate(Routes.ChangeEmailAddress);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "Modifier mon mot de passe",
|
||||
action: () => {
|
||||
navigate(Routes.ChangePassword);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "Notifications",
|
||||
action: () => {
|
||||
navigate(Routes.Notifications);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "Langue",
|
||||
action: () => {
|
||||
navigate(Routes.Language);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "Gérer mon abonnement",
|
||||
action: () => {},
|
||||
},
|
||||
];
|
||||
|
||||
const Settings = () => {
|
||||
return (
|
||||
<Page
|
||||
headerType="NAVIGATION"
|
||||
title="Paramètres"
|
||||
backgroundImg={background.profileBG}
|
||||
contentContainerStyle={{
|
||||
paddingBottom: gutters * 2,
|
||||
}}
|
||||
containerStyle={{
|
||||
backgroundColor: "#0000004D",
|
||||
}}
|
||||
>
|
||||
<View style={{ flex: 1, marginTop: responsiveHeight(2) }}>
|
||||
<View style={{ flex: 1, gap: 10 }}>
|
||||
{SETTINGS.map((item, index) => (
|
||||
<BlurItemButton
|
||||
key={index}
|
||||
title={item.title}
|
||||
onPress={item.action}
|
||||
/>
|
||||
))}
|
||||
</View>
|
||||
<View style={{ width: "80%", gap: 5, alignSelf: "center" }}>
|
||||
<BorderGradientButton title="Déconnexion" />
|
||||
<BorderGradientButton
|
||||
title="Supprimer mon profil"
|
||||
titleStyle={{
|
||||
color: Palette.red,
|
||||
}}
|
||||
onPress={() => SheetManager.show("DeleteAccount")}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</Page>
|
||||
);
|
||||
};
|
||||
|
||||
export default Settings;
|
||||
@@ -0,0 +1,72 @@
|
||||
import { View, Text, TextInput, Image, Pressable } from "react-native";
|
||||
import React, { useState } from "react";
|
||||
import { Palette, Style } from "../../../styles";
|
||||
import { FONT_FAMILY } from "../../../styles/Fonts";
|
||||
import { BlurView } from "expo-blur";
|
||||
import { icons } from "../../../assets";
|
||||
|
||||
const EditInput = ({ label = "", placeholder = "", type = "default" }) => {
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
|
||||
return (
|
||||
<View style={{ gap: 4 }}>
|
||||
<View
|
||||
style={{
|
||||
...Style.containerSpaceBetween,
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 16,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
}}
|
||||
>
|
||||
{label}
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 12,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
}}
|
||||
>
|
||||
Modifier
|
||||
</Text>
|
||||
</View>
|
||||
<BlurView
|
||||
intensity={20}
|
||||
style={{
|
||||
paddingHorizontal: 12,
|
||||
borderRadius: 12,
|
||||
backgroundColor: Palette.glass,
|
||||
overflow: "hidden",
|
||||
height: 52,
|
||||
...Style.containerRow,
|
||||
}}
|
||||
>
|
||||
<TextInput
|
||||
placeholder={placeholder}
|
||||
placeholderTextColor={Palette.gray}
|
||||
style={{
|
||||
fontSize: 16,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
flex: 1,
|
||||
}}
|
||||
keyboardType={type}
|
||||
{...(type === "password" && {
|
||||
secureTextEntry: !showPassword,
|
||||
})}
|
||||
/>
|
||||
{type === "password" && (
|
||||
<Pressable onPress={() => setShowPassword(!showPassword)}>
|
||||
<Image source={icons.eye} />
|
||||
</Pressable>
|
||||
)}
|
||||
</BlurView>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
export default EditInput;
|
||||
@@ -1,191 +0,0 @@
|
||||
import React, { useRef, useContext, useGlobal } from "reactn";
|
||||
import { Text, View } from "react-native";
|
||||
|
||||
import { WebViewContext } from "../providers/WebViewProvider";
|
||||
import { useUserData } from "../providers/UserDataProvider";
|
||||
|
||||
import Page from "../layouts/Page";
|
||||
|
||||
import { Routes } from "../navigation";
|
||||
import { responsiveHeight } from "../actions/responsiveSizes.js";
|
||||
|
||||
import ItemRowList from "../components/ItemRowList";
|
||||
import BottomSheetContainer from "../components/BottomSheetContainer.js";
|
||||
import IconSelector from "../components/IconSelector.js";
|
||||
|
||||
import useLayoutType from "../hooks/useLayoutType";
|
||||
|
||||
import { Fonts, Palette, Style, gutters } from "../styles";
|
||||
import { icons } from "../assets";
|
||||
|
||||
import { onStoreReview, openLinkInBrowser } from "../helpers";
|
||||
import {
|
||||
agencyWhatsAppNumber,
|
||||
calendlyUrl,
|
||||
instagramUrl,
|
||||
termsOfSalesUrl,
|
||||
} from "../data";
|
||||
import IconContainer from "../components/IconContainer.js";
|
||||
|
||||
export default ({ navigation }) => {
|
||||
const { isDesktop, isWeb, isNative } = useLayoutType();
|
||||
const { onSignOut } = useUserData();
|
||||
|
||||
const [currentProjectID] = useGlobal("currentProjectID");
|
||||
|
||||
const { setWebViewUrl } = useContext(WebViewContext);
|
||||
|
||||
const appIconBottomSheetRef = useRef(null);
|
||||
|
||||
const settingsList = [
|
||||
{
|
||||
sectionTitle: "Projet",
|
||||
icon: icons.tools,
|
||||
optionList: [
|
||||
{
|
||||
title: "Paramètres",
|
||||
action: () => navigation.navigate(Routes.ProjectSettings),
|
||||
},
|
||||
],
|
||||
condition: currentProjectID,
|
||||
},
|
||||
{
|
||||
sectionTitle: "Compte",
|
||||
icon: icons.user,
|
||||
optionList: [
|
||||
{
|
||||
title: "Paramètres du compte",
|
||||
action: () => navigation.navigate(Routes.AccountSettings),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
sectionTitle: "Support",
|
||||
icon: icons.support,
|
||||
optionList: [
|
||||
{
|
||||
title: "Prendre rendez-vous",
|
||||
action: () => setWebViewUrl(calendlyUrl),
|
||||
},
|
||||
{
|
||||
title: "Nous suivre sur Instagram",
|
||||
action: () => setWebViewUrl(instagramUrl),
|
||||
},
|
||||
{
|
||||
title: "Nous contacter sur WhatsApp",
|
||||
action: () => {
|
||||
openLinkInBrowser({
|
||||
url: `http://api.whatsapp.com/send/?phone=${agencyWhatsAppNumber}&text&type=phone_number`,
|
||||
});
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "Changer l'icône de l'application",
|
||||
action: () => {
|
||||
appIconBottomSheetRef.current?.expand();
|
||||
},
|
||||
condition: isNative,
|
||||
},
|
||||
{
|
||||
title: "Noter l'application",
|
||||
action: () => {
|
||||
onStoreReview();
|
||||
},
|
||||
condition: !isWeb,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
sectionTitle: "Légal",
|
||||
icon: icons.law,
|
||||
optionList: [
|
||||
{
|
||||
title: "Conditions générales d'utilisation",
|
||||
action: () => navigation.navigate(Routes.TermsOfUse),
|
||||
},
|
||||
{
|
||||
title: "Conditions générales de vente",
|
||||
action: () => setWebViewUrl(termsOfSalesUrl),
|
||||
},
|
||||
{
|
||||
title: "Politique de confidentialité",
|
||||
action: () => navigation.navigate(Routes.PrivacyPolicy),
|
||||
},
|
||||
{
|
||||
title: "Se déconnecter",
|
||||
action: async () => {
|
||||
await onSignOut();
|
||||
},
|
||||
textStyle: { color: Palette.red },
|
||||
addMarginTopFromPrevious: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
.filter(({ condition = true }) => condition)
|
||||
.filter(
|
||||
({ optionList }) =>
|
||||
optionList.filter(({ condition }) => !condition || condition).length > 0
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Page
|
||||
headerType={isDesktop ? "NONE" : "BASE"}
|
||||
scrollEnabled
|
||||
pageTitle="Paramètres"
|
||||
contentContainerStyle={{
|
||||
paddingTop: gutters / 2,
|
||||
paddingBottom: responsiveHeight(50),
|
||||
}}
|
||||
>
|
||||
{settingsList.map(
|
||||
({ icon, sectionTitle = "", optionList = [] }, index) => (
|
||||
<View
|
||||
key={index}
|
||||
style={{ ...Style.containerItem, marginBottom: gutters / 2 }}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
...Style.containerRow,
|
||||
}}
|
||||
>
|
||||
<IconContainer icon={icon} />
|
||||
|
||||
<Text
|
||||
style={Fonts({
|
||||
type: "title",
|
||||
color: Palette.white,
|
||||
style: {},
|
||||
})}
|
||||
>
|
||||
{sectionTitle}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{optionList
|
||||
.filter(({ condition = true }) => condition)
|
||||
.map((item, index) => (
|
||||
<ItemRowList
|
||||
key={index}
|
||||
{...item}
|
||||
containerStyle={{}}
|
||||
separatorPosition="top"
|
||||
/>
|
||||
))}
|
||||
</View>
|
||||
)
|
||||
)}
|
||||
</Page>
|
||||
|
||||
<BottomSheetContainer
|
||||
bottomSheetRef={appIconBottomSheetRef}
|
||||
index={-1}
|
||||
enablePanDownToClose
|
||||
snapPoints={["80%"]}
|
||||
>
|
||||
<IconSelector onClose={() => appIconBottomSheetRef.current?.close()} />
|
||||
</BottomSheetContainer>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -19,7 +19,7 @@ const Palette = {
|
||||
firebaseYellow: "#FFCA28",
|
||||
transparentFirebaseYellow: "rgba(255, 202, 40, 0.1)",
|
||||
|
||||
red: "#E31A1A",
|
||||
red: "#FF5558",
|
||||
transparentRed: "rgba(227, 26, 26, 0.1)",
|
||||
|
||||
white: "#ffffff",
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
import { registerSheet } from "react-native-actions-sheet";
|
||||
import DeleteModal from "../components/modal/DeleteModal";
|
||||
import ProfileSettingsModal from "../components/modal/ProfileSettingsModal";
|
||||
import DeleteAccountModal from "../components/modal/DeleteAccountModal";
|
||||
import DeletePlaybackModal from "../components/modal/DeletePlaybackModal";
|
||||
import DeleteAudioModal from "../components/modal/DeleteAudioModal";
|
||||
|
||||
registerSheet("Delete", DeleteModal);
|
||||
registerSheet("ProfileSettings", ProfileSettingsModal);
|
||||
registerSheet("DeleteAccount", DeleteAccountModal);
|
||||
registerSheet("DeletePlayback", DeletePlaybackModal);
|
||||
registerSheet("DeleteAudio", DeleteAudioModal);
|
||||
|
||||
export {};
|
||||
@@ -2621,6 +2621,11 @@ acorn@^8.8.2:
|
||||
resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.14.0.tgz#063e2c70cac5fb4f6467f0b11152e04c682795b0"
|
||||
integrity sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==
|
||||
|
||||
add@^2.0.6:
|
||||
version "2.0.6"
|
||||
resolved "https://registry.yarnpkg.com/add/-/add-2.0.6.tgz#248f0a9f6e5a528ef2295dbeec30532130ae2235"
|
||||
integrity sha512-j5QzrmsokwWWp6kUcJQySpbG+xfOBqqKnup3OIk1pz+kB/80SLorZ9V8zHFLO92Lcd+hbvq8bT+zOGoPkmBV0Q==
|
||||
|
||||
aggregate-error@^3.0.0:
|
||||
version "3.1.0"
|
||||
resolved "https://registry.yarnpkg.com/aggregate-error/-/aggregate-error-3.1.0.tgz#92670ff50f5359bdb7a3e0d40d0ec30c5737687a"
|
||||
@@ -7297,6 +7302,11 @@ react-is@^18.0.0:
|
||||
resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e"
|
||||
integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
|
||||
|
||||
react-native-actions-sheet@^0.9.7:
|
||||
version "0.9.7"
|
||||
resolved "https://registry.yarnpkg.com/react-native-actions-sheet/-/react-native-actions-sheet-0.9.7.tgz#43ff2d9252f7af2da6dc051be5a5c375a844cdfb"
|
||||
integrity sha512-rjUwxUr5dxbdSLDtLDUFAdSlFxpNSpJsbXLhHkBzEBMxEMPUhRT3zqbvKqsPj0JUkjwuRligxrhbIJZkg/6ZDw==
|
||||
|
||||
react-native-calendars@^1.1300.0:
|
||||
version "1.1307.0"
|
||||
resolved "https://registry.yarnpkg.com/react-native-calendars/-/react-native-calendars-1.1307.0.tgz#2cb8c5abd322037e9b3ef5605afa86f25347068f"
|
||||
@@ -9118,6 +9128,11 @@ yargs@^17.6.2, yargs@^17.7.2:
|
||||
y18n "^5.0.5"
|
||||
yargs-parser "^21.1.1"
|
||||
|
||||
yarn@^1.22.22:
|
||||
version "1.22.22"
|
||||
resolved "https://registry.yarnpkg.com/yarn/-/yarn-1.22.22.tgz#ac34549e6aa8e7ead463a7407e1c7390f61a6610"
|
||||
integrity sha512-prL3kGtyG7o9Z9Sv8IPfBNrWTDmXB4Qbes8A9rEzt6wkJV8mUvoirjU0Mp3GGAU06Y0XQyA3/2/RQFVuK7MTfg==
|
||||
|
||||
yauzl@^2.4.2:
|
||||
version "2.10.0"
|
||||
resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.10.0.tgz#c7eb17c93e112cb1086fa6d8e51fb0667b79a5f9"
|
||||
|
||||
Reference in New Issue
Block a user