fix: only render the Notification component if there's a notification…

… + specify offsets
upryzing · Feb 21, 2025 · 82ad466 · 82ad466
1 parent 152f1d5
commit 82ad466
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 11 deletions.
diff --git a/src/MainView.tsx b/src/MainView.tsx
@@ -5,7 +5,7 @@ import {
   useRef,
   useState,
 } from 'react';
-import {StatusBar, View} from 'react-native';
+import {StatusBar} from 'react-native';
 
 import type {API, ClientboundNotification} from 'revolt.js';
 
@@ -118,12 +118,12 @@ function LoggedInViews({
       <SideMenuHandler />
       <Modals />
       <NetworkIndicator client={client} />
-      <View style={{position: 'absolute', top: 20, left: 0, width: '100%'}}>
+      {notificationMessage && (
         <Notification
           message={notificationMessage}
           dismiss={() => setNotificationMessage(null)}
         />
-      </View>
+      )}
     </ChannelContext.Provider>
   );
 }

diff --git a/src/components/Notification.tsx b/src/components/Notification.tsx
@@ -15,7 +15,7 @@ import {commonValues, ThemeContext} from '@clerotri/lib/themes';
 import {parseRevoltNodes} from '@clerotri/lib/utils';
 
 export const Notification = observer(
-  ({message, dismiss}: {message: API.Message | null; dismiss: Function}) => {
+  ({message, dismiss}: {message: API.Message; dismiss: Function}) => {
     const {currentTheme} = useContext(ThemeContext);
     const {setCurrentChannel} = useContext(ChannelContext);
 
@@ -24,11 +24,11 @@ export const Notification = observer(
       setCurrentChannel(channel ?? null);
     };
 
-    if (message) {
-      const author = client.users.get(message.author);
-      const channel = client.channels.get(message.channel);
+    const author = client.users.get(message.author);
+    const channel = client.channels.get(message.channel);
 
-      return (
+    return (
+      <View style={{position: 'absolute', top: 20, left: 0, width: '100%'}}>
         <TouchableOpacity
           style={{
             flexDirection: 'row',
@@ -44,6 +44,8 @@ export const Notification = observer(
               {
                 color: '#00000060',
                 blurRadius: commonValues.sizes.large,
+                offsetX: 0,
+                offsetY: 0,
               },
             ],
           }}
@@ -103,8 +105,7 @@ export const Notification = observer(
             </View>
           </Pressable>
         </TouchableOpacity>
-      );
-    }
-    return <></>;
+      </View>
+    );
   },
 );