Fix single post scrolling for long content and comments

components/Post.js

@@ -1,5 +1,5 @@
 import React, { useMemo, useRef, useState } from 'react';
-import { Text, Pressable, FlatList, StyleSheet, View, Share, Alert, Linking, Animated, PanResponder } from 'react-native';
+import { Text, Pressable, StyleSheet, View, Share, Alert, Linking, Animated, PanResponder } from 'react-native';
 import { Button, Card, Chip } from 'react-native-paper';
 import API from './../API.js';
 import UserName from './UserName.js';
@@ -71,9 +71,6 @@ let Post = (props) => {
             API.removePostBookmark(post._id)
         }
     }
-    const renderComment = ({ item }) => (
-        <Comment comment={item} postid={post._id} />
-    );
     const handleTagPress = (tag) => {
         // Alert.alert("tag pressed", `You pressed the tag: ${tag}`);
         // You can navigate to another screen or perform any other action here
@@ -278,11 +275,15 @@ let Post = (props) => {
             {showCommentsB && <NewComment postid={post._id} newComentAdded={newComentAdded} />}
             {
                 showCommentsB &&
-                <FlatList
+                <View>
-                    data={post.comments}
+                    {post.comments.map((comment, index) => (
-                    renderItem={renderComment}
+                        <Comment
-                    keyExtractor={item => item.createdAt}
+                            key={`${comment?.createdAt || "comment"}-${index}`}
-                />
+                            comment={comment}
+                            postid={post._id}
+                        />
+                    ))}
+                </View>
             }
         </Card>
     );

components/SinglePostComponent.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { View } from 'react-native';
+import { View, ScrollView } from 'react-native';
 import API from './../API.js';
 import Post from './Post.js';
 
@@ -19,8 +19,10 @@ let SinglePostComponent = ({ postId, hideComments }) => {
         }
     }, [postId]);
     return (post._id ? (
-        <View>
+        <View style={{ flex: 1 }}>
-            <Post post={post} showComments={hideComments ? false : true} />
+            <ScrollView contentContainerStyle={{ paddingBottom: 18 }}>
+                <Post post={post} showComments={hideComments ? false : true} />
+            </ScrollView>
         </View>
     ) : null);
 };