[PAY-1423] Fix empty chat message box with currently playing track (#…

…3553) Co-authored-by: Marcus Pasell <3690498+rickyrombo@users.noreply.github.com>
AudiusProject · Jun 9, 2023 · ba19c1d · ba19c1d
1 parent 970224f
commit ba19c1d
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 16 deletions.
diff --git a/packages/mobile/src/screens/chat-screen/ChatScreen.tsx b/packages/mobile/src/screens/chat-screen/ChatScreen.tsx
@@ -105,8 +105,9 @@ const useStyles = makeStyles(({ spacing, palette, typography }) => ({
     flexShrink: 1
   },
   listContentContainer: {
-    paddingHorizontal: spacing(6),
-    display: 'flex'
+    display: 'flex',
+    flexGrow: 1,
+    paddingHorizontal: spacing(6)
   },
   profileTitle: {
     display: 'flex',
@@ -165,6 +166,10 @@ const useStyles = makeStyles(({ spacing, palette, typography }) => ({
   loadingSpinner: {
     height: spacing(10),
     width: spacing(10)
+  },
+  emptyContainer: {
+    display: 'flex',
+    flexGrow: 1
   }
 }))
 
@@ -576,14 +581,12 @@ export const ChatScreen = () => {
             }
             style={[
               styles.keyboardAvoiding,
-              hasCurrentlyPlayingTrack ? { bottom: PLAY_BAR_HEIGHT } : null
+              hasCurrentlyPlayingTrack
+                ? { bottom: PLAY_BAR_HEIGHT, paddingTop: PLAY_BAR_HEIGHT }
+                : null
             ]}
             onKeyboardHide={measureChatContainerBottom}
           >
-            {chat?.messagesStatus === Status.SUCCESS &&
-            chatMessages?.length === 0 ? (
-              <EmptyChatMessages />
-            ) : null}
             {isLoading ? (
               <View style={styles.loadingSpinnerContainer}>
                 <LoadingSpinner style={styles.loadingSpinner} />
@@ -607,6 +610,16 @@ export const ChatScreen = () => {
                   maintainVisibleContentPosition={
                     maintainVisibleContentPosition
                   }
+                  ListEmptyComponent={
+                    // Wrap the EmptyChatMessages in a view here rather than within the component
+                    // For some reason, this prevents this inversion bug:
+                    // https://github.com/facebook/react-native/issues/21196
+                    // This is better than doing a rotation transform because when the react bug is fixed,
+                    // our workaround won't re-introduce the bug!
+                    <View style={styles.emptyContainer}>
+                      <EmptyChatMessages />
+                    </View>
+                  }
                   ListHeaderComponent={
                     canSendMessage ? null : <ChatUnavailable chatId={chatId} />
                   }

diff --git a/packages/mobile/src/screens/chat-screen/EmptyChatMessages.tsx b/packages/mobile/src/screens/chat-screen/EmptyChatMessages.tsx
@@ -10,9 +10,8 @@ const messages = {
 }
 
 const useStyles = makeStyles(({ spacing, palette, typography }) => ({
-  emptyContainer: {
+  root: {
     marginTop: spacing(8),
-    marginHorizontal: spacing(6),
     padding: spacing(6),
     display: 'flex',
     flexDirection: 'row',
@@ -22,7 +21,7 @@ const useStyles = makeStyles(({ spacing, palette, typography }) => ({
     borderWidth: 1,
     borderRadius: spacing(2)
   },
-  emptyTextContainer: {
+  textContainer: {
     display: 'flex',
     flexDirection: 'column',
     marginHorizontal: spacing(6)
@@ -31,13 +30,13 @@ const useStyles = makeStyles(({ spacing, palette, typography }) => ({
     height: spacing(16),
     width: spacing(16)
   },
-  emptyTitle: {
+  title: {
     fontSize: typography.fontSize.xxl,
     color: palette.neutral,
     fontFamily: typography.fontByWeight.bold,
     lineHeight: typography.fontSize.xxl * 1.3
   },
-  emptyText: {
+  text: {
     marginTop: spacing(2),
     marginRight: spacing(6),
     fontSize: typography.fontSize.large,
@@ -49,11 +48,11 @@ const useStyles = makeStyles(({ spacing, palette, typography }) => ({
 export const EmptyChatMessages = () => {
   const styles = useStyles()
   return (
-    <View style={styles.emptyContainer}>
+    <View style={styles.root}>
       <Image style={styles.wavingHand} source={WavingHand} />
-      <View style={styles.emptyTextContainer}>
-        <Text style={styles.emptyTitle}>{messages.sayHello}</Text>
-        <Text style={styles.emptyText}>{messages.firstImpressions}</Text>
+      <View style={styles.textContainer}>
+        <Text style={styles.title}>{messages.sayHello}</Text>
+        <Text style={styles.text}>{messages.firstImpressions}</Text>
       </View>
     </View>
   )