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

refactor: use tailwind

Browse Source
This commit is contained in:
Kenneth
2024-09-25 18:34:58 +01:00
parent eef23656f9
commit 6f939ec5ec
14 changed files with 548 additions and 513 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
app/(tabs)/explore.tsx
View File

@@ -1,102 +1,5 @@
import Ionicons from '@expo/vector-icons/Ionicons';
import { StyleSheet, Image, Platform } from 'react-native';
import { Collapsible } from '@/components/Collapsible';
import { ExternalLink } from '@/components/ExternalLink';
import ParallaxScrollView from '@/components/ParallaxScrollView';
import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView';
import { View } from "react-native";
export default function TabTwoScreen() {
return (
<ParallaxScrollView
headerBackgroundColor={{ light: '#D0D0D0', dark: '#353636' }}
headerImage={<Ionicons size={310} name="code-slash" style={styles.headerImage} />}>
<ThemedView style={styles.titleContainer}>
<ThemedText type="title">Explore</ThemedText>
</ThemedView>
<ThemedText>This app includes example code to help you get started.</ThemedText>
<Collapsible title="File-based routing">
<ThemedText>
This app has two screens:{' '}
<ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> and{' '}
<ThemedText type="defaultSemiBold">app/(tabs)/explore.tsx</ThemedText>
</ThemedText>
<ThemedText>
The layout file in <ThemedText type="defaultSemiBold">app/(tabs)/_layout.tsx</ThemedText>{' '}
sets up the tab navigator.
</ThemedText>
<ExternalLink href="https://docs.expo.dev/router/introduction">
<ThemedText type="link">Learn more</ThemedText>
</ExternalLink>
</Collapsible>
<Collapsible title="Android, iOS, and web support">
<ThemedText>
You can open this project on Android, iOS, and the web. To open the web version, press{' '}
<ThemedText type="defaultSemiBold">w</ThemedText> in the terminal running this project.
</ThemedText>
</Collapsible>
<Collapsible title="Images">
<ThemedText>
For static images, you can use the <ThemedText type="defaultSemiBold">@2x</ThemedText> and{' '}
<ThemedText type="defaultSemiBold">@3x</ThemedText> suffixes to provide files for
different screen densities
</ThemedText>
<Image source={require('@/assets/images/react-logo.png')} style={{ alignSelf: 'center' }} />
<ExternalLink href="https://reactnative.dev/docs/images">
<ThemedText type="link">Learn more</ThemedText>
</ExternalLink>
</Collapsible>
<Collapsible title="Custom fonts">
<ThemedText>
Open <ThemedText type="defaultSemiBold">app/_layout.tsx</ThemedText> to see how to load{' '}
<ThemedText style={{ fontFamily: 'SpaceMono' }}>
custom fonts such as this one.
</ThemedText>
</ThemedText>
<ExternalLink href="https://docs.expo.dev/versions/latest/sdk/font">
<ThemedText type="link">Learn more</ThemedText>
</ExternalLink>
</Collapsible>
<Collapsible title="Light and dark mode components">
<ThemedText>
This template has light and dark mode support. The{' '}
<ThemedText type="defaultSemiBold">useColorScheme()</ThemedText> hook lets you inspect
what the user's current color scheme is, and so you can adjust UI colors accordingly.
</ThemedText>
<ExternalLink href="https://docs.expo.dev/develop/user-interface/color-themes/">
<ThemedText type="link">Learn more</ThemedText>
</ExternalLink>
</Collapsible>
<Collapsible title="Animations">
<ThemedText>
This template includes an example of an animated component. The{' '}
<ThemedText type="defaultSemiBold">components/HelloWave.tsx</ThemedText> component uses
the powerful <ThemedText type="defaultSemiBold">react-native-reanimated</ThemedText> library
to create a waving hand animation.
</ThemedText>
{Platform.select({
ios: (
<ThemedText>
The <ThemedText type="defaultSemiBold">components/ParallaxScrollView.tsx</ThemedText>{' '}
component provides a parallax effect for the header image.
</ThemedText>
),
})}
</Collapsible>
</ParallaxScrollView>
);
return <View />;
}
const styles = StyleSheet.create({
headerImage: {
color: '#808080',
bottom: -90,
left: -35,
position: 'absolute',
},
titleContainer: {
flexDirection: 'row',
gap: 8,
},
});

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

