Small UI fixes

frontend/Components/NoteCard/index.tsx

@@ -164,7 +164,7 @@ export const NoteCard: React.FC<NoteCardProps> = ({
               numberOfLines={numberOfLines}
             />
           )}
-          {showRepostPreview && repost && <NoteCard note={repost} showAction={false} />}
+          {showRepostPreview && repost && <NoteCard note={repost} showAction={false} showPreview={showPreview}/>}
         </Card.Content>
       </>
     )

frontend/Components/ProfileData/index.tsx

@@ -41,7 +41,7 @@ export const ProfileData: React.FC<ProfileCardProps> = ({
       <NostrosAvatar name={username} pubKey={nPub} src={picture} lud06={lud06} size={avatarSize} />
       <View style={styles.contactData}>
         <View style={styles.contactName}>
-          <Text variant='titleSmall'>{usernamePubKey(username, nPub)}</Text>
+          <Text variant='titleSmall' numberOfLines={1}>{usernamePubKey(username, nPub)}</Text>
           {validNip05 ? (
             <MaterialCommunityIcons
               name='check-decagram-outline'
@@ -52,8 +52,8 @@ export const ProfileData: React.FC<ProfileCardProps> = ({
             <></>
           )}
         </View>
-        {validNip05 ? <Text>{getNip05Domain(nip05)}</Text> : <></>}
-        {date ? <Text>{date}</Text> : <></>}
+        {validNip05 ? <Text numberOfLines={1}>{getNip05Domain(nip05)}</Text> : <></>}
+        {date ? <Text numberOfLines={1}>{date}</Text> : <></>}
       </View>
     </View>
   )
@@ -64,7 +64,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
   },
   contactName: {
-    flexDirection: 'row',
+    flexDirection: 'row'
   },
   contactData: {
     flexDirection: 'column',

frontend/Pages/ContactsFeed/index.tsx

@@ -1,5 +1,15 @@
 import React, { useContext, useEffect, useState } from 'react'
-import { Dimensions, FlatList, ListRenderItem, ScrollView, StyleSheet, View } from 'react-native'
+import {
+  ActivityIndicator,
+  Dimensions,
+  FlatList,
+  ListRenderItem,
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+  ScrollView,
+  StyleSheet,
+  View,
+} from 'react-native'
 import Clipboard from '@react-native-clipboard/clipboard'
 import { AppContext } from '../../Contexts/AppContext'
 import { Kind } from 'nostr-tools'
@@ -28,14 +38,17 @@ import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityI
 import { useFocusEffect } from '@react-navigation/native'
 import ProfileCard from '../../Components/ProfileCard'
 import ProfileData from '../../Components/ProfileData'
+import { handleInfinityScroll } from '../../Functions/NativeFunctions'
 
 export const ContactsFeed: React.FC = () => {
   const { t } = useTranslation('common')
+  const initialPageSize = 20
   const { database } = useContext(AppContext)
   const { privateKey, publicKey, setContantsCount, setFollowersCount, nPub } =
     React.useContext(UserContext)
   const { relayPool, lastEventId } = useContext(RelayPoolContext)
   const theme = useTheme()
+  const [pageSize, setPageSize] = useState<number>(initialPageSize)
   const bottomSheetAddContactRef = React.useRef<RBSheet>(null)
   const bottomSheetProfileRef = React.useRef<RBSheet>(null)
   // State
@@ -162,15 +175,17 @@ export const ContactsFeed: React.FC = () => {
         }}
       >
         <View key={item.id} style={styles.contactRow}>
-          <ProfileData
-            username={item?.name}
-            publicKey={getNpub(item.id)}
-            validNip05={item?.valid_nip05}
-            nip05={item?.nip05}
-            lud06={item?.lnurl}
-            picture={item?.picture}
-            avatarSize={40}
-          />
+          <View style={styles.profileData}>
+            <ProfileData
+              username={item?.name}
+              publicKey={getNpub(item.id)}
+              validNip05={item?.valid_nip05}
+              nip05={item?.nip05}
+              lud06={item?.lnurl}
+              picture={item?.picture}
+              avatarSize={40}
+            />
+          </View>
           <View style={styles.contactFollow}>
             <Button onPress={() => (item.contact ? removeContact(item) : addContact(item))}>
               {item.contact ? t('contactsFeed.stopFollowing') : t('contactsFeed.follow')}
@@ -194,18 +209,25 @@ export const ContactsFeed: React.FC = () => {
     }
   }, [])
 
+  const onScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void = (event) => {
+    if (handleInfinityScroll(event)) {
+      setPageSize(pageSize + initialPageSize)
+    }
+  }
+
   const Following: JSX.Element = (
     <View style={styles.container}>
       {following.length > 0 ? (
-        <ScrollView horizontal={false}>
+        <ScrollView horizontal={false} onScroll={onScroll} showsVerticalScrollIndicator={false}>
           <View>
             <FlatList
               style={styles.list}
-              data={following}
+              data={following.slice(0, pageSize)}
               renderItem={renderContactItem}
               ItemSeparatorComponent={Divider}
               showsVerticalScrollIndicator={false}
             />
+            {following.length >= 10 && <ActivityIndicator animating={true} />}
           </View>
         </ScrollView>
       ) : (
@@ -233,16 +255,17 @@ export const ContactsFeed: React.FC = () => {
   const Follower: JSX.Element = (
     <View style={styles.container}>
       {followers.length > 0 ? (
-        <ScrollView horizontal={false}>
+        <ScrollView horizontal={false} onScroll={onScroll} showsVerticalScrollIndicator={false}>
           <View>
             <FlatList
               style={styles.list}
-              data={followers}
+              data={followers.slice(0, pageSize)}
               renderItem={renderContactItem}
               ItemSeparatorComponent={Divider}
               showsVerticalScrollIndicator={false}
             />
           </View>
+          {followers.length >= 10 && <ActivityIndicator animating={true} />}
         </ScrollView>
       ) : (
         <View style={styles.blank}>
@@ -428,7 +451,6 @@ const styles = StyleSheet.create({
     paddingTop: 16,
     flexDirection: 'row',
     justifyContent: 'space-between',
-    width: '100%',
   },
   contactData: {
     paddingLeft: 16,
@@ -467,6 +489,9 @@ const styles = StyleSheet.create({
     paddingTop: 4,
     paddingLeft: 5,
   },
+  profileData: {
+    maxWidth: 300,
+  },
 })
 
 export default ContactsFeed

frontend/Pages/ConversationPage/index.tsx

@@ -225,7 +225,6 @@ export const ConversationPage: React.FC<ConversationPageProps> = ({ route }) =>
         <TextInput
           mode='outlined'
           multiline
-          numberOfLines={5}
           label={t('conversationPage.typeMessage') ?? ''}
           value={input}
           onChangeText={setInput}

frontend/Pages/ProfileConnectPage/index.tsx

@@ -67,8 +67,6 @@ export const ProfileConnectPage: React.FC = () => {
         <View style={styles.loginMain}>
           <TextInput
             mode='outlined'
-            multiline
-            numberOfLines={5}
             label={label}
             onChangeText={setInputValue}
             value={inputValue}

frontend/Pages/SendPage/index.tsx

@@ -146,7 +146,14 @@ export const SendPage: React.FC<SendPageProps> = ({ route }) => {
       <View style={[styles.textInputContainer, { paddingBottom: note ? 200 : 10 }]}>
         {note && (
           <View style={styles.noteCard}>
-            <NoteCard note={note} showAction={false} showPreview={false} numberOfLines={5} />
+            <NoteCard
+              note={note}
+              showAction={false}
+              showPreview={false}
+              showAnswerData={false}
+              showRepostPreview={false}
+              numberOfLines={5}
+            />
           </View>
         )}
         <View style={styles.textInput}>