Asc 18258 react native UI kit to move the my community tab to the top of the global feed per the new design

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<number>(0);
   const [tabTwoWidth, setTabTwoWidth] = useState<number>(0);
+  const [tabThreeWidth, setTabThreeWidth] = useState<number>(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<any> = {
-    width: activeTab === 1 ? tabOneWidth - 20 : tabTwoWidth - 20,
+    width: activeTab === 1 ? tabOneWidth - 20 : activeTab === 2 ? tabTwoWidth - 20 : activeTab === 3 ? tabThreeWidth - 20 : undefined,
   };
   return (
     <View style={styles.container}>
+
       <TouchableOpacity
         onLayout={getLayoutTabOneWidth}
         onPress={() => handleTabPress(1)}
@@ -68,6 +73,16 @@ const CustomTab = ({ tabName, onTabChange }: ICustomTab): ReactElement => {
           {tabName[1]}
         </Text>
       </TouchableOpacity>
+      {tabName.length > 2 &&
+        <TouchableOpacity
+          onLayout={getLayoutTabThreeWidth}
+          onPress={() => handleTabPress(3)}
+        >
+          <Text style={[styles.tabText, activeTab === 3 && styles.activeTabText]}>
+            {tabName[2]}
+          </Text>
+        </TouchableOpacity>
+      }
       <Animated.View
         style={[styles.indicator, getIndicatorPosition(), dynamicWidthStyle]}
       />

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 (
     <View style={styles.feedWrap}>
@@ -81,13 +77,12 @@ export default function GlobalFeed() {
         <FlatList
           data={postList}
           renderItem={({ item, index }) => (
-            <PostList onDelete={onDeletePost} postDetail={item} onChange={onPostChange} postIndex={index} />
+            <PostList onDelete={onDeletePost} postDetail={item} postIndex={index} />
           )}
           keyExtractor={(item) => item.postId.toString()}
           onEndReachedThreshold={0.5}
           onEndReached={handleLoadMore}
           ref={flatListRef}
-          ListHeaderComponent={<MyCommunity />}
           extraData={postList}
         />
 

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: () => (
       <TouchableOpacity onPress={onClickSearch} style={styles.btnWrap}>
         <SvgXml xml={searchIcon(theme.colors.base)} width="25" height="25" />
@@ -84,15 +83,24 @@ export default function Home() {
   }, [isVisible, slideAnimation]);
 
   const renderTabComponent = () => {
-    let globalFeedStyle: StyleProp<ImageStyle> | StyleProp<ImageStyle>[] =
-      styles.visible;
-    styles.visible;
-    let exploreStyle: StyleProp<ImageStyle> | StyleProp<ImageStyle>[] =
-      styles.invisible;
-    styles.visible;
+    let globalFeedStyle: StyleProp<ImageStyle> | StyleProp<ImageStyle>[] = styles.visible;
+    let exploreStyle: StyleProp<ImageStyle> | StyleProp<ImageStyle>[] = styles.invisible;
+    let myCommunityStyle: StyleProp<ImageStyle> | StyleProp<ImageStyle>[] = 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 (
       <View>
@@ -103,6 +111,9 @@ export default function Home() {
         <View style={exploreStyle}>
           <Explore />
         </View>
+        <View style={myCommunityStyle} >
+          <AllMyCommunity />
+        </View>
       </View>
     );
   };
@@ -121,9 +132,8 @@ export default function Home() {
   };
   return (
     <View>
-      {/* {renderTabView()} */}
       <CustomTab
-        tabName={['Newsfeed', 'Explore']}
+        tabName={['Newsfeed', 'Explore', 'Community']}
         onTabChange={handleTabChange}
       />
       {renderTabComponent()}