upgraded <Posts/> to <TabbedPosts/>

src/components/postsList/container/postsListContainer.tsx

@@ -151,7 +151,7 @@ const postsListContainer = ({
               data={posts}
               showsVerticalScrollIndicator={false}
               renderItem={_renderItem}
-              keyExtractor={(content) => content.permlink}
+              keyExtractor={(content) => `${content.author}/${content.permlink}`}
               removeClippedSubviews
               onEndReachedThreshold={1}
               maxToRenderPerBatch={3}

src/components/profile/profileView.js

@@ -23,6 +23,7 @@ import { getFormatedCreatedDate } from '../../utils/time';
 // Styles
 import styles from './profileStyles';
 import globalStyles from '../../globalStyles';
+import { TabbedPosts } from '../tabbedPosts';
 
 class ProfileView extends PureComponent {
   constructor(props) {
@@ -191,7 +192,7 @@ class ProfileView extends PureComponent {
               tabLabel={this._getTabLabel(intl.formatMessage({ id: 'profile.post' }))}
               style={styles.postTabBar}
             >
-              <Posts
+              <TabbedPosts
                 filterOptions={PROFILE_FILTERS}
                 filterOptionsValue={PROFILE_FILTERS_VALUE}
                 selectedOptionIndex={0}

src/components/tabbedPosts/container/tabbedPosts.tsx

@@ -13,7 +13,7 @@ import TabContent from '../view/tabContent';
 export const TabbedPosts = ({
   filterOptions,
   filterOptionsValue,
-  initialFilterIndex,
+  selectedOptionIndex,
   feedSubfilterOptions,
   feedSubfilterOptionsValue,
   isFeedScreen,
@@ -31,7 +31,7 @@ export const TabbedPosts = ({
 
   //initialize state
 
-  const [initialTabIndex] = useState(initialFilterIndex == 0 && isFeedScreen ? filterOptions.length : initialFilterIndex)
+  const [initialTabIndex] = useState(selectedOptionIndex == 0 && isFeedScreen ? filterOptions.length : selectedOptionIndex)
   // const [promotedPosts, setPromotedPosts] = useState([]);
 
   const [mainFilters] = useState<TabItem[]>(
@@ -42,10 +42,12 @@ export const TabbedPosts = ({
   )
 
   const [subFilters] = useState<TabItem[]>(
-    feedSubfilterOptions.map((label, index)=>({
+    feedSubfilterOptions
+    ? feedSubfilterOptions.map((label, index)=>({
       filterKey:feedSubfilterOptionsValue[index], 
       label
     } as TabItem))
+    : []
   )
 
   const [combinedFilters] = useState([...mainFilters, ...subFilters]);
@@ -121,7 +123,7 @@ export const TabbedPosts = ({
         shouldStack={isFeedScreen && feedUsername}
         firstStack={mainFilters}
         secondStack={subFilters}
-        initialFirstStackIndex={initialFilterIndex}
+        initialFirstStackIndex={selectedOptionIndex}
         onFilterSelect={_onFilterSelect}
         toggleHideImagesFlag={_toggleHideImagesFlag}
       />
@@ -132,6 +134,7 @@ export const TabbedPosts = ({
   return (
     <ScrollableTabView
       scrollWithoutAnimation={true}
+      locked={true}
       initialPage={initialTabIndex}
       renderTabBar={_renderTabBar}>
       {pages}

src/components/tabbedPosts/services/tabbedPostsModels.ts

@@ -4,7 +4,7 @@ export interface TabbedPostsProps {
     filterOptionsValue:string[],
     isFeedScreen:boolean,
     feedUsername:string,
-    initialFilterIndex:number,
+    selectedOptionIndex:number,
     feedSubfilterOptions:string[],
     feedSubfilterOptionsValue:string[],
     getFor:string,

src/components/tabbedPosts/view/tabContent.tsx

@@ -60,9 +60,10 @@ const TabContent = ({
     
     if (isFeedScreen) {
       AppState.addEventListener('change', _handleAppStateChange);
-      _initContent(true);
     }
 
+    _initContent(true);
+
     return _cleanup;
   }, [])
 

src/screens/community/screen/communityScreen.js

@@ -3,7 +3,7 @@ import { View, Text } from 'react-native';
 import { useIntl } from 'react-intl';
 
 // Components
-import { Posts, CollapsibleCard, Header, BasicHeader } from '../../../components';
+import { Posts, CollapsibleCard, Header, BasicHeader, TabbedPosts } from '../../../components';
 import { Tag, ProfileSummaryPlaceHolder } from '../../../components/basicUIElements';
 
 import CommunityContainer from '../container/communityContainer';
@@ -100,7 +100,7 @@ const CommunityScreen = ({ navigation }) => {
             <ProfileSummaryPlaceHolder />
           )}
           <View tabLabel={intl.formatMessage({ id: 'search.posts' })} style={styles.tabbarItem}>
-            <Posts
+            <TabbedPosts
               key={tag}
               filterOptions={GLOBAL_POST_FILTERS}
               filterOptionsValue={GLOBAL_POST_FILTERS_VALUE}

src/screens/feed/screen/feedScreen.js

@@ -31,7 +31,7 @@ const FeedScreen = () => {
               feedSubfilterOptions={[...FEED_SUBFILTERS]}
               feedSubfilterOptionsValue={[...FEED_SUBFILTERS_VALUE]}
               getFor={get(currentAccount, 'name', null) ? 'feed' : 'hot'}
-              initialFilterIndex={get(currentAccount, 'name', null) ? 0 : 2}
+              selectedOptionIndex={get(currentAccount, 'name', null) ? 0 : 2}
               feedUsername={get(currentAccount, 'name', null)}
               isFeedScreen={true}
             />

src/screens/tagResult/screen/tagResultScreen.js

@@ -4,7 +4,7 @@ import ScrollableTabView from 'react-native-scrollable-tab-view';
 import { useIntl } from 'react-intl';
 
 // Components
-import { SearchInput, Posts, TabBar } from '../../../components';
+import { SearchInput, Posts, TabBar, TabbedPosts } from '../../../components';
 
 // Styles
 import styles from './tagResultStyles';
@@ -52,7 +52,7 @@ const TagResultScreen = ({ navigation }) => {
       </SafeAreaView>
       <ScrollableTabView style={globalStyles.tabView} renderTabBar={_renderTabbar}>
         <View tabLabel={intl.formatMessage({ id: 'search.posts' })} style={styles.tabbarItem}>
-          <Posts
+          <TabbedPosts
             key={tag}
             filterOptions={GLOBAL_POST_FILTERS}
             filterOptionsValue={GLOBAL_POST_FILTERS_VALUE}