custom feed screen

src/view/com/algos/AlgoItem.tsx

@@ -1,5 +1,11 @@
 import React from 'react'
-import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native'
+import {
+  StyleProp,
+  StyleSheet,
+  View,
+  ViewStyle,
+  TouchableOpacity,
+} from 'react-native'
 import {Text} from '../util/text/Text'
 import {usePalette} from 'lib/hooks/usePalette'
 import {s} from 'lib/styles'
@@ -7,13 +13,25 @@ import {UserAvatar} from '../util/UserAvatar'
 import {Button} from '../util/forms/Button'
 import {observer} from 'mobx-react-lite'
 import {AlgoItemModel} from 'state/models/feeds/algo/algo-item'
+import {useNavigation} from '@react-navigation/native'
+import {NavigationProp} from 'lib/routes/types'
 
 const AlgoItem = observer(
   ({item, style}: {item: AlgoItemModel; style?: StyleProp<ViewStyle>}) => {
     const pal = usePalette('default')
+    const navigation = useNavigation<NavigationProp>()
 
     return (
-      <View style={[styles.container, style]} key={item.data.uri}>
+      <TouchableOpacity
+        accessibilityRole="button"
+        style={[styles.container, style]}
+        onPress={() => {
+          navigation.navigate('CustomFeed', {
+            name: item.data.creator.did,
+            rkey: item.data.uri,
+          })
+        }}
+        key={item.data.uri}>
         <View style={[styles.headerContainer]}>
           <View style={[s.mr10]}>
             <UserAvatar size={36} avatar={item.data.avatar} />
@@ -54,7 +72,7 @@ const AlgoItem = observer(
             />
           </View>
         </View>
-      </View>
+      </TouchableOpacity>
     )
   },
 )

src/view/screens/CustomFeed.tsx

@@ -0,0 +1,50 @@
+import {NativeStackScreenProps} from '@react-navigation/native-stack'
+import {CommonNavigatorParams} from 'lib/routes/types'
+import {observer} from 'mobx-react-lite'
+import React, {useEffect, useMemo, useRef} from 'react'
+import {FlatList, StyleSheet, View} from 'react-native'
+import {useStores} from 'state/index'
+import {AlgoItemModel} from 'state/models/feeds/algo/algo-item'
+import {PostsFeedModel} from 'state/models/feeds/posts'
+import {withAuthRequired} from 'view/com/auth/withAuthRequired'
+import {Feed} from 'view/com/posts/Feed'
+import {ViewHeader} from 'view/com/util/ViewHeader'
+import {Text} from 'view/com/util/text/Text'
+
+type Props = NativeStackScreenProps<CommonNavigatorParams, 'CustomFeed'>
+export const CustomFeed = withAuthRequired(
+  observer(({route}: Props) => {
+    const rootStore = useStores()
+    const scrollElRef = useRef<FlatList>(null)
+
+    const {rkey, name} = route.params
+
+    const algoFeed: PostsFeedModel = useMemo(() => {
+      const feed = new PostsFeedModel(rootStore, 'custom', {
+        feed: rkey,
+      })
+      feed.setup()
+      return feed
+    }, [rkey, rootStore])
+
+    return (
+      <View style={[styles.container]}>
+        <ViewHeader title={'Custom Feed'} showOnDesktop />
+
+        <Feed
+          scrollElRef={scrollElRef}
+          testID={'test-feed'}
+          key="default"
+          feed={algoFeed}
+        />
+      </View>
+    )
+  }),
+)
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    height: '100%',
+  },
+})