Skip to content

Commit

Permalink
feat: experiments with gallery view
Browse files Browse the repository at this point in the history
  • Loading branch information
dreiekk committed Apr 7, 2024
1 parent 5f0712d commit 1036b1c
Show file tree
Hide file tree
Showing 6 changed files with 236 additions and 18 deletions.
2 changes: 1 addition & 1 deletion app/(tabs)/_layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export default function TabsLayout() {
<Tabs.Screen
name="index"
options={{
title: 'Gallery',
title: 'Tabs',
tabBarIcon({ color, size }) {
return <LayoutPanelLeft color={color} size={size} />
},
Expand Down
13 changes: 10 additions & 3 deletions app/_layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import AsyncStorage from '@react-native-async-storage/async-storage'
import { Theme, ThemeProvider, useNavigation } from '@react-navigation/native'
import { PortalHost } from '~/components/primitives/portal'
import { ToastProvider } from '~/components/primitives/deprecated-ui/toast'
import { SplashScreen } from 'expo-router'
import { SplashScreen, Stack } from 'expo-router'
import { StatusBar } from 'expo-status-bar'
import * as React from 'react'
import { Platform, ScrollView, Text, View } from 'react-native'
Expand All @@ -15,7 +15,7 @@ import { Drawer } from 'expo-router/drawer'
import { DrawerItem } from '@react-navigation/drawer'
import { TouchableOpacity } from '@gorhom/bottom-sheet'
import { Image } from 'expo-image'
import { GalleryHorizontalIcon, HomeIcon, LogInIcon, MenuIcon } from 'lucide-react-native'
import { GalleryHorizontalIcon, HomeIcon, LayoutPanelLeftIcon, LogInIcon, MenuIcon } from 'lucide-react-native'

Check warning on line 18 in app/_layout.tsx

View workflow job for this annotation

GitHub Actions / Qodana for JS

Unused import

Unused import specifier GalleryHorizontalIcon

const LIGHT_THEME: Theme = {
dark: false,
Expand Down Expand Up @@ -109,7 +109,7 @@ function CustomDrawerContent({ drawerPosition, props, navigation }) {

<DrawerItem label={() => {
return <View style={{ flexDirection: "row", alignItems: "center", paddingHorizontal: 10 }}>
<GalleryHorizontalIcon size={20} color={icon_color} style={{ marginRight: 20 }} />
<LayoutPanelLeftIcon size={20} color={icon_color} style={{ marginRight: 20 }} />
<Text style={{ color: icon_color }}>Gallery</Text>
</View>
}} onPress={() => navigation.navigate('gallery/index')} />
Expand Down Expand Up @@ -219,6 +219,13 @@ export default function RootLayout() {
headerRight: () => <ThemeToggle />,
}}
/>
<Stack.Screen
name="gallery/viewer"
options={{
title: 'Gallery Viewer',
headerRight: () => <ThemeToggle />,
}}
/>
<Drawer.Screen
name="(tabs)"
options={{
Expand Down
72 changes: 58 additions & 14 deletions app/gallery/index.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
import { FlatList, View } from 'react-native'
import { Dimensions, FlatList, TouchableWithoutFeedback, View } from 'react-native'

Check warning on line 1 in app/gallery/index.tsx

View workflow job for this annotation

GitHub Actions / Qodana for JS

Unused import

Unused import specifier FlatList
import { Text } from '~/components/ui/text'
import { Image } from 'expo-image'
import { database } from '~/lib/appwrite'

Check warning on line 4 in app/gallery/index.tsx

View workflow job for this annotation

GitHub Actions / Qodana for JS

Unused import

Unused import { database } from '\~/lib/appwrite'
import Gallery from 'react-native-awesome-gallery';
import { NavigationProp, NavigatorScreenParams, useNavigation } from '@react-navigation/native';

Check warning on line 6 in app/gallery/index.tsx

View workflow job for this annotation

GitHub Actions / Qodana for JS

Unused import

Unused import specifier NavigationProp

Check warning on line 6 in app/gallery/index.tsx

View workflow job for this annotation

GitHub Actions / Qodana for JS

Unused import

Unused import specifier NavigatorScreenParams
import { ScrollView } from 'react-native-gesture-handler';

// export default function HomeView() {
// const products = [
Expand Down Expand Up @@ -59,20 +62,61 @@ import { database } from '~/lib/appwrite'
// )
// }

const { height } = Dimensions.get('window');

Check warning on line 65 in app/gallery/index.tsx

View workflow job for this annotation

GitHub Actions / Qodana for JS

Unused local symbol

Unused constant height

const getRandomSize = function () {
const min = 400;
const max = 800;
return Math.floor(Math.random() * (max - min + 1)) + min;
};

// const images = new Array(10)
// .fill(0)
// .map(() => `https://picsum.photos/${getRandomSize()}/${getRandomSize()}`);

const images = new Array(10)
.fill(0)
.map(() => `https://picsum.photos/${getRandomSize()}/${getRandomSize()}`);

function HeadpatGallery() {

Check warning on line 81 in app/gallery/index.tsx

View workflow job for this annotation

GitHub Actions / Qodana for JS

Unused local symbol

Unused function HeadpatGallery

export default function HomeView() {
return (
<View className="flex-1 justify-center items-center">
<Text>This is the Gallery!</Text>
<Image
className=""
source={require('assets/images/headpat_logo.png')}
// placeholder={blurhash}
contentFit="cover"
// transition={1000}
allowDownscaling={true}
style={{ width: 200, height: 200, marginTop: 20}}
/>
</View>
<Gallery
data={images}
style={{ flex: 1, backgroundColor: 'white' }}
onIndexChange={(newIndex) => {
console.log(newIndex);
}}
/>
);
}

export default function HomeView(props) {

Check warning on line 94 in app/gallery/index.tsx

View workflow job for this annotation

GitHub Actions / Qodana for JS

Unused local symbol

Unused parameter props

// console.log('gallery props', props)

const { navigate } = useNavigation();

return (
<ScrollView>
<View style={{padding: 20}}>
<Text>This is the Gallery!</Text>
</View>
<View style={{
flex: 1,
flexDirection: 'row',
flexWrap: 'wrap',
}}>
{images.map((uri, index) => (
<TouchableWithoutFeedback
key={uri}
onPress={() => navigate('gallery/viewer', { params: { index, images }})}
>
<Image source={uri} style={{width: '50%', height: 200}} />
</TouchableWithoutFeedback>
))}
</View>

</ScrollView>
)
}
112 changes: 112 additions & 0 deletions app/gallery/viewer.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
import { Dimensions, FlatList, TouchableWithoutFeedback, View } from 'react-native'

Check warning on line 1 in app/gallery/viewer.tsx

View workflow job for this annotation

GitHub Actions / Qodana for JS

Unused import

Unused import specifier FlatList

Check warning on line 1 in app/gallery/viewer.tsx

View workflow job for this annotation

GitHub Actions / Qodana for JS

Unused import

Unused import specifier TouchableWithoutFeedback
import { Text } from '~/components/ui/text'
import { Image } from 'expo-image'

Check warning on line 3 in app/gallery/viewer.tsx

View workflow job for this annotation

GitHub Actions / Qodana for JS

Unused import

Unused import { Image } from 'expo-image'
import { database } from '~/lib/appwrite'

Check warning on line 4 in app/gallery/viewer.tsx

View workflow job for this annotation

GitHub Actions / Qodana for JS

Unused import

Unused import { database } from '\~/lib/appwrite'
import Gallery from 'react-native-awesome-gallery';
import { NavigationProp, NavigatorScreenParams, useNavigation } from '@react-navigation/native';
import { ScrollView } from 'react-native-gesture-handler';

Check warning on line 7 in app/gallery/viewer.tsx

View workflow job for this annotation

GitHub Actions / Qodana for JS

Unused import

Unused import { ScrollView } from 'react-native-gesture-handler';
import { useColorScheme } from '~/lib/useColorScheme';

// export default function HomeView() {
// const products = [
// {
// image_url:
// 'https://blog.logrocket.com/wp-content/uploads/2024/03/getting-started-nativewind-tailwind-react-native.png',
// },
// {
// image_url:
// 'https://cdn.discordapp.com/attachments/1046970799539617802/1221486753651757056/image.png?ex=6612c130&is=66004c30&hm=c562699ed94e561db08f0b16959c291330dc943d0ec3e4f23356ecfa8fdabbc8&',
// },
// ]

// async function fetchGallery() {
// const response = await database.listDocuments('hp_web', 'gallery')
// console.log(response)
// }

// const blurhash =
// '|rF?hV%2WCj[ayj[a|j[az_NaeWBj@ayfRayfQfQM{M|azj[azf6fQfQfQIpWXofj[ayj[j[fQayWCoeoeaya}j[ayfQa{oLj?j[WVj[ayayj[fQoff7azayj[ayj[j[ayofayayayj[fQj[ayayj[ayfjj[j[ayjuayj['

// return (
// <View className="flex-1 justify-center items-center">
// <Text>Gallery!</Text>
// <Image
// className=""
// source={'./assets/images/headpat_logo.png'}
// placeholder={blurhash}
// contentFit="cover"
// transition={1000}
// allowDownscaling={true}
// />
// <FlatList
// data={products}
// numColumns={1}
// renderItem={(product_data) => {
// return (
// <View className="justify-center p-3">
// <Image
// className="m-5 h-56 w-full mx-auto object-cover bg-slate-500 rounded-lg"
// source={'~/assets/images/headpat_logo.png'}
// placeholder={blurhash}
// contentFit="cover"
// transition={1000}
// allowDownscaling={true}
// />
// </View>
// )
// }}
// keyExtractor={(item) => {
// return item.image_url
// }}
// />
// </View>
// )
// }

const { height } = Dimensions.get('window');

Check warning on line 66 in app/gallery/viewer.tsx

View workflow job for this annotation

GitHub Actions / Qodana for JS

Unused local symbol

Unused constant height

const getRandomSize = function () {
const min = 400;
const max = 800;
return Math.floor(Math.random() * (max - min + 1)) + min;
};



function HeadpatGallery() {

const images = new Array(10)
.fill(0)
.map(() => `https://picsum.photos/${getRandomSize()}/${getRandomSize()}`);

const { isDarkColorScheme } = useColorScheme();

return (
<Gallery
data={images}
style={{ flex: 1, backgroundColor: isDarkColorScheme ? 'black' : 'white', justifyContent: 'center', height: "100%" }}
onIndexChange={(newIndex) => {
console.log(newIndex);
}}
// initialIndex={route.params[0]}
/>
);
}

export default function HomeView() {

//console.log(props);
//const { index, images } = route.params;

// const index = 'aaaaa';
const { navigate } = useNavigation<NavigationProp<NavigatorScreenParams>>();

Check warning on line 102 in app/gallery/viewer.tsx

View workflow job for this annotation

GitHub Actions / Qodana for JS

Unused local symbol

Unused constant navigate

return (
<View style={{flex:1}}>
<View style={{padding: 20}}>
<Text>This is the Gallery Viewer!</Text>
</View>
<HeadpatGallery />
</View>
)
}
54 changes: 54 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@
"react-i18next": "^14.1.0",
"react-native": "0.73.6",

Check warning on line 52 in package.json

View workflow job for this annotation

GitHub Actions / Qodana for JS

Check dependency licenses

Transitive dependency: 'readline' ('1.3.0') licenses cannot be recognized

Check warning on line 52 in package.json

View workflow job for this annotation

GitHub Actions / Qodana for JS

Check dependency licenses

Transitive dependency: 'wcwidth' ('1.0.1') 'MIT-SYNOPSYS' is not in the allowed or the prohibited licenses lists with project license 'PROPRIETARY-LICENSE'
"react-native-appwrite": "^0.1.0",
"react-native-awesome-gallery": "^0.3.8",
"react-native-calendars": "^1.1304.1",

Check warning on line 55 in package.json

View workflow job for this annotation

GitHub Actions / Qodana for JS

Check dependency licenses

Transitive dependency: 'xdate' ('0.8.2') 'AGPL-1.0-only' is not in the allowed or the prohibited licenses lists with project license 'PROPRIETARY-LICENSE'
"react-native-fs": "^2.20.0",
"react-native-gesture-handler": "~2.14.0",
Expand Down

0 comments on commit 1036b1c

Please sign in to comment.