kennethnym/doors-wallpaper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial ui

Browse Source
This commit is contained in:
Kenneth
2024-09-24 23:40:27 +01:00
parent ff04f088ca
commit eef23656f9
10 changed files with 685 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
.gitignore vendored
View File

@@ -12,3 +12,9 @@ web-build/
# macOS # macOS
.DS_Store .DS_Store
# @generated expo-cli sync-2b81b286409207a5da26e14c78851eb30d8ccbdb
# The following patterns were generated by expo-cli
expo-env.d.ts
# @end expo-cli

51
README.md
View File

@@ -1,50 +1,7 @@
# Welcome to your Expo app 👋 # doors
This is an [Expo](https://expo.dev) project created with [`create-expo-app`](https://www.npmjs.com/package/create-expo-app). doors is a free open-source alternative to MKBHD's [panels.art] wallpaper app.
## Get started ## wallpaper request
1. Install dependencies please file an issue if you wish to upload your own wallpapers to the app. all wallpapers are hosted on cloudinary.
```bash
npm install
```
2. Start the app
```bash
npx expo start
```
In the output, you'll find options to open the app in a
- [development build](https://docs.expo.dev/develop/development-builds/introduction/)
- [Android emulator](https://docs.expo.dev/workflow/android-studio-emulator/)
- [iOS simulator](https://docs.expo.dev/workflow/ios-simulator/)
- [Expo Go](https://expo.dev/go), a limited sandbox for trying out app development with Expo
You can start developing by editing the files inside the **app** directory. This project uses [file-based routing](https://docs.expo.dev/router/introduction).
## Get a fresh project
When you're ready, run:
```bash
npm run reset-project
```
This command will move the starter code to the **app-example** directory and create a blank **app** directory where you can start developing.
## Learn more
To learn more about developing your project with Expo, look at the following resources:
- [Expo documentation](https://docs.expo.dev/): Learn fundamentals, or go into advanced topics with our [guides](https://docs.expo.dev/guides).
- [Learn Expo tutorial](https://docs.expo.dev/tutorial/introduction/): Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.
## Join the community
Join our community of developers creating universal apps.
- [Expo on GitHub](https://github.com/expo/expo): View our open source platform and contribute.
- [Discord community](https://chat.expo.dev): Chat with Expo users and ask questions.

71
app/(tabs)/_layout.tsx
View File

@@ -1,37 +1,44 @@
import { Tabs } from 'expo-router'; import { Tabs } from "expo-router";
import React from 'react'; import React from "react";
import { TabBarIcon } from '@/components/navigation/TabBarIcon'; import { TabBarIcon } from "@/components/navigation/TabBarIcon";
import { Colors } from '@/constants/Colors'; import { Colors } from "@/constants/Colors";
import { useColorScheme } from '@/hooks/useColorScheme'; import { useColorScheme } from "@/hooks/useColorScheme";
export default function TabLayout() { export default function TabLayout() {
const colorScheme = useColorScheme(); const colorScheme = useColorScheme();
return ( return (
<Tabs <Tabs
screenOptions={{ screenOptions={{
tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint, tabBarActiveTintColor: Colors[colorScheme ?? "light"].tint,
headerShown: false, headerShown: false,
}}> }}
<Tabs.Screen >
name="index" <Tabs.Screen
options={{ name="index"
title: 'Home', options={{
tabBarIcon: ({ color, focused }) => ( title: "Wallpaper",
<TabBarIcon name={focused ? 'home' : 'home-outline'} color={color} /> tabBarIcon: ({ color, focused }) => (
), <TabBarIcon
}} name={focused ? "albums" : "albums-outline"}
/> color={color}
<Tabs.Screen />
name="explore" ),
options={{ }}
title: 'Explore', />
tabBarIcon: ({ color, focused }) => ( <Tabs.Screen
<TabBarIcon name={focused ? 'code-slash' : 'code-slash-outline'} color={color} /> name="explore"
), options={{
}} title: "Explore",
/> tabBarIcon: ({ color, focused }) => (
</Tabs> <TabBarIcon
); name={focused ? "code-slash" : "code-slash-outline"}
color={color}
/>
),
}}
/>
</Tabs>
);
} }

211
app/(tabs)/index.tsx
View File

@@ -1,70 +1,155 @@
import { Image, StyleSheet, Platform } from 'react-native'; import {
View,
Image,
StyleSheet,
Platform,
Text,
TouchableOpacity,
} from "react-native";
import { HelloWave } from '@/components/HelloWave'; import { HelloWave } from "@/components/HelloWave";
import ParallaxScrollView from '@/components/ParallaxScrollView'; import ParallaxScrollView from "@/components/ParallaxScrollView";
import { ThemedText } from '@/components/ThemedText'; import { ThemedText } from "@/components/ThemedText";
import { ThemedView } from '@/components/ThemedView'; import { ThemedView } from "@/components/ThemedView";
import { useEffect, useState } from "react";
import { FAKE_DATA, type ImageAsset } from "@/cloudinary/cloudinary";
import { MasonryFlashList } from "@shopify/flash-list";
import { useRouter } from "expo-router";
import { useStore } from "@/store/store";
export default function HomeScreen() { export default function HomeScreen() {
return ( const router = useRouter();
<ParallaxScrollView const setSelectedWallpaper = useStore((store) => store.setSelectedWallpaper);
headerBackgroundColor={{ light: '#A1CEDC', dark: '#1D3D47' }} const [images, setImages] = useState<ImageAsset[] | null>(null);
headerImage={ const [isLoading, setIsLoading] = useState(false);
<Image
source={require('@/assets/images/partial-react-logo.png')} useEffect(() => {
style={styles.reactLogo} async function fetchWallpapers() {
/> setIsLoading(true);
}> const res = await fetch("http://localhost:8080/wallpapers");
<ThemedView style={styles.titleContainer}> const images: ImageAsset[] = await res.json();
<ThemedText type="title">Welcome!</ThemedText> setImages(images);
<HelloWave /> setIsLoading(false);
</ThemedView> }
<ThemedView style={styles.stepContainer}> fetchWallpapers();
<ThemedText type="subtitle">Step 1: Try it</ThemedText> }, []);
<ThemedText>
Edit <ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> to see changes. return (
Press{' '} <View style={{ flex: 1 }}>
<ThemedText type="defaultSemiBold"> <MasonryFlashList
{Platform.select({ ios: 'cmd + d', android: 'cmd + m' })} data={FAKE_DATA}
</ThemedText>{' '} numColumns={2}
to open developer tools. ListHeaderComponent={() => (
</ThemedText> <Text
</ThemedView> style={{
<ThemedView style={styles.stepContainer}> paddingHorizontal: 8,
<ThemedText type="subtitle">Step 2: Explore</ThemedText> paddingTop: 40,
<ThemedText> fontSize: 40,
Tap the Explore tab to learn more about what's included in this starter app. fontWeight: "bold",
</ThemedText> color: "white",
</ThemedView> }}
<ThemedView style={styles.stepContainer}> >
<ThemedText type="subtitle">Step 3: Get a fresh start</ThemedText> Wallpapers
<ThemedText> </Text>
When you're ready, run{' '} )}
<ThemedText type="defaultSemiBold">npm run reset-project</ThemedText> to get a fresh{' '} renderItem={({ item, target }) => (
<ThemedText type="defaultSemiBold">app</ThemedText> directory. This will move the current{' '} <View style={{ width: "100%", position: "relative" }}>
<ThemedText type="defaultSemiBold">app</ThemedText> to{' '} <TouchableOpacity
<ThemedText type="defaultSemiBold">app-example</ThemedText>. onPress={() => {
</ThemedText> setSelectedWallpaper(item);
</ThemedView> router.push("/wallpaper");
</ParallaxScrollView> }}
); >
<Image
style={{ width: "100%", height: 300, margin: 8 }}
source={{ uri: item.secure_url }}
/>
</TouchableOpacity>
<View
style={{
width: "100%",
backgroundColor: "rgba(0, 0, 0, 0.8)",
position: "absolute",
bottom: 0,
left: 0,
right: 0,
padding: 16,
}}
>
<Text style={{ color: "white" }}>
{item.public_id.replace("wallpaper/", "")}
</Text>
</View>
</View>
)}
estimatedItemSize={200}
/>
</View>
);
return (
<ParallaxScrollView
headerBackgroundColor={{ light: "#A1CEDC", dark: "#1D3D47" }}
headerImage={
<Image
source={require("@/assets/images/partial-react-logo.png")}
style={styles.reactLogo}
/>
}
>
<ThemedView style={styles.titleContainer}>
<ThemedText type="title">Welcome!</ThemedText>
<HelloWave />
</ThemedView>
<ThemedView style={styles.stepContainer}>
<ThemedText type="subtitle">Step 1: Try it</ThemedText>
<ThemedText>
Edit{" "}
<ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText>{" "}
to see changes. Press{" "}
<ThemedText type="defaultSemiBold">
{Platform.select({ ios: "cmd + d", android: "cmd + m" })}
</ThemedText>{" "}
to open developer tools.
</ThemedText>
</ThemedView>
<ThemedView style={styles.stepContainer}>
<ThemedText type="subtitle">Step 2: Explore</ThemedText>
<ThemedText>
Tap the Explore tab to learn more about what's included in this
starter app.
</ThemedText>
</ThemedView>
<ThemedView style={styles.stepContainer}>
<ThemedText type="subtitle">Step 3: Get a fresh start</ThemedText>
<ThemedText>
When you're ready, run{" "}
<ThemedText type="defaultSemiBold">npm run reset-project</ThemedText>{" "}
to get a fresh <ThemedText type="defaultSemiBold">app</ThemedText>{" "}
directory. This will move the current{" "}
<ThemedText type="defaultSemiBold">app</ThemedText> to{" "}
<ThemedText type="defaultSemiBold">app-example</ThemedText>.
</ThemedText>
</ThemedView>
</ParallaxScrollView>
);
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
titleContainer: { titleContainer: {
flexDirection: 'row', flexDirection: "row",
alignItems: 'center', alignItems: "center",
gap: 8, gap: 8,
}, },
stepContainer: { stepContainer: {
gap: 8, gap: 8,
marginBottom: 8, marginBottom: 8,
}, },
reactLogo: { reactLogo: {
height: 178, height: 178,
width: 290, width: 290,
bottom: 0, bottom: 0,
left: 0, left: 0,
position: 'absolute', position: "absolute",
}, },
}); });

59
app/_layout.tsx
View File

@@ -1,37 +1,42 @@
import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native'; import {
import { useFonts } from 'expo-font'; DarkTheme,
import { Stack } from 'expo-router'; DefaultTheme,
import * as SplashScreen from 'expo-splash-screen'; ThemeProvider,
import { useEffect } from 'react'; } from "@react-navigation/native";
import 'react-native-reanimated'; import { useFonts } from "expo-font";
import { Stack } from "expo-router";
import * as SplashScreen from "expo-splash-screen";
import { useEffect } from "react";
import "react-native-reanimated";
import { useColorScheme } from '@/hooks/useColorScheme'; import { useColorScheme } from "@/hooks/useColorScheme";
// Prevent the splash screen from auto-hiding before asset loading is complete. // Prevent the splash screen from auto-hiding before asset loading is complete.
SplashScreen.preventAutoHideAsync(); SplashScreen.preventAutoHideAsync();
export default function RootLayout() { export default function RootLayout() {
const colorScheme = useColorScheme(); const colorScheme = useColorScheme();
const [loaded] = useFonts({ const [loaded] = useFonts({
SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'), SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
}); });
useEffect(() => { useEffect(() => {
if (loaded) { if (loaded) {
SplashScreen.hideAsync(); SplashScreen.hideAsync();
} }
}, [loaded]); }, [loaded]);
if (!loaded) { if (!loaded) {
return null; return null;
} }
return ( return (
<ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}> <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
<Stack> <Stack>
<Stack.Screen name="(tabs)" options={{ headerShown: false }} /> <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
<Stack.Screen name="+not-found" /> <Stack.Screen name="+not-found" />
</Stack> <Stack.Screen name="wallpaper" options={{ headerShown: false }} />
</ThemeProvider> </Stack>
); </ThemeProvider>
);
} }

124
app/wallpaper.tsx Normal file
View File

@@ -0,0 +1,124 @@
import { useStore } from "@/store/store";
import * as FileSystem from "expo-file-system";
import * as MediaLibrary from "expo-media-library";
import { Ionicons } from "@expo/vector-icons";
import { useRouter } from "expo-router";
import { Image, Text, View, TouchableOpacity, Alert } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
export default function WallpaperPage() {
const selectedWallpaper = useStore((store) => store.selectedWallpaper);
const router = useRouter();
if (!selectedWallpaper) {
return null;
}
const imageName = selectedWallpaper.public_id.replace("wallpaper/", "");
async function downloadWallpaper() {
if (!selectedWallpaper) {
return;
}
const permStatus = await MediaLibrary.requestPermissionsAsync();
if (permStatus.status != MediaLibrary.PermissionStatus.GRANTED) {
Alert.alert(
"Media library access required",
"Doors need access to your media library in order to save wallpapers.",
);
return;
}
console.log(
`${FileSystem.documentDirectory}${selectedWallpaper.asset_id}.${selectedWallpaper.format}`,
);
const result = await FileSystem.downloadAsync(
selectedWallpaper.secure_url,
`${FileSystem.documentDirectory}${selectedWallpaper.asset_id}.${selectedWallpaper.format}`,
);
await MediaLibrary.createAssetAsync(result.uri);
Alert.alert(
"Wallpaper saved successfully",
"You can change the wallpaper in Settings.",
);
}
return (
<SafeAreaView style={{ flex: 1, width: "100%", height: "100%" }}>
<Image
style={{ flex: 1, width: "100%", height: "100%" }}
source={{ uri: selectedWallpaper.secure_url }}
/>
<View
style={{
position: "absolute",
top: 0,
left: 0,
right: 0,
flexDirection: "row",
paddingHorizontal: 16,
paddingVertical: 32,
}}
>
<TouchableOpacity
onPress={() => {
router.dismiss();
}}
>
<View
style={{
width: 32,
height: 32,
borderRadius: 16,
backgroundColor: "rgba(0, 0, 0, 0.8)",
alignItems: "center",
justifyContent: "center",
padding: 5,
}}
>
<Ionicons size={24} name="close" color="white" />
</View>
</TouchableOpacity>
</View>
<View
style={{
position: "absolute",
bottom: 0,
left: 0,
right: 0,
height: "30%",
width: "100%",
backgroundColor: "#0A0A0A",
justifyContent: "space-between",
alignItems: "center",
padding: 24,
}}
>
<Text style={{ fontWeight: "bold", fontSize: 24, color: "white" }}>
{imageName}
</Text>
<TouchableOpacity
style={{ width: "100%" }}
onPress={() => {
downloadWallpaper();
}}
>
<View
style={{
width: "100%",
borderRadius: 8,
backgroundColor: "#E5202B",
justifyContent: "center",
alignItems: "center",
padding: 8,
}}
>
<Text style={{ color: "white" }}>Download</Text>
</View>
</TouchableOpacity>
</View>
</SafeAreaView>
);
}

142
cloudinary/cloudinary.ts Normal file
View File

@@ -0,0 +1,142 @@
interface ImageAsset {
asset_id: string;
public_id: string;
format: "jpg" | "png" | "heic";
version: number;
resource_type: "image";
type: "upload";
bytes: number;
width: number;
height: number;
secure_url: string;
}
const FAKE_DATA: ImageAsset[] = [
{
asset_id: "0bc266a5c13b32b7f391743e6190e64b",
public_id: "wallpaper/My Wife",
format: "png",
version: 1727208372,
resource_type: "image",
type: "upload",
bytes: 7298274,
width: 7680,
height: 4320,
asset_folder: "wallpaper",
display_name: "wtu9aapnvev6l3u4wxnn",
url: "http://res.cloudinary.com/duyynotn0/image/upload/v1727208372/wallpaper/My%20Wife.png",
secure_url:
"https://res.cloudinary.com/duyynotn0/image/upload/v1727208372/wallpaper/My%20Wife.png",
last_updated: {
public_id_updated_at: "2024-09-24T21:10:00+00:00",
updated_at: "2024-09-24T21:10:00+00:00",
},
},
{
asset_id: "054f3880e1b0ae0e1caf7353a3b5887f",
public_id: "wallpaper/Lycoris Recoil",
format: "jpg",
version: 1727208371,
resource_type: "image",
type: "upload",
bytes: 4393245,
width: 3840,
height: 2160,
asset_folder: "wallpaper",
display_name: "bcnwr6vgi6l7biqn10gx",
url: "http://res.cloudinary.com/duyynotn0/image/upload/v1727208371/wallpaper/Lycoris%20Recoil.jpg",
secure_url:
"https://res.cloudinary.com/duyynotn0/image/upload/v1727208371/wallpaper/Lycoris%20Recoil.jpg",
last_updated: {
public_id_updated_at: "2024-09-24T21:10:07+00:00",
updated_at: "2024-09-24T21:10:07+00:00",
},
},
{
asset_id: "c9f71873b584b74a5dce33c0a65319ac",
public_id: "wallpaper/Tokyo",
format: "jpg",
version: 1727208369,
resource_type: "image",
type: "upload",
created_at: "2024-09-24T20:06:09Z",
bytes: 7752039,
width: 6720,
height: 4480,
asset_folder: "wallpaper",
display_name: "v59wmbyztuy3hpinwsgo",
url: "http://res.cloudinary.com/duyynotn0/image/upload/v1727208369/wallpaper/Tokyo.jpg",
secure_url:
"https://res.cloudinary.com/duyynotn0/image/upload/v1727208369/wallpaper/Tokyo.jpg",
last_updated: {
public_id_updated_at: "2024-09-24T21:09:28+00:00",
updated_at: "2024-09-24T21:09:28+00:00",
},
},
{
asset_id: "7ff8cb0616c8091dc37aadec52a30658",
public_id: "wallpaper/Galaxy",
format: "jpg",
version: 1727208369,
resource_type: "image",
type: "upload",
created_at: "2024-09-24T20:06:09Z",
bytes: 4068457,
width: 7042,
height: 4699,
asset_folder: "wallpaper",
display_name: "xghgm5fp8icre4kmvsx5",
url: "http://res.cloudinary.com/duyynotn0/image/upload/v1727208369/wallpaper/Galaxy.jpg",
secure_url:
"https://res.cloudinary.com/duyynotn0/image/upload/v1727208369/wallpaper/Galaxy.jpg",
last_updated: {
public_id_updated_at: "2024-09-24T21:09:13+00:00",
updated_at: "2024-09-24T21:09:13+00:00",
},
},
{
asset_id: "8b1b17423a410a4b2f7bea13957f7de1",
public_id: "wallpaper/Raydrop",
format: "heic",
version: 1727208361,
resource_type: "image",
type: "upload",
created_at: "2024-09-24T20:06:01Z",
bytes: 1034763,
width: 6016,
height: 3388,
asset_folder: "wallpaper",
display_name: "yjcsdlty4pwqaich0fl4",
url: "http://res.cloudinary.com/duyynotn0/image/upload/v1727208361/wallpaper/Raydrop.heic",
secure_url:
"https://res.cloudinary.com/duyynotn0/image/upload/v1727208361/wallpaper/Raydrop.heic",
last_updated: {
public_id_updated_at: "2024-09-24T21:08:56+00:00",
updated_at: "2024-09-24T21:08:56+00:00",
},
},
{
asset_id: "7d95c3294cd84e64b004f54a002d3865",
public_id: "wallpaper/Alisa",
format: "jpg",
version: 1727208357,
resource_type: "image",
type: "upload",
created_at: "2024-09-24T20:05:57Z",
bytes: 1556534,
width: 5120,
height: 2880,
asset_folder: "wallpaper",
display_name: "qjbbkz8kn1rtsmvthdb5",
url: "http://res.cloudinary.com/duyynotn0/image/upload/v1727208357/wallpaper/Alisa.jpg",
secure_url:
"https://res.cloudinary.com/duyynotn0/image/upload/v1727208357/wallpaper/Alisa.jpg",
last_updated: {
public_id_updated_at: "2024-09-24T21:08:48+00:00",
updated_at: "2024-09-24T21:08:48+00:00",
},
},
];
export type { ImageAsset };
export { FAKE_DATA };

168
package-lock.json generated
View File

@@ -8,12 +8,17 @@
"name": "doors", "name": "doors",
"version": "1.0.0", "version": "1.0.0",
"dependencies": { "dependencies": {
"@cloudinary/react": "^1.13.0",
"@cloudinary/url-gen": "^1.21.0",
"@expo/vector-icons": "^14.0.2", "@expo/vector-icons": "^14.0.2",
"@react-navigation/native": "^6.0.2", "@react-navigation/native": "^6.0.2",
"@shopify/flash-list": "^1.7.1",
"expo": "~51.0.28", "expo": "~51.0.28",
"expo-constants": "~16.0.2", "expo-constants": "~16.0.2",
"expo-file-system": "^17.0.1",
"expo-font": "~12.0.9", "expo-font": "~12.0.9",
"expo-linking": "~6.3.1", "expo-linking": "~6.3.1",
"expo-media-library": "^16.0.5",
"expo-router": "~3.5.23", "expo-router": "~3.5.23",
"expo-splash-screen": "~0.27.5", "expo-splash-screen": "~0.27.5",
"expo-status-bar": "~1.12.1", "expo-status-bar": "~1.12.1",
@@ -26,7 +31,8 @@
"react-native-reanimated": "~3.10.1", "react-native-reanimated": "~3.10.1",
"react-native-safe-area-context": "4.10.5", "react-native-safe-area-context": "4.10.5",
"react-native-screens": "3.31.1", "react-native-screens": "3.31.1",
"react-native-web": "~0.19.10" "react-native-web": "~0.19.10",
"zustand": "^5.0.0-rc.2"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.20.0", "@babel/core": "^7.20.0",
@@ -2136,6 +2142,66 @@
"integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==", "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==",
"dev": true "dev": true
}, },
"node_modules/@cloudinary/html": {
"version": "1.13.0",
"resolved": "https://registry.npmjs.org/@cloudinary/html/-/html-1.13.0.tgz",
"integrity": "sha512-kOE54EbAyxSH4k3Z9HzYDSlsfpXSDxckAdyyNfxsnC23u+wfxY0Gt8yBG0s3tiqdTkL6IDd1Momsn/OlYStObg==",
"dependencies": {
"@types/lodash.clonedeep": "^4.5.6",
"@types/lodash.debounce": "^4.0.6",
"@types/node": "^14.14.10",
"lodash.clonedeep": "^4.5.0",
"lodash.debounce": "^4.0.8",
"typescript": "^4.1.2"
}
},
"node_modules/@cloudinary/html/node_modules/@types/node": {
"version": "14.18.63",
"resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.63.tgz",
"integrity": "sha512-fAtCfv4jJg+ExtXhvCkCqUKZ+4ok/JQk01qDKhL5BDDoS3AxKXhV5/MAVUZyQnSEd2GT92fkgZl0pz0Q0AzcIQ=="
},
"node_modules/@cloudinary/html/node_modules/typescript": {
"version": "4.9.5",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
"integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
"bin": {
"tsc": "bin/tsc",
"tsserver": "bin/tsserver"
},
"engines": {
"node": ">=4.2.0"
}
},
"node_modules/@cloudinary/react": {
"version": "1.13.0",
"resolved": "https://registry.npmjs.org/@cloudinary/react/-/react-1.13.0.tgz",
"integrity": "sha512-S+Wmdmg4+pjWWlRLUcaHlQ0d59njecja6wGGWGJwVsQioBF/E/KUxNl09Q6NemXuJJAVW/hSW9kT/diJmI7eQQ==",
"dependencies": {
"@cloudinary/html": "^1.13.0"
},
"engines": {
"node": ">=10"
},
"peerDependencies": {
"react": "^16.3.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/@cloudinary/transformation-builder-sdk": {
"version": "1.15.1",
"resolved": "https://registry.npmjs.org/@cloudinary/transformation-builder-sdk/-/transformation-builder-sdk-1.15.1.tgz",
"integrity": "sha512-Dvm5DzGPq6NtXRLhpubu7SVfD+TLEWbU9q/FOxpGelWpn3NaTSOH/b+jRbpTL+EgYSHeaTeK6kHMraousPkNQg==",
"dependencies": {
"@cloudinary/url-gen": "^1.7.0"
}
},
"node_modules/@cloudinary/url-gen": {
"version": "1.21.0",
"resolved": "https://registry.npmjs.org/@cloudinary/url-gen/-/url-gen-1.21.0.tgz",
"integrity": "sha512-ctYcCzX3G3vcgnESTU2ET3K1XsBiXcEnBddCGV0QbR3fJhLLrIShjSMEwZoepgh4LAFOHJu9DzvLFr+E8R7c7g==",
"dependencies": {
"@cloudinary/transformation-builder-sdk": "^1.15.1"
}
},
"node_modules/@egjs/hammerjs": { "node_modules/@egjs/hammerjs": {
"version": "2.0.17", "version": "2.0.17",
"resolved": "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz", "resolved": "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz",
@@ -6549,6 +6615,25 @@
"join-component": "^1.1.0" "join-component": "^1.1.0"
} }
}, },
"node_modules/@shopify/flash-list": {
"version": "1.7.1",
"resolved": "https://registry.npmjs.org/@shopify/flash-list/-/flash-list-1.7.1.tgz",
"integrity": "sha512-sUYl7h8ydJutufA26E42Hj7cLvaBTpkMIyNJiFrxUspkcANb6jnFiLt9rEwAuDjvGk/C0lHau+WyT6ZOxqVPwg==",
"dependencies": {
"recyclerlistview": "4.2.1",
"tslib": "2.6.3"
},
"peerDependencies": {
"@babel/runtime": "*",
"react": "*",
"react-native": "*"
}
},
"node_modules/@shopify/flash-list/node_modules/tslib": {
"version": "2.6.3",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz",
"integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ=="
},
"node_modules/@sideway/address": { "node_modules/@sideway/address": {
"version": "4.1.5", "version": "4.1.5",
"resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.5.tgz", "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.5.tgz",
@@ -6704,6 +6789,27 @@
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz", "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
"integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==" "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA=="
}, },
"node_modules/@types/lodash": {
"version": "4.17.9",
"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.9.tgz",
"integrity": "sha512-w9iWudx1XWOHW5lQRS9iKpK/XuRhnN+0T7HvdCCd802FYkT1AMTnxndJHGrNJwRoRHkslGr4S29tjm1cT7x/7w=="
},
"node_modules/@types/lodash.clonedeep": {
"version": "4.5.9",
"resolved": "https://registry.npmjs.org/@types/lodash.clonedeep/-/lodash.clonedeep-4.5.9.tgz",
"integrity": "sha512-19429mWC+FyaAhOLzsS8kZUsI+/GmBAQ0HFiCPsKGU+7pBXOQWhyrY6xNNDwUSX8SMZMJvuFVMF9O5dQOlQK9Q==",
"dependencies": {
"@types/lodash": "*"
}
},
"node_modules/@types/lodash.debounce": {
"version": "4.0.9",
"resolved": "https://registry.npmjs.org/@types/lodash.debounce/-/lodash.debounce-4.0.9.tgz",
"integrity": "sha512-Ma5JcgTREwpLRwMM+XwBR7DaWe96nC38uCBDFKZWbNKD+osjVzdpnUSwBcqCptrp16sSOLBAUb50Car5I0TCsQ==",
"dependencies": {
"@types/lodash": "*"
}
},
"node_modules/@types/node": { "node_modules/@types/node": {
"version": "18.19.50", "version": "18.19.50",
"resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.50.tgz", "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.50.tgz",
@@ -9348,6 +9454,14 @@
"invariant": "^2.2.4" "invariant": "^2.2.4"
} }
}, },
"node_modules/expo-media-library": {
"version": "16.0.5",
"resolved": "https://registry.npmjs.org/expo-media-library/-/expo-media-library-16.0.5.tgz",
"integrity": "sha512-O9RUqBWgJVRF0mO6EiLSBFyfb5wR1/ZqovbT43V0TAo5sgcjrHRs+0NID/U6BWDRuiFeX2AU516JgNDutNUFSw==",
"peerDependencies": {
"expo": "*"
}
},
"node_modules/expo-modules-autolinking": { "node_modules/expo-modules-autolinking": {
"version": "1.11.2", "version": "1.11.2",
"resolved": "https://registry.npmjs.org/expo-modules-autolinking/-/expo-modules-autolinking-1.11.2.tgz", "resolved": "https://registry.npmjs.org/expo-modules-autolinking/-/expo-modules-autolinking-1.11.2.tgz",
@@ -13677,6 +13791,11 @@
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
}, },
"node_modules/lodash.clonedeep": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
"integrity": "sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ=="
},
"node_modules/lodash.debounce": { "node_modules/lodash.debounce": {
"version": "4.0.8", "version": "4.0.8",
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
@@ -15985,6 +16104,20 @@
"node": ">=0.10.0" "node": ">=0.10.0"
} }
}, },
"node_modules/recyclerlistview": {
"version": "4.2.1",
"resolved": "https://registry.npmjs.org/recyclerlistview/-/recyclerlistview-4.2.1.tgz",
"integrity": "sha512-NtVYjofwgUCt1rEsTp6jHQg/47TWjnO92TU2kTVgJ9wsc/ely4HnizHHa+f/dI7qaw4+zcSogElrLjhMltN2/g==",
"dependencies": {
"lodash.debounce": "4.0.8",
"prop-types": "15.8.1",
"ts-object-utils": "0.0.5"
},
"peerDependencies": {
"react": ">= 15.2.1",
"react-native": ">= 0.30.0"
}
},
"node_modules/regenerate": { "node_modules/regenerate": {
"version": "1.4.2", "version": "1.4.2",
"resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
@@ -17507,6 +17640,11 @@
"resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz", "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
"integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==" "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="
}, },
"node_modules/ts-object-utils": {
"version": "0.0.5",
"resolved": "https://registry.npmjs.org/ts-object-utils/-/ts-object-utils-0.0.5.tgz",
"integrity": "sha512-iV0GvHqOmilbIKJsfyfJY9/dNHCs969z3so90dQWsO1eMMozvTpnB1MEaUbb3FYtZTGjv5sIy/xmslEz0Rg2TA=="
},
"node_modules/tslib": { "node_modules/tslib": {
"version": "2.7.0", "version": "2.7.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.7.0.tgz", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.7.0.tgz",
@@ -18354,6 +18492,34 @@
"peerDependencies": { "peerDependencies": {
"zod": "^3.18.0" "zod": "^3.18.0"
} }
},
"node_modules/zustand": {
"version": "5.0.0-rc.2",
"resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.0-rc.2.tgz",
"integrity": "sha512-o2Nwuvnk8vQBX7CcHL8WfFkZNJdxB/VKeWw0tNglw8p4cypsZ3tRT7rTRTDNeUPFS0qaMBRSKe+fVwL5xpcE3A==",
"engines": {
"node": ">=12.20.0"
},
"peerDependencies": {
"@types/react": ">=18.0.0",
"immer": ">=9.0.6",
"react": ">=18.0.0",
"use-sync-external-store": ">=1.2.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"immer": {
"optional": true
},
"react": {
"optional": true
},
"use-sync-external-store": {
"optional": true
}
}
} }
} }
} }

