Fix CommunitiesScreen and AccountsBottomSheet bugs

src/components/accountsBottomSheet/container/accountsBottomSheetContainer.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 
 import { navigate } from '../../../navigation/service';
@@ -16,6 +16,9 @@ const AccountsBottomSheetContainer = ({ navigation }) => {
   const dispatch = useDispatch();
   const accountsBottomSheetRef = useRef();
 
+  const [pressSwitch, setPressSwitch] = useState(false);
+  const [switchingAccount, setSwitchingAccount] = useState({});
+
   const isVisibleAccountsBottomSheet = useSelector(
     (state) => state.ui.isVisibleAccountsBottomSheet,
   );
@@ -28,6 +31,12 @@ const AccountsBottomSheetContainer = ({ navigation }) => {
     }
   }, [isVisibleAccountsBottomSheet]);
 
+  useEffect(() => {
+    if (pressSwitch && switchingAccount.name && !isVisibleAccountsBottomSheet) {
+      _handleSwitch();
+    }
+  }, [pressSwitch, isVisibleAccountsBottomSheet, switchingAccount]);
+
   const _navigateToRoute = (routeName = null) => {
     if (routeName) {
       accountsBottomSheetRef.current?.closeAccountsBottomSheet();
@@ -35,43 +44,47 @@ const AccountsBottomSheetContainer = ({ navigation }) => {
     }
   };
 
-  const _switchAccount = async (switchingAccount = {}) => {
+  const _switchAccount = async (account = {}) => {
     accountsBottomSheetRef.current?.closeAccountsBottomSheet();
 
-    //TODO: Remove setTimeout
-    const timeout = setTimeout(async () => {
-      if (switchingAccount.username !== currentAccount.name) {
-        const accountData = accounts.filter(
-          (account) => account.username === switchingAccount.username,
-        )[0];
+    setPressSwitch(true);
+    setSwitchingAccount(account);
+  };
 
-        // control user persist whole data or just username
-        if (accountData.name) {
-          accountData.username = accountData.name;
+  const _handleSwitch = async () => {
+    setPressSwitch(false);
+    setSwitchingAccount({});
 
-          dispatch(updateCurrentAccount(accountData));
-          dispatch(isRenderRequired(true));
+    if (switchingAccount.username !== currentAccount.name) {
+      const accountData = accounts.filter(
+        (account) => account.username === switchingAccount.username,
+      )[0];
 
-          const upToDateCurrentAccount = await switchAccount(accountData.name);
-          const realmData = await getUserDataWithUsername(accountData.name);
+      // control user persist whole data or just username
+      if (accountData.name) {
+        accountData.username = accountData.name;
 
-          upToDateCurrentAccount.username = upToDateCurrentAccount.name;
-          upToDateCurrentAccount.local = realmData[0];
+        dispatch(updateCurrentAccount(accountData));
+        dispatch(isRenderRequired(true));
 
-          dispatch(updateCurrentAccount(upToDateCurrentAccount));
-        } else {
-          const _currentAccount = await switchAccount(accountData.username);
-          const realmData = await getUserDataWithUsername(accountData.username);
+        const upToDateCurrentAccount = await switchAccount(accountData.name);
+        const realmData = await getUserDataWithUsername(accountData.name);
 
-          _currentAccount.username = _currentAccount.name;
-          _currentAccount.local = realmData[0];
+        upToDateCurrentAccount.username = upToDateCurrentAccount.name;
+        upToDateCurrentAccount.local = realmData[0];
 
-          dispatch(updateCurrentAccount(_currentAccount));
-          dispatch(isRenderRequired(true));
-        }
+        dispatch(updateCurrentAccount(upToDateCurrentAccount));
+      } else {
+        const _currentAccount = await switchAccount(accountData.username);
+        const realmData = await getUserDataWithUsername(accountData.username);
+
+        _currentAccount.username = _currentAccount.name;
+        _currentAccount.local = realmData[0];
+
+        dispatch(updateCurrentAccount(_currentAccount));
+        dispatch(isRenderRequired(true));
       }
-    }, 750);
-    clearTimeout(timeout);
+    }
   };
 
   return (

src/components/accountsBottomSheet/view/accountsBottomSheetView.js

@@ -32,12 +32,15 @@ const AccountsBottomSheet = forwardRef(
         bottomSheetModalRef.current?.present();
       },
       closeAccountsBottomSheet() {
-        bottomSheetModalRef.current?.dismiss();
+        _handleCloseBottomSheet();
       },
     }));
 
-    const _handleDismissBottomSheet = () => {
+    const _handleCloseBottomSheet = () => {
       bottomSheetModalRef.current?.dismiss();
+    };
+
+    const _handleDispatchDismissBottomSheet = () => {
       dispatch(toggleAccountsBottomSheet());
     };
 
@@ -47,8 +50,7 @@ const AccountsBottomSheet = forwardRef(
         <View style={styles.avatarAndNameContainer}>
           <UserAvatar username={item.username} />
           <View style={styles.nameContainer}>
-            {item.displayName && <Text style={styles.displayName}>{item.displayName}</Text>}
-            <Text style={styles.name}>{`@${item.name}`}</Text>
+            <Text style={styles.name}>{`@${item.username}`}</Text>
           </View>
         </View>
         {currentAccount.name === item.name && (
@@ -64,14 +66,13 @@ const AccountsBottomSheet = forwardRef(
             <TouchableOpacity
               style={styles.backdrop}
               activeOpacity={1}
-              onPress={bottomSheetModalRef.current?.dismiss}
-              // when call the onPress, it calls onDismiss.
+              onPress={_handleCloseBottomSheet}
             />
           )}
           ref={bottomSheetModalRef}
           index={0}
           snapPoints={snapPoints}
-          onDismiss={_handleDismissBottomSheet}
+          onDismiss={_handleDispatchDismissBottomSheet}
           shouldMeasureContentHeight={true}
         >
           <BottomSheetFlatList

src/components/communitiesList/view/communitiesListStyles.js

@@ -4,7 +4,6 @@ export default EStyleSheet.create({
   container: {
     flex: 1,
     padding: 8,
-    marginBottom: 40,
     flexDirection: 'row',
     backgroundColor: '$primaryBackgroundColor',
   },

src/globalStyles.js

@@ -76,6 +76,7 @@ export default EStyleSheet.create({
   tabView: {
     alignSelf: 'center',
     backgroundColor: '$primaryBackgroundColor',
+    width: '100%',
   },
   swipeItemWrapper: {
     flex: 1,

src/screens/communities/view/communitiesScreen.js

@@ -58,44 +58,42 @@ const CommunitiesScreen = ({ navigation, searchValue }) => {
       }) => {
         return (
           <View style={styles.container}>
-            <SafeAreaView forceInset={{ bottom: 'never' }} style={{ flex: 1 }}>
-              <BasicHeader
-                title={intl.formatMessage({
-                  id: 'side_menu.communities',
-                })}
-              />
-              <ScrollableTabView
-                style={globalStyles.tabView}
-                renderTabBar={_renderTabbar}
-                prerenderingSiblingsNumber={Infinity}
+            <BasicHeader
+              title={intl.formatMessage({
+                id: 'side_menu.communities',
+              })}
+            />
+            <ScrollableTabView
+              style={globalStyles.tabView}
+              renderTabBar={_renderTabbar}
+              prerenderingSiblingsNumber={Infinity}
+            >
+              <View
+                tabLabel={intl.formatMessage({ id: 'communities.joined' })}
+                style={styles.tabbarItem}
               >
-                <View
-                  tabLabel={intl.formatMessage({ id: 'communities.joined' })}
-                  style={styles.tabbarItem}
-                >
-                  <SubscribedCommunitiesList
-                    data={subscriptions}
-                    subscribingCommunities={subscribingCommunitiesInJoinedTab}
-                    handleSubscribeButtonPress={handleSubscribeButtonPress}
-                    handleOnPress={handleOnPress}
-                  />
-                </View>
-                <View
-                  tabLabel={intl.formatMessage({ id: 'communities.discover' })}
-                  style={styles.tabbarItem}
-                >
-                  <CommunitiesList
-                    data={discovers}
-                    subscribingCommunities={subscribingCommunitiesInDiscoverTab}
-                    handleOnPress={handleOnPress}
-                    handleSubscribeButtonPress={handleSubscribeButtonPress}
-                    isLoggedIn={true}
-                    noResult={discovers.length === 0}
-                    screen="communitiesScreenDiscoverTab"
-                  />
-                </View>
-              </ScrollableTabView>
-            </SafeAreaView>
+                <SubscribedCommunitiesList
+                  data={subscriptions}
+                  subscribingCommunities={subscribingCommunitiesInJoinedTab}
+                  handleSubscribeButtonPress={handleSubscribeButtonPress}
+                  handleOnPress={handleOnPress}
+                />
+              </View>
+              <View
+                tabLabel={intl.formatMessage({ id: 'communities.discover' })}
+                style={styles.tabbarItem}
+              >
+                <CommunitiesList
+                  data={discovers}
+                  subscribingCommunities={subscribingCommunitiesInDiscoverTab}
+                  handleOnPress={handleOnPress}
+                  handleSubscribeButtonPress={handleSubscribeButtonPress}
+                  isLoggedIn={true}
+                  noResult={discovers.length === 0}
+                  screen="communitiesScreenDiscoverTab"
+                />
+              </View>
+            </ScrollableTabView>
           </View>
         );
       }}