Make list end text customizable (#4145)

* only try to initialize once

* nit

* change to `You have reached the end`

* make the text at end of list customizable

* make the text at end of list customizable

* update intl

1 files changed, 11 insertions, 15 deletions

diff --git a/src/components/Lists.tsx b/src/components/Lists.tsx
index 47a5bf8f1..3368d076f 100644
--- a/src/components/Lists.tsx
+++ b/src/components/Lists.tsx
@@ -18,6 +18,8 @@ export function ListFooter({
   onRetry,
   height,
   style,
+  showEndMessage = false,
+  endMessageText,
 }: {
   isFetchingNextPage?: boolean
   hasNextPage?: boolean
@@ -25,6 +27,8 @@ export function ListFooter({
   onRetry?: () => Promise<unknown>
   height?: number
   style?: StyleProp<ViewStyle>
+  showEndMessage?: boolean
+  endMessageText?: string
 }) {
   const t = useTheme()
 
@@ -41,21 +45,13 @@ export function ListFooter({
       ]}>
       {isFetchingNextPage ? (
         <Loader size="xl" />
-      ) : (
-        <>
-          {error ? (
-            <ListFooterMaybeError error={error} onRetry={onRetry} />
-          ) : (
-            <>
-              {!hasNextPage && (
-                <Text style={[a.text_sm, t.atoms.text_contrast_low]}>
-                  <Trans>End of list</Trans>
-                </Text>
-              )}
-            </>
-          )}
-        </>
-      )}
+      ) : error ? (
+        <ListFooterMaybeError error={error} onRetry={onRetry} />
+      ) : !hasNextPage && showEndMessage ? (
+        <Text style={[a.text_sm, t.atoms.text_contrast_low]}>
+          {endMessageText ?? <Trans>You have reached the end</Trans>}
+        </Text>
+      ) : null}
     </View>
   )
 }