8
package.json
View File

@@ -15,12 +15,17 @@
"preset": "jest-expo" "preset": "jest-expo"
}, },
"dependencies": { "dependencies": {
"@cloudinary/react": "^1.13.0",
"@cloudinary/url-gen": "^1.21.0",
"@expo/vector-icons": "^14.0.2", "@expo/vector-icons": "^14.0.2",
"@react-navigation/native": "^6.0.2", "@react-navigation/native": "^6.0.2",
"@shopify/flash-list": "^1.7.1",
"expo": "~51.0.28", "expo": "~51.0.28",
"expo-constants": "~16.0.2", "expo-constants": "~16.0.2",
"expo-file-system": "^17.0.1",
"expo-font": "~12.0.9", "expo-font": "~12.0.9",
"expo-linking": "~6.3.1", "expo-linking": "~6.3.1",
"expo-media-library": "^16.0.5",
"expo-router": "~3.5.23", "expo-router": "~3.5.23",
"expo-splash-screen": "~0.27.5", "expo-splash-screen": "~0.27.5",
"expo-status-bar": "~1.12.1", "expo-status-bar": "~1.12.1",
@@ -33,7 +38,8 @@
"react-native-reanimated": "~3.10.1", "react-native-reanimated": "~3.10.1",
"react-native-safe-area-context": "4.10.5", "react-native-safe-area-context": "4.10.5",
"react-native-screens": "3.31.1", "react-native-screens": "3.31.1",
"react-native-web": "~0.19.10" "react-native-web": "~0.19.10",
"zustand": "^5.0.0-rc.2"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.20.0", "@babel/core": "^7.20.0",

16
store/store.ts Normal file
View File

@@ -0,0 +1,16 @@
import type { ImageAsset } from "@/cloudinary/cloudinary";
import { create } from "zustand";
interface Store {
selectedWallpaper: ImageAsset | null;
setSelectedWallpaper(image: ImageAsset): void;
}
const useStore = create<Store>((set) => ({
selectedWallpaper: null,
setSelectedWallpaper: (image) =>
set((store) => ({ ...store, selectedWallpaper: image })),
}));
export { useStore };