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

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

@@ -1,37 +1,44 @@
import { Tabs } from 'expo-router';
import React from 'react';
import { Tabs } from "expo-router";
import React from "react";
import { TabBarIcon } from '@/components/navigation/TabBarIcon';
import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';
import { TabBarIcon } from "@/components/navigation/TabBarIcon";
import { Colors } from "@/constants/Colors";
import { useColorScheme } from "@/hooks/useColorScheme";
export default function TabLayout() {
const colorScheme = useColorScheme();
const colorScheme = useColorScheme();
return (
<Tabs
screenOptions={{
tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
headerShown: false,
}}>
<Tabs.Screen
name="index"
options={{
title: 'Home',
tabBarIcon: ({ color, focused }) => (
<TabBarIcon name={focused ? 'home' : 'home-outline'} color={color} />
),
}}
/>
<Tabs.Screen
name="explore"
options={{
title: 'Explore',
tabBarIcon: ({ color, focused }) => (
<TabBarIcon name={focused ? 'code-slash' : 'code-slash-outline'} color={color} />
),
}}
/>
</Tabs>
);
return (
<Tabs
screenOptions={{
tabBarActiveTintColor: Colors[colorScheme ?? "light"].tint,
headerShown: false,
}}
>
<Tabs.Screen
name="index"
options={{
title: "Wallpaper",
tabBarIcon: ({ color, focused }) => (
<TabBarIcon
name={focused ? "albums" : "albums-outline"}
color={color}
/>
),
}}
/>
<Tabs.Screen
name="explore"
options={{
title: "Explore",
tabBarIcon: ({ color, focused }) => (
<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 ParallaxScrollView from '@/components/ParallaxScrollView';
import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView';
import { HelloWave } from "@/components/HelloWave";
import ParallaxScrollView from "@/components/ParallaxScrollView";
import { ThemedText } from "@/components/ThemedText";
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() {
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 router = useRouter();
const setSelectedWallpaper = useStore((store) => store.setSelectedWallpaper);
const [images, setImages] = useState<ImageAsset[] | null>(null);
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
async function fetchWallpapers() {
setIsLoading(true);
const res = await fetch("http://localhost:8080/wallpapers");
const images: ImageAsset[] = await res.json();
setImages(images);
setIsLoading(false);
}
fetchWallpapers();
}, []);
return (
<View style={{ flex: 1 }}>
<MasonryFlashList
data={FAKE_DATA}
numColumns={2}
ListHeaderComponent={() => (
<Text
style={{
paddingHorizontal: 8,
paddingTop: 40,
fontSize: 40,
fontWeight: "bold",
color: "white",
}}
>
Wallpapers
</Text>
)}
renderItem={({ item, target }) => (
<View style={{ width: "100%", position: "relative" }}>
<TouchableOpacity
onPress={() => {
setSelectedWallpaper(item);
router.push("/wallpaper");
}}
>
<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({
titleContainer: {
flexDirection: 'row',
alignItems: 'center',
gap: 8,
},
stepContainer: {
gap: 8,
marginBottom: 8,
},
reactLogo: {
height: 178,
width: 290,
bottom: 0,
left: 0,
position: 'absolute',
},
titleContainer: {
flexDirection: "row",
alignItems: "center",
gap: 8,
},
stepContainer: {
gap: 8,
marginBottom: 8,
},
reactLogo: {
height: 178,
width: 290,
bottom: 0,
left: 0,
position: "absolute",
},
});

59
app/_layout.tsx
View File

@@ -1,37 +1,42 @@
import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
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 {
DarkTheme,
DefaultTheme,
ThemeProvider,
} from "@react-navigation/native";
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.
SplashScreen.preventAutoHideAsync();
export default function RootLayout() {
const colorScheme = useColorScheme();
const [loaded] = useFonts({
SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
});
const colorScheme = useColorScheme();
const [loaded] = useFonts({
SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
});
useEffect(() => {
if (loaded) {
SplashScreen.hideAsync();
}
}, [loaded]);
useEffect(() => {
if (loaded) {
SplashScreen.hideAsync();
}
}, [loaded]);
if (!loaded) {
return null;
}
if (!loaded) {
return null;
}
return (
<ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
<Stack>
<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
<Stack.Screen name="+not-found" />
</Stack>
</ThemeProvider>
);
return (
<ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
<Stack>
<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
<Stack.Screen name="+not-found" />
<Stack.Screen name="wallpaper" options={{ headerShown: false }} />
</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>
);
}