@@ -35,50 +35,39 @@ export default function HomeScreen() {
}, []);
return (
<View style={{ flex: 1 }}>
<View className="flex-1">
<MasonryFlashList
data={FAKE_DATA}
numColumns={2}
ListHeaderComponent={() => (
<Text
style={{
paddingHorizontal: 8,
paddingTop: 40,
fontSize: 40,
fontWeight: "bold",
color: "white",
}}
>
<Text className="px-2 pt-20 text-2xl font-bold text-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>
renderItem={({ item }) => (
<View className="w-full p-2">
<View className="w-full relative">
<TouchableOpacity
onPress={() => {
setSelectedWallpaper(item);
router.push("/wallpaper");
}}
>
<Image
className="w-full h-60"
source={{ uri: item.secure_url }}
/>
</TouchableOpacity>
<View
className="w-full absolute bottom-0 left-0 right-0 p-2"
style={{
backgroundColor: "rgba(0, 0, 0, 0.8)",
}}
>
<Text className="text-white opacity-80">
{item.public_id.replace("wallpaper/", "")}
</Text>
</View>
</View>
</View>
)}
@@ -86,70 +75,4 @@ export default function HomeScreen() {
/>
</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",
},
});

32
app/+not-found.tsx
View File

@@ -1,32 +0,0 @@
import { Link, Stack } from 'expo-router';
import { StyleSheet } from 'react-native';
import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView';
export default function NotFoundScreen() {
return (
<>
<Stack.Screen options={{ title: 'Oops!' }} />
<ThemedView style={styles.container}>
<ThemedText type="title">This screen doesn't exist.</ThemedText>
<Link href="/" style={styles.link}>
<ThemedText type="link">Go to home screen!</ThemedText>
</Link>
</ThemedView>
</>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
padding: 20,
},
link: {
marginTop: 15,
paddingVertical: 15,
},
});

1
app/_layout.tsx
View File

@@ -34,7 +34,6 @@ export default function RootLayout() {
<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>

58
app/wallpaper.tsx
View File

@@ -46,79 +46,43 @@ export default function WallpaperPage() {
}
return (
<SafeAreaView style={{ flex: 1, width: "100%", height: "100%" }}>
<View className="flex-1 w-full h-full">
<Image
style={{ flex: 1, width: "100%", height: "100%" }}
className="flex-1 w-full h-full"
source={{ uri: selectedWallpaper.secure_url }}
/>
<View
style={{
position: "absolute",
top: 0,
left: 0,
right: 0,
flexDirection: "row",
paddingHorizontal: 16,
paddingVertical: 32,
}}
>
<View className="absolute top-0 left-0 right-0 flex-row px-4 py-8">
<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,
}}
className="w-8 h-8 rounded-full items-center justify-center"
style={{ backgroundColor: "rgba(0, 0, 0, 0.8)", 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>
<View className="absolute bottom-0 left-0 right-0 h-1/3 w-full bg-neutral-800 justify-between items-center p-8">
<Text className="font-bold text-2xl text-white">{imageName}</Text>
<TouchableOpacity
style={{ width: "100%" }}
className="w-full"
onPress={() => {
downloadWallpaper();
}}
>
<View
className="w-full rounded justify-center items-center p-4"
style={{
width: "100%",
borderRadius: 8,
backgroundColor: "#E5202B",
justifyContent: "center",
alignItems: "center",
padding: 8,
}}
>
<Text style={{ color: "white" }}>Download</Text>
<Text className="text-white">Download</Text>
</View>
</TouchableOpacity>
</View>
</SafeAreaView>
</View>
);
}