feat: add style for image viewer

Author: jellydn

app/_layout.tsx

@@ -1,5 +1,17 @@
-import { Slot } from "expo-router";
+import { useEffect } from "react";
+import { usePathname, useGlobalSearchParams, Slot } from "expo-router";
 
-export default function HomeLayout() {
+import "../global.css";
+
+export default function Layout() {
+	const pathname = usePathname();
+	const params = useGlobalSearchParams();
+
+	// Track the location in your analytics provider here.
+	useEffect(() => {
+		console.log({ pathname, params });
+	}, [pathname, params]);
+
+	// Export all the children routes in the most basic way.
 	return <Slot />;
 }

app/index.tsx

@@ -91,7 +91,7 @@ export default function App() {
 
 	return (
 		<GestureHandlerRootView style={styles.container}>
-			<View style={styles.imageContainer}>
+			<View style={styles.imageContainer} className="justify-around">
 				<View ref={imageRef} collapsable={false}>
 					<ImageViewer
 						placeholderImageSource={PlaceholderImage}

components/ImageViewer.tsx

@@ -5,13 +5,11 @@ export default function ImageViewer({ placeholderImageSource, selectedImage }) {
 		? { uri: selectedImage }
 		: placeholderImageSource;
 
-	return <Image source={imageSource} style={styles.image} />;
+	return <Image className="w-96" source={imageSource} style={styles.image} />;
 }
 
 const styles = StyleSheet.create({
 	image: {
-		width: 320,
-		height: 440,
 		borderRadius: 18,
 	},
 });