New UI performance improvements (#141)

Author: KoalaSat

frontend/Components/LnPayment/index.tsx

@@ -83,11 +83,11 @@ export const LnPayment: React.FC<TextContentProps> = ({ open, setOpen, event, us
       <RBSheet
         ref={bottomSheetLnPaymentRef}
         closeOnDragDown={true}
-        height={330}
+        height={380}
         customStyles={rbSheetCustomStyles}
         onClose={() => setOpen(false)}
       >
-        <View>
+        <View style={styles.drawerBottom}>
           <View style={styles.montoSelection}>
             <Button style={styles.montoButton} mode='outlined' onPress={() => setMonto('1000')}>
               <>
@@ -175,6 +175,10 @@ export const LnPayment: React.FC<TextContentProps> = ({ open, setOpen, event, us
 }
 
 const styles = StyleSheet.create({
+  drawerBottom: {
+    height: '90%',
+    justifyContent: 'space-between'
+  },
   qrContainer: {
     flex: 1,
     justifyContent: 'center',

frontend/Pages/ContactsFeed/index.tsx

@@ -435,7 +435,7 @@ const styles = StyleSheet.create({
   },
   blank: {
     justifyContent: 'space-between',
-    height: 232,
+    height: 252,
     marginTop: 5,
     padding: 16,
   },

frontend/Pages/ConversationsFeed/index.tsx

@@ -351,8 +351,10 @@ const styles = StyleSheet.create({
   },
   blank: {
     justifyContent: 'space-between',
-    height: 200,
-    marginTop: 60,
+    height: 220,
+    marginTop: 91,
+    paddingLeft: 16,
+    paddingRight: 16,
   },
 })
 

frontend/Pages/HomeFeed/index.tsx

@@ -29,10 +29,10 @@ import { FlatList } from 'react-native-gesture-handler'
 import { getLastReaction } from '../../Functions/DatabaseFunctions/Reactions'
 
 interface HomeFeedProps {
-  jumpTo: (tabName: string) => void
+  navigation: any
 }
 
-export const HomeFeed: React.FC<HomeFeedProps> = ({ jumpTo }) => {
+export const HomeFeed: React.FC<HomeFeedProps> = ({ navigation }) => {
   const theme = useTheme()
   const { database } = useContext(AppContext)
   const { publicKey } = useContext(UserContext)
@@ -90,7 +90,7 @@ export const HomeFeed: React.FC<HomeFeedProps> = ({ jumpTo }) => {
       authors,
     }
     if (lastNote && lastNotes.length >= pageSize && !past) {
-      message.since = lastNote.created_at
+      message.since = lastNote?.created_at
     } else {
       message.limit = pageSize + initialPageSize
     }
@@ -99,7 +99,7 @@ export const HomeFeed: React.FC<HomeFeedProps> = ({ jumpTo }) => {
       {
         kinds: [EventKind.petNames],
         authors: users.filter((user) => user.name !== undefined).map((user) => user.id),
-        since: users[0].created_at ?? 0,
+        since: users[0]?.created_at ?? 0,
       },
     ])
     setRefreshing(false)
@@ -190,7 +190,7 @@ export const HomeFeed: React.FC<HomeFeedProps> = ({ jumpTo }) => {
           <Text variant='bodyMedium' style={styles.center}>
             {t('homeFeed.emptyDescription')}
           </Text>
-          <Button mode='contained' compact onPress={() => jumpTo('contacts')}>
+          <Button mode='contained' compact onPress={() => navigation.jumpTo('contacts')}>
             {t('homeFeed.emptyButton')}
           </Button>
         </View>
@@ -235,8 +235,8 @@ const styles = StyleSheet.create({
   },
   blank: {
     justifyContent: 'space-between',
-    height: 200,
-    marginTop: 60,
+    height: 220,
+    marginTop: 91,
   },
 })
 

frontend/Pages/NostrosDrawerNavigator/index.tsx

@@ -32,7 +32,7 @@ export const NostrosDrawerNavigator: React.FC = () => {
 
   return userState !== 'loading' ? (
     <DrawerNavigator.Navigator
-      drawerContent={({ navigation }) => <MenuItems navigation={navigation} />}
+      drawerContent={() => <MenuItems />}
       screenOptions={{
         drawerStyle: {
           borderRadius: 28,

frontend/Pages/NotePage/index.tsx

@@ -144,6 +144,7 @@ export const NotePage: React.FC<NotePageProps> = ({ route }) => {
 
   const renderItem: (note: Note) => JSX.Element = (note) => (
     <View style={[styles.noteCard, { borderColor: theme.colors.onSecondary }]} key={note.id}>
+      <View style={styles.noteCardSpace}></View>
       <NoteCard
         note={note}
         onPressOptions={() => {
@@ -322,10 +323,12 @@ const styles = StyleSheet.create({
     justifyContent: 'flex-start',
   },
   list: {
-    padding: 16,
+    paddingLeft: 16,
+    paddingRight: 16,
   },
   loading: {
-    paddingBottom: 60,
+    paddingTop: 30,
+    paddingBottom: 30,
   },
   fabSend: {
     right: 16,
@@ -338,7 +341,7 @@ const styles = StyleSheet.create({
   noteCard: {
     borderLeftWidth: 1,
     paddingLeft: 32,
-    paddingBottom: 16,
+    paddingTop: 16
   },
 })
 

frontend/Pages/NotificationsFeed/index.tsx

@@ -211,8 +211,8 @@ const styles = StyleSheet.create({
   },
   blank: {
     justifyContent: 'space-between',
-    height: 200,
-    marginTop: 60,
+    height: 220,
+    marginTop: 91,
   },
 })