Partial fix #495

Added list removing users

src/components/Account.tsx

@@ -4,39 +4,47 @@ import { StackNavigationProp } from '@react-navigation/stack'
 import { TabLocalStackParamList } from '@utils/navigation/navigators'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
-import React, { useCallback } from 'react'
+import React, { PropsWithChildren } from 'react'
 import { Pressable, View } from 'react-native'
 import GracefullyImage from './GracefullyImage'
 import CustomText from './Text'
 
 export interface Props {
   account: Mastodon.Account
-  onPress?: () => void
+  Component?: typeof View | typeof Pressable
+  props?: {}
 }
 
-const ComponentAccount: React.FC<Props> = ({ account, onPress: customOnPress }) => {
+const ComponentAccount: React.FC<PropsWithChildren & Props> = ({
+  account,
+  Component,
+  props,
+  children
+}) => {
   const { colors } = useTheme()
   const navigation = useNavigation<StackNavigationProp<TabLocalStackParamList>>()
 
-  const onPress = useCallback(() => navigation.push('Tab-Shared-Account', { account }), [])
+  if (!props) {
+    props = { onPress: () => navigation.push('Tab-Shared-Account', { account }) }
+  }
 
-  return (
-    <Pressable
-      accessibilityRole='button'
-      style={{
+  return React.createElement(
+    Component || Pressable,
+    {
+      ...props,
+      style: {
         flex: 1,
         paddingHorizontal: StyleConstants.Spacing.Global.PagePadding,
         paddingVertical: StyleConstants.Spacing.M,
         flexDirection: 'row',
-        alignSelf: 'flex-start',
+        justifyContent: 'space-between',
         alignItems: 'center'
-      }}
-      onPress={customOnPress || onPress}
-    >
+      }
+    },
+    <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
       <GracefullyImage
         uri={{ original: account.avatar, static: account.avatar_static }}
         style={{
-          alignSelf: 'flex-start',
           width: StyleConstants.Avatar.S,
           height: StyleConstants.Avatar.S,
           borderRadius: 6,
@@ -62,7 +70,8 @@ const ComponentAccount: React.FC<Props> = ({ account, onPress: customOnPress })
           @{account.acct}
         </CustomText>
       </View>
-    </Pressable>
+    </View>,
+    children
   )
 }