diff --git a/src/components/CustomTab/index.tsx b/src/components/CustomTab/index.tsx index d76c57fe..499e88aa 100644 --- a/src/components/CustomTab/index.tsx +++ b/src/components/CustomTab/index.tsx @@ -20,6 +20,7 @@ const CustomTab = ({ tabName, onTabChange }: ICustomTab): ReactElement => { const [indicatorAnim] = useState(new Animated.Value(0)); const [tabOneWidth, setTabOneWidth] = useState(0); const [tabTwoWidth, setTabTwoWidth] = useState(0); + const [tabThreeWidth, setTabThreeWidth] = useState(0); const handleTabPress = (tabIndex: number) => { setActiveTab(tabIndex); onTabChange && onTabChange(tabIndex); @@ -33,8 +34,8 @@ const CustomTab = ({ tabName, onTabChange }: ICustomTab): ReactElement => { const getIndicatorPosition = () => { const tabWidth = tabOneWidth; const translateX = indicatorAnim.interpolate({ - inputRange: [0, 1, 2], - outputRange: [8, 12, tabWidth + 12], + inputRange: [0, 1, 2, 3], + outputRange: [8, 12, tabWidth + 12, tabOneWidth+tabTwoWidth+12], }); return { transform: [{ translateX }] }; }; @@ -46,12 +47,16 @@ const CustomTab = ({ tabName, onTabChange }: ICustomTab): ReactElement => { var { width } = event.nativeEvent.layout; setTabTwoWidth(width); }; - + const getLayoutTabThreeWidth = (event: LayoutChangeEvent) => { + var { width } = event.nativeEvent.layout; + setTabThreeWidth(width); + }; const dynamicWidthStyle: StyleProp = { - width: activeTab === 1 ? tabOneWidth - 20 : tabTwoWidth - 20, + width: activeTab === 1 ? tabOneWidth - 20 : activeTab === 2 ? tabTwoWidth - 20 : activeTab === 3 ? tabThreeWidth - 20 : undefined, }; return ( + handleTabPress(1)} @@ -68,6 +73,16 @@ const CustomTab = ({ tabName, onTabChange }: ICustomTab): ReactElement => { {tabName[1]} + {tabName.length > 2 && + handleTabPress(3)} + > + + {tabName[2]} + + + } diff --git a/src/screens/GlobalFeed/index.tsx b/src/screens/GlobalFeed/index.tsx index 42835a30..9aa0d0cb 100644 --- a/src/screens/GlobalFeed/index.tsx +++ b/src/screens/GlobalFeed/index.tsx @@ -9,9 +9,8 @@ import { type IGlobalFeedRes, } from '../../providers/Social/feed-sdk'; import useAuth from '../../hooks/useAuth'; -import PostList, { type IPost } from '../../components/Social/PostList'; +import PostList from '../../components/Social/PostList'; import { getStyles } from './styles'; -import MyCommunity from '../../components/MyCommunity'; import { amityPostsFormatter } from '../../util/postDataFormatter'; import { useDispatch, useSelector } from 'react-redux' @@ -23,7 +22,7 @@ export default function GlobalFeed() { const { postList } = useSelector((state: RootState) => state.globalFeed) const { updateGlobalFeed, deleteByPostId } = globalFeedSlice.actions - const dispatch = useDispatch() // ()=> dispatch(updateGlobalFeed()) + const dispatch = useDispatch() const styles = getStyles(); const { client, isConnected } = useAuth(); @@ -69,10 +68,7 @@ export default function GlobalFeed() { dispatch(deleteByPostId({ postId })) } }; - const onPostChange = (post: IPost) => { - console.log('post:', post) - } return ( @@ -81,13 +77,12 @@ export default function GlobalFeed() { ( - + )} keyExtractor={(item) => item.postId.toString()} onEndReachedThreshold={0.5} onEndReached={handleLoadMore} ref={flatListRef} - ListHeaderComponent={} extraData={postList} /> diff --git a/src/screens/Home/index.tsx b/src/screens/Home/index.tsx index 8fa96aae..5cb77500 100644 --- a/src/screens/Home/index.tsx +++ b/src/screens/Home/index.tsx @@ -26,13 +26,13 @@ import { useNavigation } from '@react-navigation/native'; import type { NativeStackNavigationProp } from '@react-navigation/native-stack'; import { useTheme } from 'react-native-paper'; import type { MyMD3Theme } from '../../providers/amity-ui-kit-provider'; +import AllMyCommunity from '../AllMyCommunity'; LogBox.ignoreAllLogs(true); export default function Home() { - // const { t, i18n } = useTranslation(); const styles = getStyles(); const { client } = useAuth(); - const theme = useTheme() as MyMD3Theme ; - + const theme = useTheme() as MyMD3Theme; + const [activeTab, setActiveTab] = useState(1); const [isVisible, setIsVisible] = useState(false); @@ -43,7 +43,6 @@ export default function Home() { navigation.navigate('CommunitySearch'); }; navigation.setOptions({ - // eslint-disable-next-line react/no-unstable-nested-components headerRight: () => ( @@ -84,15 +83,24 @@ export default function Home() { }, [isVisible, slideAnimation]); const renderTabComponent = () => { - let globalFeedStyle: StyleProp | StyleProp[] = - styles.visible; - styles.visible; - let exploreStyle: StyleProp | StyleProp[] = - styles.invisible; - styles.visible; + let globalFeedStyle: StyleProp | StyleProp[] = styles.visible; + let exploreStyle: StyleProp | StyleProp[] = styles.invisible; + let myCommunityStyle: StyleProp | StyleProp[] = styles.invisible; + + if(activeTab=== 1){ + globalFeedStyle = styles.visible; + exploreStyle = styles.invisible; + myCommunityStyle = styles.invisible; + } if (activeTab === 2) { globalFeedStyle = styles.invisible; exploreStyle = styles.visible; + myCommunityStyle = styles.invisible; + } + if (activeTab === 3) { + globalFeedStyle = styles.invisible; + exploreStyle = styles.invisible; + myCommunityStyle = styles.visible; } return ( @@ -103,6 +111,9 @@ export default function Home() { + + + ); }; @@ -121,9 +132,8 @@ export default function Home() { }; return ( - {/* {renderTabView()} */} {renderTabComponent()}