diff --git a/src/components/tabbedPosts/container/tabbedPosts.tsx b/src/components/tabbedPosts/container/tabbedPosts.tsx
index 3f325c2c5..ca3f3a6a4 100644
--- a/src/components/tabbedPosts/container/tabbedPosts.tsx
+++ b/src/components/tabbedPosts/container/tabbedPosts.tsx
@@ -1,81 +1,60 @@
import React, { useState } from 'react';
-// import { Animated, View, TouchableOpacity, StyleSheet } from 'react-native';
-// import { TabView, SceneMap } from 'react-native-tab-view';
+import { useIntl } from 'react-intl';
+import ScrollableTabView from 'react-native-scrollable-tab-view';
+import { useSelector } from 'react-redux';
+import { FilterBar } from '../..';
+import PostsList from '../../postsList';
+import { StackedTabBar } from '../view/stackedTabBar';
+import { TabbedPostsProps } from './tabbedPostsProps';
-// const FirstRoute = () => (
-//
-// );
-// const SecondRoute = () => (
-//
-// );
-export const TabbedPosts = () => {
- return null;
- // const [state, setState] = useState({
- // index: 0,
- // routes: [
- // { key: 'first', title: 'First' },
- // { key: 'second', title: 'Second' },
- // ],
- // })
+export const TabbedPosts = ({
+ filterOptions,
+ filterOptionsValue,
+ initialFilterIndex,
+ feedSubfilterOptions,
+ feedSubfilterOptionsValue,
+ isFeedScreen
+}:TabbedPostsProps) => {
- // const _handleIndexChange = (index) => setState({...state, index });
+ const intl = useIntl();
+ const isLoggedIn = useSelector((state) => state.application.isLoggedIn);
- // const _renderTabBar = (props) => {
- // const inputRange = props.navigationState.routes.map((x, i) => i);
+ const [initialPageIndex] = useState(initialFilterIndex == 0 && isFeedScreen && isLoggedIn ? filterOptions.length : initialFilterIndex)
- // return (
- //
- // {props.navigationState.routes.map((route, i) => {
- // const opacity = props.position.interpolate({
- // inputRange,
- // outputRange: inputRange.map((inputIndex) =>
- // inputIndex === i ? 1 : 0.5
- // ),
- // });
- // return (
- // setState({...state, index: i })}>
- // {route.title}
- //
- // );
- // })}
- //
- // );
- // };
+ const pages = [
+ ...filterOptions,
+ ...feedSubfilterOptions,
+ ].map((filter)=>(
+
+ ))
- // //routes will be build dynamically
- // const _renderScene = SceneMap({
- // first: FirstRoute,
- // second: SecondRoute,
- // });
-
- // //tab view will be the parent component
- // return (
- //
- // );
- //
+ const _renderTabBar = (props) => {
+ return (
+
+ )
+ }
+
+
+ return (
+
+ {pages}
+
+ );
+
}
-
-// const styles = StyleSheet.create({
-// container: {
-// flex: 1,
-// },
-// tabBar: {
-// flexDirection: 'row',
-// },
-// tabItem: {
-// flex: 1,
-// alignItems: 'center',
-// padding: 16,
-// },
-// });
diff --git a/src/components/tabbedPosts/container/tabbedPostsProps.ts b/src/components/tabbedPosts/container/tabbedPostsProps.ts
new file mode 100644
index 000000000..7caaf04c2
--- /dev/null
+++ b/src/components/tabbedPosts/container/tabbedPostsProps.ts
@@ -0,0 +1,9 @@
+export interface TabbedPostsProps {
+ filterOptions:string[],
+ filterOptionsValue:string[],
+ isFeedScreen:boolean,
+ feedUsername:string,
+ initialFilterIndex:number,
+ feedSubfilterOptions:string[],
+ feedSubfilterOptionsValue:string[],
+}
\ No newline at end of file
diff --git a/src/components/tabbedPosts/view/stackedTabBar.tsx b/src/components/tabbedPosts/view/stackedTabBar.tsx
new file mode 100644
index 000000000..3fc260144
--- /dev/null
+++ b/src/components/tabbedPosts/view/stackedTabBar.tsx
@@ -0,0 +1,68 @@
+import React, { useState } from "react";
+import { useIntl } from "react-intl";
+import { FilterBar } from "../..";
+
+interface StackedTabBarProps {
+ activeTab:boolean,
+ goToPage:(pageIndex)=>void,
+ tabs:string[],
+ shouldStack:boolean,
+ filterOptions:string[],
+ subFilterOptions:string[],
+ initialFilterIndex:number
+}
+
+export const StackedTabBar = ({
+ activeTab,
+ goToPage,
+ tabs,
+ shouldStack,
+ filterOptions,
+ subFilterOptions,
+ initialFilterIndex
+
+}:StackedTabBarProps) => {
+
+ const intl = useIntl();
+ const [selectedFilterIndex, setSelectedFilterIndex] = useState(initialFilterIndex);
+ const [selectedFeedSubfilterIndex, setSelectedFeedSubfilterIndex] = useState(0);
+
+ return (
+ <>
+
+ intl.formatMessage({ id: `home.${item.toLowerCase()}` }).toUpperCase(),
+ )}
+ selectedOptionIndex={selectedFilterIndex}
+ rightIconName="view-module"
+ rightIconType="MaterialIcons"
+ onDropdownSelect={(index)=>{
+ setSelectedFilterIndex(index);
+ if(index == 0 && shouldStack){
+ goToPage(filterOptions.length + selectedFeedSubfilterIndex)
+ }else{
+ goToPage(index);
+ }
+
+ }}
+ onRightIconPress={()=>{}}
+ />
+
+ {
+ selectedFilterIndex == 0 && shouldStack && (
+
+ intl.formatMessage({ id: `home.${item.toLowerCase()}` }).toUpperCase(),
+ )}
+ selectedOptionIndex={selectedFeedSubfilterIndex}
+ onDropdownSelect={(index)=>{
+ setSelectedFeedSubfilterIndex(index)
+ goToPage(filterOptions.length + index);
+ }}
+ />
+ )
+ }
+
+ >
+ )
+ }
\ No newline at end of file
diff --git a/src/screens/feed/screen/feedScreen.js b/src/screens/feed/screen/feedScreen.js
index 8840fa19f..97be29bad 100644
--- a/src/screens/feed/screen/feedScreen.js
+++ b/src/screens/feed/screen/feedScreen.js
@@ -3,7 +3,7 @@ import { SafeAreaView } from 'react-native';
import get from 'lodash/get';
// Components
-import { Posts, Header } from '../../../components';
+import { Posts, Header, TabbedPosts } from '../../../components';
// Container
import { AccountContainer } from '../../../containers';
@@ -25,7 +25,17 @@ const FeedScreen = () => {
-
+ {/* {
selectedOptionIndex={get(currentAccount, 'name', null) ? 0 : 2}
feedUsername={get(currentAccount, 'name', null)}
isFeedScreen={true}
- />
+ /> */}
)}