martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-04-23 01:55:17 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

adding image modal

Browse Source
This commit is contained in:
balzack 2024-12-30 17:37:59 -08:00
parent 219c04e213
commit 032217cefb
2 changed files with 35 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
app/client/mobile/src/message/imageAsset/ImageAsset.styled.ts
View File

@ -2,6 +2,20 @@ import {StyleSheet} from 'react-native';
import {Colors} from '../constants/Colors';
export const styles = StyleSheet.create({
modal: {
width: '100%',
height: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
},
blur: {
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
},
image: {
},
thumb: {

32
app/client/mobile/src/message/imageAsset/ImageAsset.tsx
View File

@ -1,17 +1,19 @@
import React, { useState, useEffect, useRef } from 'react';
import { Animated, View, Image, useAnimatedValue } from 'react-native'
import { Modal, Pressable, Animated, View, Image, useAnimatedValue } from 'react-native'
import { Text } from 'react-native-paper'
import { useImageAsset } from './useImageAsset.hook';
import { MediaAsset } from '../../conversation/Conversation';
import { styles } from './ImageAsset.styled'
import {BlurView} from '@react-native-community/blur';
export function ImageAsset({ topicId, asset }: { topicId: string, asset: MediaAsset }) {
const { state, actions } = useImageAsset(topicId, asset);
const fadeAnim = useAnimatedValue(0);
const [modal, setModal] = useState(false);
const opacity = useAnimatedValue(0);
useEffect(() => {
if (state.loaded) {
Animated.timing(fadeAnim, {
Animated.timing(opacity, {
toValue: 1,
duration: 100,
useNativeDriver: true,
@ -22,15 +24,23 @@ export function ImageAsset({ topicId, asset }: { topicId: string, asset: MediaAs
return (
<View style={styles.image}>
{ state.thumbUrl && (
<Animated.Image
style={[styles.thumb,{opacity: fadeAnim,},]}
resizeMode="contain"
height={92}
width={92 * state.ratio}
source={{ uri: state.thumbUrl }}
onLoad={actions.loaded}
/>
<Pressable onPress={()=>setModal(true)}>
<Animated.Image
style={[styles.thumb,{opacity},]}
resizeMode="contain"
height={92}
width={92 * state.ratio}
source={{ uri: state.thumbUrl }}
onLoad={actions.loaded}
/>
</Pressable>
)}
<Modal animationType="fade" transparent={true} supportedOrientations={['portrait', 'landscape']} visible={modal} onRequestClose={() => setModal(false)}>
<View style={styles.modal}>
<BlurView style={styles.blur} blurType="dark" blurAmount={2} reducedTransparencyFallbackColor="dark" />
<View style={{ width: 200, height: 200, backgroundColor: 'yellow' }} />
</View>
</Modal>
</View>
);
}