Fix Thread button crash (#7330)

* remove the right button component id

* do not render thread follow button

* use lodash uniqueId instead of uuid

app/components/selected_users/index.tsx

@@ -121,7 +121,7 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
             shadowRadius: 24,
         },
         toast: {
-            backgroundColor: theme.centerChannelColor,
+            backgroundColor: theme.errorTextColor,
         },
         usersScroll: {
             marginTop: SCROLL_MARGIN_TOP,
@@ -133,7 +133,7 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
             flexWrap: 'wrap',
         },
         message: {
-            color: changeOpacity(theme.centerChannelColor, 0.6),
+            color: theme.centerChannelBg,
             fontSize: 12,
             marginRight: 5,
             marginTop: 10,
@@ -250,11 +250,11 @@ export default function SelectedUsers({
 
     const animatedToastStyle = useAnimatedStyle(() => {
         return {
-            bottom: TOAST_BOTTOM_MARGIN + totalPanelHeight.value,
+            bottom: TOAST_BOTTOM_MARGIN + totalPanelHeight.value + insets.bottom,
             opacity: withTiming(showToast ? 1 : 0, {duration: 250}),
             position: 'absolute',
         };
-    }, [showToast, keyboard]);
+    }, [showToast, insets.bottom]);
 
     const animatedViewStyle = useAnimatedStyle(() => ({
         height: withTiming(totalPanelHeight.value, {duration: 250}),

app/screens/thread/thread.tsx

@@ -1,6 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
+import {uniqueId} from 'lodash';
 import React, {useCallback, useEffect, useRef, useState} from 'react';
 import {type LayoutChangeEvent, StyleSheet, View} from 'react-native';
 import {type Edge, SafeAreaView} from 'react-native-safe-area-context';
@@ -62,11 +63,12 @@ const Thread = ({
 
     useEffect(() => {
         if (isCRTEnabled && rootId) {
+            const id = `${componentId}-${rootId}-${uniqueId()}`;
+            const name = Screens.THREAD_FOLLOW_BUTTON;
             setButtons(componentId, {rightButtons: [{
-                id: `${componentId}-${rootId}`,
+                id,
                 component: {
-                    id: rootId,
-                    name: Screens.THREAD_FOLLOW_BUTTON,
+                    name,
                     passProps: {
                         threadId: rootId,
                     },

app/screens/thread/thread_follow_button/index.ts

@@ -19,14 +19,21 @@ type Props = WithDatabaseArgs & {
 
 const enhanced = withObservables(['threadId'], ({threadId, database}: Props) => {
     const thId = threadId || EphemeralStore.getCurrentThreadId();
-    const tId = observeTeamIdByThreadId(database, thId).pipe(
-        switchMap((t) => of$(t || '')),
-    );
+    let tId = of$('');
+    let isFollowing = of$(false);
+
+    if (thId) {
+        tId = observeTeamIdByThreadId(database, thId).pipe(
+            switchMap((t) => of$(t || '')),
+        );
+
+        isFollowing = observeThreadById(database, thId).pipe(
+            switchMap((thread) => of$(thread?.isFollowing)),
+        );
+    }
 
     return {
-        isFollowing: observeThreadById(database, thId).pipe(
-            switchMap((thread) => of$(thread?.isFollowing)),
-        ),
+        isFollowing,
         threadId: of$(thId),
         teamId: tId,
     };

app/screens/thread/thread_follow_button/thread_follow_button.tsx

@@ -59,6 +59,10 @@ function ThreadFollow({isFollowing, teamId, threadId}: Props) {
         updateThreadFollowing(serverUrl, teamId, threadId, !isFollowing, false);
     });
 
+    if (!threadId) {
+        return null;
+    }
+
     const containerStyle: StyleProp<ViewStyle> = [styles.container];
     let followTextProps = {
         id: t('threads.follow'),