feat: implemented files

src/screens/DirectoryDetails.js

@@ -21,7 +21,6 @@ const DirectoryDetails = () => {
 				},
 				(err, data) => {
 					if (err) {
-						console.log(err);
 						ToastAndroid.show(
 							'Failed to fetch directory contents',
 							ToastAndroid.SHORT,

src/screens/FileDetails.js

@@ -0,0 +1,81 @@
+import React, {useState, useEffect} from 'react';
+import {
+	StyleSheet,
+	ScrollView,
+	Text,
+	Button,
+	ToastAndroid,
+	PermissionsAndroid,
+} from 'react-native';
+import {useRoute} from '@react-navigation/native';
+import prettyBytes from 'pretty-bytes';
+import useS3 from '../hooks/useS3';
+
+const FileDetails = () => {
+	const route = useRoute();
+	const s3 = useS3();
+	const [data, setData] = useState(null);
+
+	useEffect(() => {
+		if (s3 && !data) {
+			s3.getObject(
+				{
+					Bucket: route.params.bucket,
+					Key: route.params.file,
+					Range: 'bytes=0-1',
+				},
+				(err, data) => {
+					if (err) {
+						ToastAndroid.show('Failed to fetch file info', ToastAndroid.SHORT);
+						return;
+					}
+
+					setData(data);
+				},
+			);
+		}
+	}, [s3]);
+
+	if (!data) {
+		return <Text>Loading...</Text>;
+	}
+
+	return (
+		<ScrollView style={styles.root}>
+			<Text style={styles.bucket}>Bucket: {route.params.bucket}</Text>
+			<Text style={styles.fileName}>Key: {route.params.file}</Text>
+			<Text style={styles.info}>
+				Last modified: {data.LastModified.toISOString()}
+			</Text>
+			<Text style={styles.info}>Size: {prettyBytes(data.ContentLength)}</Text>
+			<Text style={styles.info}>Content type: {data.ContentType}</Text>
+		</ScrollView>
+	);
+};
+
+const styles = StyleSheet.create({
+	root: {
+		flex: 1,
+		padding: 12,
+	},
+	bucket: {
+		fontSize: 14,
+		marginBottom: 12,
+		color: '#000000',
+	},
+	fileName: {
+		fontSize: 16,
+		fontWeight: 'bold',
+		marginBottom: 12,
+		color: '#000000',
+	},
+	info: {
+		fontSize: 14,
+		marginBottom: 12,
+	},
+	download: {
+		marginTop: 16,
+	},
+});
+
+export default FileDetails;