re: migrated selected components to useNavigation

2024-12-25 22:33:52 +03:00 · 2022-10-19 11:23:28 +05:00 · 2022-10-19 11:23:28 +05:00 · eb73394d04
commit eb73394d04
parent d496b29f44
7 changed files with 180 additions and 182 deletions
--- a/src/components/postCard/container/postCardContainer.js
+++ b/src/components/postCard/container/postCardContainer.js
@ -1,5 +1,4 @@
 import React, { useState, useEffect, useMemo } from 'react';
-import { withNavigation } from '@react-navigation/compat';
 import { connect } from 'react-redux';
 import get from 'lodash/get';

@ -13,6 +12,7 @@ import PostCardView from '../view/postCardView';
 import { default as ROUTES } from '../../../constants/routeNames';
 import { useAppDispatch } from '../../../hooks';
 import { showProfileModal } from '../../../redux/actions/uiAction';
+import { useNavigation } from '@react-navigation/native';
 /*
 *            Props Name        Description                                     Value
 *@props -->  props name here   description here                                Value Type Here
@ -20,8 +20,6 @@ import { showProfileModal } from '../../../redux/actions/uiAction';
 */

 const PostCardContainer = ({
-  // isRefresh,
-  navigation,
  currentAccount,
  content,
  isHideImage,
@ -32,6 +30,7 @@ const PostCardContainer = ({
  showQuickReplyModal,
  mutes,
 }) => {
+  const navigation = useNavigation();
  const dispatch = useAppDispatch();

  const [_content, setContent] = useState(content);
@ -90,7 +89,7 @@ const PostCardContainer = ({
  const _handleOnContentPress = (value) => {
    if (value) {
      navigation.navigate({
-        routeName: ROUTES.SCREENS.POST,
+        name: ROUTES.SCREENS.POST,
        params: {
          content: value,
        },
@ -101,7 +100,7 @@ const PostCardContainer = ({

  const _handleOnVotersPress = () => {
    navigation.navigate({
-      routeName: ROUTES.SCREENS.VOTERS,
+      name: ROUTES.SCREENS.VOTERS,
      params: {
        activeVotes,
        content: _content,
@ -112,7 +111,7 @@ const PostCardContainer = ({

  const _handleOnReblogsPress = () => {
    navigation.navigate({
-      routeName: ROUTES.SCREENS.REBLOGS,
+      name: ROUTES.SCREENS.REBLOGS,
      params: {
        reblogs,
      },
@ -154,4 +153,4 @@ const mapStateToProps = (state) => ({
  nsfw: state.application.nsfw,
 });

-export default withNavigation(connect(mapStateToProps)(PostCardContainer));
+export default connect(mapStateToProps)(PostCardContainer);
--- a/src/components/postDropdown/container/postDropdownContainer.tsx
+++ b/src/components/postDropdown/container/postDropdownContainer.tsx
@ -1,6 +1,5 @@
 import React, { PureComponent, Fragment } from 'react';
 import { connect } from 'react-redux';
-import { withNavigation } from '@react-navigation/compat';
 import { Alert, Share } from 'react-native';
 import { injectIntl } from 'react-intl';
 import get from 'lodash/get';
@ -24,8 +23,8 @@ import { OptionsModal } from '../../atoms';
 import { updateCurrentAccount } from '../../../redux/actions/accountAction';
 import showLoginAlert from '../../../utils/showLoginAlert';
 import { useUserActivityMutation } from '../../../providers/queries/pointQueries';
-import { generateRndStr } from '../../../utils/editor';
 import { PointActivityIds } from '../../../providers/ecency/ecency.types';
+import { useNavigation } from '@react-navigation/native';

 /*
 *            Props Name        Description                                     Value
@ -82,11 +81,11 @@ class PostDropdownContainer extends PureComponent {
    const _canUpdateCommunityPin =
      subscribedCommunities.data && !!content && content.community
        ? subscribedCommunities.data.reduce((role, subscription) => {
-          if (content.community === subscription[0]) {
-            return ['owner', 'admin', 'mod'].includes(subscription[2]);
-          }
-          return role;
-        }, false)
+            if (content.community === subscription[0]) {
+              return ['owner', 'admin', 'mod'].includes(subscription[2]);
+            }
+            return role;
+          }, false)
        : false;
    const _isPinnedInCommunity = !!content && content.stats?.is_pinned;

@ -178,7 +177,7 @@ class PostDropdownContainer extends PureComponent {
        break;
      case 'edit-history':
        navigation.navigate({
-          routeName: ROUTES.SCREENS.EDIT_HISTORY,
+          name: ROUTES.SCREENS.EDIT_HISTORY,
          params: {
            author: content?.author || '',
            permlink: content?.permlink || '',
@ -290,7 +289,7 @@ class PostDropdownContainer extends PureComponent {
        buttons: [
          {
            text: intl.formatMessage({ id: 'alert.cancel' }),
-            onPress: () => { },
+            onPress: () => {},
          },
          {
            text: intl.formatMessage({ id: 'alert.confirm' }),
@ -329,17 +328,16 @@ class PostDropdownContainer extends PureComponent {
  };

  _reblog = () => {
-    const { 
-      content, 
-      currentAccount, 
-      dispatch, 
-      intl, 
-      isLoggedIn, 
-      pinCode, 
+    const {
+      content,
+      currentAccount,
+      dispatch,
+      intl,
+      isLoggedIn,
+      pinCode,
      navigation,
-      userActivityMutation
-     } = this
-      .props as any;
+      userActivityMutation,
+    } = this.props as any;
    if (!isLoggedIn) {
      showLoginAlert({ navigation, intl });
      return;
@ -349,9 +347,9 @@ class PostDropdownContainer extends PureComponent {
        .then((response) => {
          //track user activity points ty=130
          userActivityMutation.mutate({
-            pointsTy:PointActivityIds.REBLOG,
-            transactionId:response.id
-          })
+            pointsTy: PointActivityIds.REBLOG,
+            transactionId: response.id,
+          });

          dispatch(
            toastNotification(
@ -441,7 +439,7 @@ class PostDropdownContainer extends PureComponent {

    if (isLoggedIn) {
      navigation.navigate({
-        routeName: ROUTES.SCREENS.EDITOR,
+        name: ROUTES.SCREENS.EDITOR,
        key: `editor_post_${content.permlink}`,
        params: {
          isReply: true,
@ -452,7 +450,7 @@ class PostDropdownContainer extends PureComponent {
    }
  };

-  _redirectToPromote = (routeName, from, redeemType) => {
+  _redirectToPromote = (name, from, redeemType) => {
    const { content, isLoggedIn, navigation, isPinCodeOpen } = this.props as any;
    const params = {
      from,
@ -462,15 +460,15 @@ class PostDropdownContainer extends PureComponent {

    if (isPinCodeOpen) {
      navigation.navigate({
-        routeName: ROUTES.SCREENS.PINCODE,
+        name: ROUTES.SCREENS.PINCODE,
        params: {
-          navigateTo: routeName,
+          navigateTo: name,
          navigateParams: params,
        },
      });
    } else if (isLoggedIn) {
      navigation.navigate({
-        routeName,
+        name,
        params,
      });
    }
@ -516,10 +514,12 @@ const mapStateToProps = (state) => ({
  subscribedCommunities: state.communities.subscribedCommunities,
 });

-const mapQueriesToProps = () => ({
-  userActivityMutation: useUserActivityMutation()
-})
+const mapHooksToProps = () => ({
+  userActivityMutation: useUserActivityMutation(),
+  navigation:useNavigation()
+});

-export default withNavigation(connect(mapStateToProps)(injectIntl((props) => (
-  <PostDropdownContainer {...props} {...mapQueriesToProps()} />)))
-);
+export default 
+  connect(mapStateToProps)(
+    injectIntl((props) => <PostDropdownContainer {...props} {...mapHooksToProps()} />),
+  );
--- a/src/components/postElements/body/view/postBodyView.js
+++ b/src/components/postElements/body/view/postBodyView.js
@ -1,7 +1,6 @@
 import React, { Fragment, useState, useEffect, useRef } from 'react';
 import { Linking, Modal, PermissionsAndroid, Platform, View } from 'react-native';
 import CameraRoll from '@react-native-community/cameraroll';
-import { withNavigation } from '@react-navigation/compat';
 import { useIntl, injectIntl } from 'react-intl';
 import EStyleSheet from 'react-native-extended-stylesheet';
 import ImageViewer from 'react-native-image-zoom-viewer';
@ -20,11 +19,14 @@ import { isCommunity } from '../../../../utils/communityValidation';
 import { GLOBAL_POST_FILTERS_VALUE } from '../../../../constants/options/filters';
 import { PostHtmlRenderer, VideoPlayer } from '../../..';
 import getWindowDimensions from '../../../../utils/getWindowDimensions';
+import { useNavigation } from '@react-navigation/native';

 const WIDTH = getWindowDimensions().width;

-const PostBody = ({ navigation, body, dispatch, onLoadEnd, width }) => {
+const PostBody = ({ body, dispatch, onLoadEnd, width }) => {
  console.log('body : ', body);
+  const navigation = useNavigation();
+
  const [isImageModalOpen, setIsImageModalOpen] = useState(false);

  const [postImages, setPostImages] = useState([]);
@ -124,10 +126,10 @@ const PostBody = ({ navigation, body, dispatch, onLoadEnd, width }) => {

  const _handleTagPress = (tag, filter = GLOBAL_POST_FILTERS_VALUE[0]) => {
    if (tag) {
-      const routeName = isCommunity(tag) ? ROUTES.SCREENS.COMMUNITY : ROUTES.SCREENS.TAG_RESULT;
+      const name = isCommunity(tag) ? ROUTES.SCREENS.COMMUNITY : ROUTES.SCREENS.TAG_RESULT;
      const key = `${filter}/${tag}`;
      navigation.navigate({
-        routeName,
+        name,
        params: {
          tag,
          filter,
@ -154,7 +156,7 @@ const PostBody = ({ navigation, body, dispatch, onLoadEnd, width }) => {
      }

      navigation.navigate({
-        routeName: ROUTES.SCREENS.POST,
+        name: ROUTES.SCREENS.POST,
        params: {
          author,
          permlink,
@ -167,7 +169,7 @@ const PostBody = ({ navigation, body, dispatch, onLoadEnd, width }) => {
  const _handleOnUserPress = (username) => {
    if (username) {
      navigation.navigate({
-        routeName: ROUTES.SCREENS.PROFILE,
+        name: ROUTES.SCREENS.PROFILE,
        params: {
          username,
        },
@ -353,4 +355,4 @@ const areEqual = (prevProps, nextProps) => {

 const mapStateToProps = (state) => ({});

-export default React.memo(injectIntl(withNavigation(connect(mapStateToProps)(PostBody))), areEqual);
+export default React.memo(injectIntl(connect(mapStateToProps)(PostBody)), areEqual);
--- a/src/components/postElements/headerDescription/view/postHeaderDescription.js
+++ b/src/components/postElements/headerDescription/view/postHeaderDescription.js
@ -1,7 +1,6 @@
 import React, { PureComponent } from 'react';
 import { View, Text, TouchableOpacity } from 'react-native';
 import { connect } from 'react-redux';
-import { withNavigation } from '@react-navigation/compat';
 import { injectIntl } from 'react-intl';

 // Components
@ -14,6 +13,7 @@ import styles from './postHeaderDescriptionStyles';
 import { default as ROUTES } from '../../../../constants/routeNames';
 import { IconButton } from '../../..';
 import { showProfileModal } from '../../../../redux/actions/uiAction';
+import { useNavigation } from '@react-navigation/native';

 // Constants
 const DEFAULT_IMAGE = require('../../../../assets/ecency.png');
@ -37,7 +37,7 @@ class PostHeaderDescription extends PureComponent {

    if (content && content.category && /hive-[1-3]\d{4,6}$/.test(content.category)) {
      navigation.navigate({
-        routeName: ROUTES.SCREENS.COMMUNITY,
+        name: ROUTES.SCREENS.COMMUNITY,
        params: {
          tag: content.category,
        },
@ -45,7 +45,7 @@ class PostHeaderDescription extends PureComponent {
    }
    if (content && content.category && !/hive-[1-3]\d{4,6}$/.test(content.category)) {
      navigation.navigate({
-        routeName: ROUTES.SCREENS.TAG_RESULT,
+        name: ROUTES.SCREENS.TAG_RESULT,
        params: {
          tag: content.category,
        },
@ -53,7 +53,7 @@ class PostHeaderDescription extends PureComponent {
    }
    if (content && typeof content === 'string' && /hive-[1-3]\d{4,6}$/.test(content)) {
      navigation.navigate({
-        routeName: ROUTES.SCREENS.COMMUNITY,
+        name: ROUTES.SCREENS.COMMUNITY,
        params: {
          tag: content,
        },
@ -61,7 +61,7 @@ class PostHeaderDescription extends PureComponent {
    }
    if (content && typeof content === 'string' && !/hive-[1-3]\d{4,6}$/.test(content)) {
      navigation.navigate({
-        routeName: ROUTES.SCREENS.TAG_RESULT,
+        name: ROUTES.SCREENS.TAG_RESULT,
        params: {
          tag: content,
        },
@ -179,4 +179,8 @@ class PostHeaderDescription extends PureComponent {

 const mapStateToProps = () => ({});

-export default connect(mapStateToProps)(withNavigation(injectIntl(PostHeaderDescription)));
+const mapHookToProps = () => ({
+  navigation:useNavigation()
+})
+
+export default connect(mapStateToProps)(injectIntl((props)=><PostHeaderDescription {...props} {...mapHookToProps()} />));
--- a/src/components/postView/container/postDisplayContainer.js
+++ b/src/components/postView/container/postDisplayContainer.js
@ -1,5 +1,4 @@
 import React, { useEffect, useState } from 'react';
-import { withNavigation } from '@react-navigation/compat';
 import { connect } from 'react-redux';
 import { injectIntl } from 'react-intl';
 import get from 'lodash/get';
@ -16,9 +15,9 @@ import { default as ROUTES } from '../../../constants/routeNames';

 // Component
 import PostDisplayView from '../view/postDisplayView';
+import { useNavigation } from '@react-navigation/native';

 const PostDisplayContainer = ({
-  navigation,
  post,
  fetchPost,
  isFetchPost,
@ -33,6 +32,8 @@ const PostDisplayContainer = ({
  isPostUnavailable,
  author,
 }) => {
+  const navigation = useNavigation();
+
  const [activeVotes, setActiveVotes] = useState([]);
  const [activeVotesCount, setActiveVotesCount] = useState(0);
  const [reblogs, setReblogs] = useState([]);
@ -56,7 +57,7 @@ const PostDisplayContainer = ({
  // Component Functions
  const _handleOnVotersPress = () => {
    navigation.navigate({
-      routeName: ROUTES.SCREENS.VOTERS,
+      name: ROUTES.SCREENS.VOTERS,
      params: {
        activeVotes,
        content: post,
@ -69,7 +70,7 @@ const PostDisplayContainer = ({
  const _handleOnReblogsPress = () => {
    if (reblogs.length > 0) {
      navigation.navigate({
-        routeName: ROUTES.SCREENS.REBLOGS,
+        name: ROUTES.SCREENS.REBLOGS,
        params: {
          reblogs,
        },
@ -80,7 +81,7 @@ const PostDisplayContainer = ({

  const _handleOnReplyPress = () => {
    navigation.navigate({
-      routeName: ROUTES.SCREENS.EDITOR,
+      name: ROUTES.SCREENS.EDITOR,
      key: 'editor_replay',
      params: {
        isReply: true,
@ -95,7 +96,7 @@ const PostDisplayContainer = ({
      const isReply = post.parent_author;

      navigation.navigate({
-        routeName: ROUTES.SCREENS.EDITOR,
+        name: ROUTES.SCREENS.EDITOR,
        key: `editor_post_${post.permlink}`,
        params: {
          isEdit: true,
@ -154,4 +155,4 @@ const mapStateToProps = (state) => ({
  isLoggedIn: state.application.isLoggedIn,
 });

-export default withNavigation(connect(mapStateToProps)(injectIntl(PostDisplayContainer)));
+export default connect(mapStateToProps)(injectIntl(PostDisplayContainer));
--- a/src/components/posts/view/postsView.js
+++ b/src/components/posts/view/postsView.js
@ -10,7 +10,6 @@ import {
  Button,
 } from 'react-native';
 import { useIntl } from 'react-intl';
-import { withNavigation } from '@react-navigation/compat';
 import { get } from 'lodash';

 // COMPONENTS
@ -33,6 +32,7 @@ import { default as ROUTES } from '../../../constants/routeNames';
 import globalStyles from '../../../globalStyles';
 import PostsList from '../../postsList';
 import { isDarkTheme } from '../../../redux/actions/applicationActions';
+import { useNavigation } from '@react-navigation/native';

 let _onEndReachedCalledDuringMomentum = true;

@ -42,7 +42,6 @@ const PostsView = ({
  handleImagesHide,
  isLoggedIn,
  handleOnScroll,
-  navigation,
  isLoading,
  refreshing,
  selectedFilterIndex,
@ -72,6 +71,8 @@ const PostsView = ({
  newPostsPopupPictures,
  setNewPostsPopupPictures,
 }) => {
+  const navigation = useNavigation();
+
  const intl = useIntl();
  const postsList = useRef(null);

@ -176,7 +177,7 @@ const PostsView = ({
                    onPressRightText={handleFollowUserButtonPress}
                    handleOnPress={(username) =>
                      navigation.navigate({
-                        routeName: ROUTES.SCREENS.PROFILE,
+                        name: ROUTES.SCREENS.PROFILE,
                        params: {
                          username,
                        },
@ -211,7 +212,7 @@ const PostsView = ({
                    name={item.name}
                    handleOnPress={(name) =>
                      navigation.navigate({
-                        routeName: ROUTES.SCREENS.COMMUNITY,
+                        name: ROUTES.SCREENS.COMMUNITY,
                        params: {
                          tag: name,
                        },
@ -393,5 +394,5 @@ const PostsView = ({
  );
 };

-export default withNavigation(PostsView);
-/* eslint-enable */
+export default PostsView;
+/* eslint-enable */
--- a/src/components/tabbedPosts/view/listEmptyView.tsx
+++ b/src/components/tabbedPosts/view/listEmptyView.tsx
@ -1,32 +1,32 @@
-import React, {useEffect, useState} from 'react';
+import React, { useEffect, useState } from 'react';
 import { useIntl } from 'react-intl';
 import { get } from 'lodash';
 import { Text, View, FlatList } from 'react-native';
+import { useSelector, useDispatch } from 'react-redux';
 import { NoPost, PostCardPlaceHolder, UserListItem } from '../..';
 import globalStyles from '../../../globalStyles';
 import { CommunityListItem, EmptyScreen } from '../../basicUIElements';
 import styles from './tabbedPostsStyles';
 import { default as ROUTES } from '../../../constants/routeNames';
-import { withNavigation } from '@react-navigation/compat';
-import {useSelector, useDispatch } from 'react-redux';
-import { fetchCommunities, leaveCommunity, subscribeCommunity } from '../../../redux/actions/communitiesAction';
+import {
+  fetchCommunities,
+  leaveCommunity,
+  subscribeCommunity,
+} from '../../../redux/actions/communitiesAction';
 import { fetchLeaderboard, followUser, unfollowUser } from '../../../redux/actions/userAction';
 import { getCommunity } from '../../../providers/hive/dhive';
+import { useNavigation } from '@react-navigation/native';

 interface TabEmptyViewProps {
-  filterKey:string,
-  isNoPost:boolean,
-  navigation:any,
+  filterKey: string;
+  isNoPost: boolean;
 }

-const TabEmptyView = ({
-  filterKey,
-  isNoPost,
-  navigation,
-}: TabEmptyViewProps) => {
-
+const TabEmptyView = ({ filterKey, isNoPost }: TabEmptyViewProps) => {
  const intl = useIntl();
  const dispatch = useDispatch();
+  const navigation = useNavigation();
+  
  //redux properties
  const isLoggedIn = useSelector((state) => state.application.isLoggedIn);
  const subscribingCommunities = useSelector(
@ -43,23 +43,22 @@ const TabEmptyView = ({

  //hooks

-  useEffect(()=>{
+  useEffect(() => {
    if (isNoPost) {
      if (filterKey === 'friends') {
        if (recommendedUsers.length === 0) {
          _getRecommendedUsers();
        }
-      } else if(filterKey === 'communities') {
+      } else if (filterKey === 'communities') {
        if (recommendedCommunities.length === 0) {
          _getRecommendedCommunities();
        }
      }
    }
-  }, [isNoPost])
-
+  }, [isNoPost]);

  useEffect(() => {
-    const {loading, error, data} = leaderboard;
+    const { loading, error, data } = leaderboard;
    if (!loading) {
      if (!error && data && data.length > 0) {
        _formatRecommendedUsers(data);
@ -68,7 +67,7 @@ const TabEmptyView = ({
  }, [leaderboard]);

  useEffect(() => {
-    const {loading, error, data} = communities;
+    const { loading, error, data } = communities;
    if (!loading) {
      if (!error && data && data?.length > 0) {
        _formatRecommendedCommunities(data);
@ -76,7 +75,6 @@ const TabEmptyView = ({
    }
  }, [communities]);

-
  useEffect(() => {
    const recommendeds = [...recommendedCommunities];

@ -103,8 +101,6 @@ const TabEmptyView = ({
    setRecommendedCommunities(recommendeds);
  }, [subscribingCommunities]);

-
-
  useEffect(() => {
    const recommendeds = [...recommendedUsers];

@ -130,13 +126,12 @@ const TabEmptyView = ({

    setRecommendedUsers(recommendeds);
  }, [followingUsers]);
-  

  //fetching
  const _getRecommendedUsers = () => dispatch(fetchLeaderboard());
  const _getRecommendedCommunities = () => dispatch(fetchCommunities('', 10));

-  //formating 
+  //formating
  const _formatRecommendedCommunities = async (communitiesArray) => {
    try {
      const ecency = await getCommunity('hive-125125');
@ -192,7 +187,6 @@ const TabEmptyView = ({
    );
  };

-
  const _handleFollowUserButtonPress = (data, isFollowing) => {
    let followAction;
    let successToastText = '';
@ -223,14 +217,15 @@ const TabEmptyView = ({
    dispatch(followAction(currentAccount, pinCode, data, successToastText, failToastText));
  };

-
  const _handleOnPressLogin = () => {
    navigation.navigate(ROUTES.SCREENS.LOGIN);
  };

-
-//render related operations
-  if ((filterKey === 'feed' || filterKey === 'friends' || filterKey === 'communities') && !isLoggedIn) {
+  //render related operations
+  if (
+    (filterKey === 'feed' || filterKey === 'friends' || filterKey === 'communities') &&
+    !isLoggedIn
+  ) {
    return (
      <NoPost
        imageStyle={styles.noImage}
@ -245,92 +240,89 @@ const TabEmptyView = ({

  if (isNoPost) {
    if (filterKey === 'friends') {
-     
-        return (
-          <>
-            <Text style={[globalStyles.subTitle, styles.noPostTitle]}>
-              {intl.formatMessage({ id: 'profile.follow_people' })}
-            </Text>
-            <FlatList
-              data={recommendedUsers}
-              extraData={recommendedUsers}
-              keyExtractor={(item, index) => `${item._id || item.id}${index}`}
-              renderItem={({ item, index }) => (
-                <UserListItem
-                  index={index}
-                  username={item._id}
-                  isHasRightItem
-                  rightText={
-                    item.isFollowing
-                      ? intl.formatMessage({ id: 'user.unfollow' })
-                      : intl.formatMessage({ id: 'user.follow' })
-                  }
-                  rightTextStyle={[styles.followText, item.isFollowing && styles.unfollowText]}
-                  isLoggedIn={isLoggedIn}
-                  isFollowing={item.isFollowing}
-                  isLoadingRightAction={
-                    followingUsers.hasOwnProperty(item._id) && followingUsers[item._id].loading
-                  }
-                  onPressRightText={_handleFollowUserButtonPress}
-                  handleOnPress={(username) =>
-                    navigation.navigate({
-                      routeName: ROUTES.SCREENS.PROFILE,
-                      params: {
-                        username,
-                      },
-                      key: username,
-                    })
-                  }
-                />
-              )}
-            />
-          </>
-        );
-      } else if (filterKey === 'communities') {
-        return (
-          <>
-            <Text style={[globalStyles.subTitle, styles.noPostTitle]}>
-              {intl.formatMessage({ id: 'profile.follow_communities' })}
-            </Text>
-            <FlatList
-              data={recommendedCommunities}
-              keyExtractor={(item, index) => `${item.id || item.title}${index}`}
-              renderItem={({ item, index }) => (
-                <CommunityListItem
-                  index={index}
-                  title={item.title}
-                  about={item.about}
-                  admins={item.admins}
-                  id={item.id}
-                  authors={item.num_authors}
-                  posts={item.num_pending}
-                  subscribers={item.subscribers}
-                  isNsfw={item.is_nsfw}
-                  name={item.name}
-                  handleOnPress={(name) =>
-                    navigation.navigate({
-                      routeName: ROUTES.SCREENS.COMMUNITY,
-                      params: {
-                        tag: name,
-                      },
-                    })
-                  }
-                  handleSubscribeButtonPress={_handleSubscribeCommunityButtonPress}
-                  isSubscribed={item.isSubscribed}
-                  isLoadingRightAction={
-                    subscribingCommunities.hasOwnProperty(item.name) &&
-                    subscribingCommunities[item.name].loading
-                  }
-                  isLoggedIn={isLoggedIn}
-                />
-              )}
-            />
-          </>
-        );
-    } else {
      return (
-        <EmptyScreen style={styles.emptyAnimationContainer} />
-      )
+        <>
+          <Text style={[globalStyles.subTitle, styles.noPostTitle]}>
+            {intl.formatMessage({ id: 'profile.follow_people' })}
+          </Text>
+          <FlatList
+            data={recommendedUsers}
+            extraData={recommendedUsers}
+            keyExtractor={(item, index) => `${item._id || item.id}${index}`}
+            renderItem={({ item, index }) => (
+              <UserListItem
+                index={index}
+                username={item._id}
+                isHasRightItem
+                rightText={
+                  item.isFollowing
+                    ? intl.formatMessage({ id: 'user.unfollow' })
+                    : intl.formatMessage({ id: 'user.follow' })
+                }
+                rightTextStyle={[styles.followText, item.isFollowing && styles.unfollowText]}
+                isLoggedIn={isLoggedIn}
+                isFollowing={item.isFollowing}
+                isLoadingRightAction={
+                  followingUsers.hasOwnProperty(item._id) && followingUsers[item._id].loading
+                }
+                onPressRightText={_handleFollowUserButtonPress}
+                handleOnPress={(username) =>
+                  navigation.navigate({
+                    name: ROUTES.SCREENS.PROFILE,
+                    params: {
+                      username,
+                    },
+                    key: username,
+                  })
+                }
+              />
+            )}
+          />
+        </>
+      );
+    } else if (filterKey === 'communities') {
+      return (
+        <>
+          <Text style={[globalStyles.subTitle, styles.noPostTitle]}>
+            {intl.formatMessage({ id: 'profile.follow_communities' })}
+          </Text>
+          <FlatList
+            data={recommendedCommunities}
+            keyExtractor={(item, index) => `${item.id || item.title}${index}`}
+            renderItem={({ item, index }) => (
+              <CommunityListItem
+                index={index}
+                title={item.title}
+                about={item.about}
+                admins={item.admins}
+                id={item.id}
+                authors={item.num_authors}
+                posts={item.num_pending}
+                subscribers={item.subscribers}
+                isNsfw={item.is_nsfw}
+                name={item.name}
+                handleOnPress={(name) =>
+                  navigation.navigate({
+                    name: ROUTES.SCREENS.COMMUNITY,
+                    params: {
+                      tag: name,
+                    },
+                  })
+                }
+                handleSubscribeButtonPress={_handleSubscribeCommunityButtonPress}
+                isSubscribed={item.isSubscribed}
+                isLoadingRightAction={
+                  subscribingCommunities.hasOwnProperty(item.name) &&
+                  subscribingCommunities[item.name].loading
+                }
+                isLoggedIn={isLoggedIn}
+              />
+            )}
+          />
+        </>
+      );
+    } else {
+      return <EmptyScreen style={styles.emptyAnimationContainer} />;
    }
  }

@ -341,5 +333,4 @@ const TabEmptyView = ({
  );
 };

-export default withNavigation(TabEmptyView);
-
+export default TabEmptyView;