prevent reactions render before width is available

Author: nhannah

examples/SampleApp/package.json

@@ -21,7 +21,7 @@
     "@react-navigation/native": "5.9.2",
     "@react-navigation/stack": "5.14.2",
     "@stream-io/flat-list-mvcp": "0.0.9",
-    "patch-package": "^6.4.7",
+    "patch-package": "6.4.7",
     "react": "16.13.1",
     "react-native": "0.63.4",
     "react-native-document-picker": "5.0.0",

src/components/Message/MessageSimple/ReactionList.tsx

@@ -190,8 +190,8 @@ const ReactionListWithContext = <
   };
 
   useEffect(() => {
-    showReactions(hasSupportedReactions);
-  }, [hasSupportedReactions]);
+    showReactions(hasSupportedReactions && messageContentWidth !== 0);
+  }, [hasSupportedReactions, messageContentWidth]);
 
   const animatedStyle = useAnimatedStyle<ViewStyle>(
     () => ({
@@ -200,7 +200,7 @@ const ReactionListWithContext = <
     [],
   );
 
-  if (!hasSupportedReactions) {
+  if (!hasSupportedReactions || messageContentWidth === 0) {
     return null;
   }