Open comments on singlepost view

components/Post.js

@@ -13,18 +13,20 @@ import GlobalState from '../contexts/GlobalState.js';
 import i18n from "../i18nMessages.js";
 import ProfilePhotoCircle from './ProfilePhotoCircle.js';
 import { posthog } from './../PostHog.js';
+import { useNavigation } from '@react-navigation/native';
 
 
 let Post = (props) => {
     const gState = useSnapshot(GlobalState);
     const viewer = gState.me;
-    let [showCommentsB, changeshowCommentsB] = useState(false);
+    let [showCommentsB, changeshowCommentsB] = useState(props.showComments || false);
     let [post, changePost] = useState(props.post);
     let [likes, changeLikes] = useState(Object.keys(post.reactions).length);
     let [bookmarked, changeBookmarked] = useState(post.bookmarks && post.bookmarks.includes(viewer._id));
     let toProfileText = post.toProfile && post.toProfile !== post.profileid ?
         <ProfilePhotoCircle profileid={post.toProfile} small={true} /> : undefined;
     let cleanContent = post.content.replace(/@[A-z]+:.+\w/g, '').trim();
+    const navigation = useNavigation();
     //cleanContent = convertLinks(cleanContent);
     const newComentAdded = (commentData) => {
         let newPostObj = { ...post };
@@ -105,7 +107,13 @@ let Post = (props) => {
                     {likes}
                 </Button>
                 <Button icon="forum" labelStyle={{ fontSize: 17 }} style={{ flow: 1 }}
-                    onPress={() => { changeshowCommentsB(!showCommentsB) }}
+                    onPress={() => { 
+                        // changeshowCommentsB(!showCommentsB) // Show comments
+                        // Change view to single post
+                        navigation.navigate("SinglePost", {
+                            postid: post._id,
+                        });
+                    }}
                     color="#555"
                 >
                     {post.comments.length}
@@ -133,12 +141,11 @@ let Post = (props) => {
             {showCommentsB && <NewComment postid={post._id} newComentAdded={newComentAdded} />}
             {
                 showCommentsB &&
-                <ScrollView style={{ maxHeight: 300 }}>
                     <FlatList
                         data={post.comments}
                         renderItem={renderComment}
                         keyExtractor={item => item.createdAt}
-                    /></ScrollView>
+                    />
             }
         </Card>
     );

components/SinglePostComponent.js

@@ -1,9 +1,9 @@
 import React, { useState, useEffect } from 'react';
-import { ScrollView } from 'react-native';
+import { FlatList } from 'react-native';
 import API from './../API.js';
 import Post from './Post.js';
 
-let SinglePostComponent = ({ postId }) => {
+let SinglePostComponent = ({ postId, hideComments }) => {
     let [post, setPost] = useState({});
     useEffect(() => {
         let subscribed = true;
@@ -19,9 +19,12 @@ let SinglePostComponent = ({ postId }) => {
         }
     }, [postId]);
     return (post._id ? (
-        <ScrollView>
-        <Post post={post}/>
-        </ScrollView>
+        <FlatList
+            data={[post]}
+            renderItem={({ item }) => <Post post={item} showComments={hideComments ? false : true}/>}
+            keyExtractor={item => item._id}
+        />
+            
     ) : null);
 };