Add post embeds (images and external links)

2 files changed, 32 insertions, 0 deletions

diff --git a/src/view/com/lightbox/Image.tsx b/src/view/com/lightbox/Image.tsx
new file mode 100644
index 000000000..2e3307774
--- /dev/null
+++ b/src/view/com/lightbox/Image.tsx
@@ -0,0 +1,25 @@
+import React from 'react'
+import {Image, StyleSheet, useWindowDimensions, View} from 'react-native'
+
+export function Component({uri}: {uri: string}) {
+  const winDim = useWindowDimensions()
+  const top = winDim.height / 2 - (winDim.width - 40) / 2 - 100
+  console.log(uri)
+  return (
+    <View style={[styles.container, {top}]}>
+      <Image style={styles.image} source={{uri}} />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    left: 0,
+  },
+  image: {
+    resizeMode: 'contain',
+    width: '100%',
+    aspectRatio: 1,
+  },
+})
diff --git a/src/view/com/lightbox/Lightbox.tsx b/src/view/com/lightbox/Lightbox.tsx
index 9432f0151..198f20391 100644
--- a/src/view/com/lightbox/Lightbox.tsx
+++ b/src/view/com/lightbox/Lightbox.tsx
@@ -7,6 +7,7 @@ import {useStores} from '../../../state'
 import * as models from '../../../state/models/shell-ui'
 
 import * as ProfileImageLightbox from './ProfileImage'
+import * as ImageLightbox from './Image'
 
 export const Lightbox = observer(function Lightbox() {
   const store = useStores()
@@ -26,6 +27,12 @@ export const Lightbox = observer(function Lightbox() {
         {...(store.shell.activeLightbox as models.ProfileImageLightbox)}
       />
     )
+  } else if (store.shell.activeLightbox?.name === 'image') {
+    element = (
+      <ImageLightbox.Component
+        {...(store.shell.activeLightbox as models.ImageLightbox)}
+      />
+    )
   } else {
     return <View />
   }