From 443615ab91115585c1bbf18fcbfdb2bd5887ffc6 Mon Sep 17 00:00:00 2001
From: Pablo Carballeda <pcarballeda@gmail.com>
Date: Thu, 16 Mar 2023 05:26:17 +0100
Subject: [PATCH] Create FAQ view

-Create FAQ view with searchable terms.
-Create FAQ pages: notes broadcasting, relays coloring and login process.
-Create FAQs translations.
---
 frontend/Components/MenuItems/index.tsx | 12 +++-
 frontend/Locales/de.json                | 17 +++++
 frontend/Locales/en.json                | 17 +++++
 frontend/Locales/es.json                | 17 +++++
 frontend/Locales/fr.json                | 17 +++++
 frontend/Locales/ru.json                | 17 +++++
 frontend/Locales/zhCn.json              | 19 ++++-
 frontend/Pages/FaqPage/index.tsx        | 93 +++++++++++++++++++++++++
 frontend/Pages/FeedNavigator/index.tsx  |  2 +
 9 files changed, 208 insertions(+), 3 deletions(-)
 create mode 100644 frontend/Pages/FaqPage/index.tsx

diff --git a/frontend/Components/MenuItems/index.tsx b/frontend/Components/MenuItems/index.tsx
index 71520fb..ced0298 100644
--- a/frontend/Components/MenuItems/index.tsx
+++ b/frontend/Components/MenuItems/index.tsx
@@ -55,6 +55,8 @@ export const MenuItems: React.FC = () => {
       navigate('Feed', { page: 'ProfileConfig' })
     } else if (key === 'about') {
       navigate('About')
+    } else if (key === 'faq') {
+      navigate('Faq')
     } else if (key === 'config') {
       navigate('Config')
     } else if (key === 'contacts') {
@@ -167,8 +169,14 @@ export const MenuItems: React.FC = () => {
             onPress={() => onPressItem('about', 2)}
             onTouchEnd={() => setDrawerItemIndex(-1)}
           />
-        </Drawer.Section>
-        <Drawer.Section showDivider={false}>
+          <Drawer.Item
+            label={t('menuItems.faq')}
+            icon='message-question-outline'
+            key='faq'
+            active={drawerItemIndex === 2}
+            onPress={() => onPressItem('faq', 2)}
+            onTouchEnd={() => setDrawerItemIndex(-1)}
+          />
           <Drawer.Item
             label={t('menuItems.reportBug')}
             icon='bug-outline'
diff --git a/frontend/Locales/de.json b/frontend/Locales/de.json
index 30c135e..b1b1bee 100644
--- a/frontend/Locales/de.json
+++ b/frontend/Locales/de.json
@@ -38,6 +38,7 @@
       "Note": "Notiz",
       "Profile": "Profil",
       "About": "Über",
+      "Faq": "",
       "Config": "Einstellungen",
       "Send": "Senden",
       "Relays": "Relays",
@@ -94,6 +95,7 @@
       "followers": "{{followers}} folgen mir",
       "configuration": "Einstellungen",
       "about": "Über Nostros",
+      "faq": "FAQ",
       "reportBug": "Bug melden",
       "logout": "Abmelden"
     },
@@ -478,6 +480,21 @@
       "emptyTitle": "Keine Nachrichten",
       "emptyDescription": "Direkte Nachricht an Kontakt oder andere schreiben",
       "emptyButton": "Unterhaltung beginnen"
+    },
+    "faq": {
+      "searchLabel": "Suche in häufig gestellten Fragen",
+      "note_broadcasting": {
+        "question": "Hinweise: Rundfunk",
+        "answer": "Wenn ein Benutzer eine Notiz oder ein Ereignis in Nostr einstellt, wird diese Information an das Relays gesendet, mit dem der Benutzer verbunden ist. Dank der Funktion zum Senden von Notizen können diese Informationen jedoch an andere Relays im Netzwerk weitergegeben werden, so dass sie eine größere Anzahl von Benutzern erreichen. \n\nDiese Funktion zur Weiterleitung von Notizen trägt dazu bei, dass das Netzwerk und die Relays effizienter und dezentraler arbeiten. Durch die gemeinsame Nutzung der Informationen mit anderen Relays werden die Arbeitslast und die Überlastung der Server des Netzes verringert, was die Leistung und die Fähigkeit des Netzes, eine größere Anzahl von Benutzern zu bedienen, verbessert. Außerdem macht die Dezentralisierung der Informationen Nostr widerstandsfähiger gegen Ausfälle und schwieriger zu zensieren, da die Informationen über mehrere Knoten im Netzwerk verteilt sind."
+      },
+      "notes_colouring": {
+        "Frage": "Notizen: Färbung",
+        "answer": "Diese Funktion zeigt einen Farbbalken neben den in der App angezeigten Beiträgen oder Notizen an. Jede Farbe steht für ein Relays, in dem diese Notiz vorhanden ist. \n\nWenn Sie das Detail einer Notiz öffnen, können Sie die Informationen zu den verschiedenen Relays sehen, in denen sich die Notiz befindet. Dies dient dazu, die Relays besser sichtbar zu machen und ihre Bedeutung im Nostr-Netzwerk hervorzuheben. \n\nDurch die Anzeige der Informationen zu den Relays, an denen sich die Notiz befindet, können Sie sehen, wie die Informationen durch das Nostr-Netzwerk übertragen werden. Außerdem wird durch die Hervorhebung der Bedeutung der Relays die Dezentralisierung gefördert und die Benutzer werden dazu angeregt, sich mit mehr Servern im Netzwerk zu verbinden, was die Effizienz und Ausfallsicherheit des Netzwerks erhöht."
+      },
+      "resilient_login": {
+        "Frage": "Zugang",
+        "answer": "Der 'resilient login' Prozess besteht aus drei Schritten, die dazu beitragen, das Netzwerk stärker und dezentraler zu machen. \n\n1. Verbindung zu zufälligen Relays \nSie stellen eine Verbindung zu 8 Relays her, die nach dem Zufallsprinzip aus einem Pool von Relays ausgewählt werden. Ihr Benutzerprofil und Ihre Relaysliste werden in diesen 8 Relays durchsucht. \n\n2. Suche nach Kontakten in Ihrer Relaysliste \nSie trennen die Verbindung zu den 8 zufällig ausgewählten Relays und verbinden sich mit Ihrer Relaysliste. Ihre Kontakte werden in dieser Liste gesucht. \n\n3. Suchen Sie nach den Relays Ihrer Kontakte \nSie erhalten eine Liste der von Ihren Kontakten verwendeten Relays. Sie können diese Relays zu Ihrer Liste hinzufügen und eine Verbindung zu ihnen herstellen, um das Netzwerk belastbarer zu machen."
+      }
     }
   }
 }
diff --git a/frontend/Locales/en.json b/frontend/Locales/en.json
index f418186..a90c105 100644
--- a/frontend/Locales/en.json
+++ b/frontend/Locales/en.json
@@ -28,6 +28,7 @@
       "Note": "Note",
       "Profile": "Profile",
       "About": "About",
+      "Faq": "FAQ",
       "Config": "Config",
       "Send": "Send",
       "Relays": "Relays",
@@ -96,6 +97,7 @@
       "followers": "{{followers}} followers",
       "configuration": "Configuration",
       "about": "About",
+      "faq": "FAQ",
       "contacts": "Contacts",
       "reportBug": "Report a bug",
       "logout": "Logout"
@@ -486,6 +488,21 @@
       "emptyTitle": "You don't have any message",
       "emptyDescription": "Write direct messages to your contacts or others.",
       "emptyButton": "Open a conversation"
+    },
+    "faq": {
+      "searchLabel": "Search in Frequently Asked Questions",
+      "note_broadcasting": {
+        "question": "Notes: broadcasting",
+        "answer": "When a user posts a note or event in Nostr, that information is sent to the relay to which that user is connected. However, thanks to the note broadcasting feature, that information can be shared with other relays in the network so that it reaches a larger number of users. \n\nThis note broadcasting functionality helps the network and the relays to be more efficient and decentralized. By sharing the information with other relays, the workload and congestion on the network's servers are reduced, which improves performance and the network's ability to handle a larger number of users. Additionally, the decentralization of information makes Nostr more resilient to failures and harder to censor, as the information is distributed across multiple nodes in the network."
+      },
+      "notes_colouring": {
+        "question": "Notes: coloring",
+        "answer": "This feature displays a color bar next to the posts or notes displayed in the app. Each color represents a relay in which that note is present. \n\nUpon opening the detail of a note, you can see the information of the different relays where the note is located. This is done to give more visibility to the relays and highlight their importance in the Nostr network. \n\nBy displaying the information of the relays where the note is located, you can see how the information is transmitted through the Nostr network. In addition, by highlighting the importance of the relays, decentralization is encouraged and users are incentivized to connect to more servers in the network, which increases the efficiency and resiliency of the network."
+      },
+      "resilient_login": {
+        "question": "Access",
+        "answer": "The 'resilient login' process consists of three steps that help make the network stronger and more decentralized. \n\n1. Connection to random relays \nYou will connect to 8 relays chosen at random from a pool of relays. Your user profile and relay list will be searched in these 8 relays. \n\n2. Search for contacts in your relay list \nDisconnect from the 8 random relays and connect to your relay list. Your contacts will be searched in this list. \n\n3. Search for your contacts' relays \nYou will see a list of the relays used by your contacts. You can add these relays to your list and connect to them, making the network more resilient."
+      }
     }
   }
 }
diff --git a/frontend/Locales/es.json b/frontend/Locales/es.json
index e3fbbbb..0b40ddb 100644
--- a/frontend/Locales/es.json
+++ b/frontend/Locales/es.json
@@ -38,6 +38,7 @@
       "Note": "Nota",
       "Profile": "Perfil",
       "About": "About",
+      "Faq": "Preguntas frecuentes",
       "Config": "Configuración",
       "Send": "Send",
       "Relays": "Relays",
@@ -115,6 +116,7 @@
       "followers": "{{followers}} seguidores",
       "configuration": "Configuración",
       "about": "Sobre Nostros",
+      "faq": "Preguntas frecuentes",
       "reportBug": "Reportar un bug",
       "logout": "Salir"
     },
@@ -465,6 +467,21 @@
       "emptyTitle": "No tienes mensajes",
       "emptyDescription": "Escribe un mensaje directo a tus contactos u otros.",
       "emptyButton": "Abrir una conversación"
+    },
+    "faq": {
+      "searchLabel": "Buscar en preguntas frecuentes",
+      "note_broadcasting": {
+        "question": "Notas: transmisión",
+        "answer": "Cuando un usuario publica una nota o evento en Nostr, esa información es enviada al relay al que está conectado ese usuario. Sin embargo, gracias a la característica de transmisión de notast, esa información puede ser compartida con otros relays de la red de manera que llegue a un mayor número de usuarios. \n\nEsta funcionalidad de transmisión de notas ayuda a la red y a los relays a ser más eficientes y descentralizados. Al compartir la información con otros relays, se reduce la carga de trabajo y la congestión en los servidores de la red, lo que mejora el rendimiento y la capacidad de la red para manejar un mayor número de usuarios. Además, la descentralización de la información hace que Nostr sea más resistente a los fallos y más difícil de censurar, ya que la información está distribuida en múltiples nodos de la red."
+      },
+      "notes_colouring": {
+        "question": "Notas: coloreado",
+        "answer": "Esta característica muestra una barra de colores junto a las publicaciones o notas que se visualizan en la app. Cada color representa un relay en el que esa nota está presente. \n\nAl abrir el detalle de una nota, se puede ver la información de los diferentes relays en los que se encuentra la nota. Esto se hace para darle más visibilidad a los relays y resaltar su importancia en la red de Nostr. \n\nAl mostrar la información de los relays en los que se encuentra la nota, se puede apreciar cómo la información se transmite a través de la red de Nostr. Además, al destacar la importancia de los relays, se fomenta la descentralización y se incentiva a los usuarios a conectarse a más servidores en la red, lo que aumenta la eficiencia y la resistencia de la red."
+      },
+      "resilient_login": {
+        "question": "Acceso",
+        "answer": "El proceso de 'inicio de sesión resiliente' consta de tres pasos que ayudan a que la red sea más sólida y descentralizada. \n\n1. Conexión a relays aleatorios \nTe conectarás a 8 relays elegidos al azar de un pool de relays. Tu perfil de usuario y tu lista de relays se buscarán en estos 8 relays. \n\n2. Buscar contactos en su lista de relays \nDesconexión de los 8 relays aleatorios y conexión tu lista de relays. Tus contactos se buscarán en esta lista. \n\n3. Buscar los relays de tus contactos \nVerás una lista de los relays utilizados por tus contactos. Puedes añadir estos relays a tu lista y conectarte a ellos, haciendo la red más resistente."
+      }
     }
   }
 }
diff --git a/frontend/Locales/fr.json b/frontend/Locales/fr.json
index 29bb4d8..6336fee 100644
--- a/frontend/Locales/fr.json
+++ b/frontend/Locales/fr.json
@@ -38,6 +38,7 @@
       "Note": "Note",
       "Profile": "Profil",
       "About": "À propos de Nostros",
+      "Faq": "FAQ",
       "Config": "Configuration",
       "Send": "Envoyer",
       "Relays": "Relais",
@@ -115,6 +116,7 @@
       "followers": "{{followers}} abonnés",
       "configuration": "Configuration",
       "about": "À propos de Nostros",
+      "faq": "FAQ",
       "reportBug": "Report a bug",
       "logout": "Sortir"
     },
@@ -448,6 +450,21 @@
       "emptyTitle": "Vous n'avez pas de messages",
       "emptyDescription": "Écrivez un message direct à vos contacts ou à d'autres personnes.",
       "emptyButton": "Ouvrir une conversation"
+    },
+    "faq": {
+      "searchLabel": "Rechercher dans la FAQ",
+      "note_broadcasting": {
+        "question": "Notes : diffusion",
+        "answer": "Lorsqu'un utilisateur publie une note ou un événement dans Nostr, ces informations sont envoyées au relais auquel l'utilisateur est connecté. Cependant, grâce à la fonctionnalité de diffusion des notes, ces informations peuvent être partagées avec d'autres relais du réseau afin d'atteindre un plus grand nombre d'utilisateurs. \n\nCette fonctionnalité de diffusion des notes permet au réseau et aux relais d'être plus efficaces et décentralisés. En partageant les informations avec d'autres relais, la charge de travail et la congestion sur les serveurs du réseau sont réduites, ce qui améliore les performances et la capacité du réseau à gérer un plus grand nombre d'utilisateurs. De plus, la décentralisation des informations rend Nostr plus résistant aux pannes et plus difficile à censurer, car les informations sont réparties sur plusieurs nœuds du réseau."
+      },
+      "notes_colouring": {
+        "question": "Notes : coloration",
+        "answer": "Cette fonctionnalité affiche une barre de couleurs à côté des publications ou des notes affichées dans l'application. Chaque couleur représente un relais dans lequel cette note est présente. \n\nEn ouvrant le détail d'une note, vous pouvez voir les informations des différents relais où se trouve la note. Ceci est fait pour donner plus de visibilité aux relais et mettre en évidence leur importance dans le réseau Nostr. \n\nEn affichant les informations des relais où se trouve la note, vous pouvez voir comment les informations sont transmises à travers le réseau Nostr. De plus, en mettant en évidence l'importance des relais, la décentralisation est encouragée et les utilisateurs sont incités à se connecter à plus de serveurs sur le réseau, ce qui augmente l'efficacité et la résilience du réseau."
+      },
+      "resilient_login": {
+        "question": "Accès",
+        "answer": "Le processus de 'connexion résiliente' se compose de trois étapes qui contribuent à rendre le réseau plus solide et décentralisé. \n\n1. Connexion aux relais aléatoires \nVous vous connecterez à 8 relais choisis au hasard dans un pool de relais. Votre profil d'utilisateur et votre liste de relais seront recherchés dans ces 8 relais. \n\n2. Recherche des contacts dans votre liste de relais \nDéconnexion des 8 relais aléatoires et connexion à votre liste de relais. Vos contacts seront recherchés dans cette liste. \n\n3. Recherche des relais de vos contacts \nVous verrez une liste des relais utilisés par vos contacts. Vous pouvez ajouter ces relais à votre liste et vous y connecter, rendant le réseau plus résistant."
+      }
     }
   }
 }
diff --git a/frontend/Locales/ru.json b/frontend/Locales/ru.json
index 62c6ef4..bb72450 100644
--- a/frontend/Locales/ru.json
+++ b/frontend/Locales/ru.json
@@ -38,6 +38,7 @@
       "Repost": "Поделиться",
       "Profile": "Профиль",
       "About": "О нас",
+      "Faq": "",
       "Config": "Настройки",
       "Send": "Отпраить",
       "Relays": "Реле",
@@ -115,6 +116,7 @@
       "followers": "{{followers}} followers",
       "configuration": "Настройки",
       "about": "Подроблее",
+      "faq": "",
       "logout": "Выйти",
       "reportBug": "Report a bug",
       "imageHostingService": "Хостинг изображений"
@@ -457,6 +459,21 @@
       "emptyTitle": "У Вас нет сообщений",
       "emptyDescription": "Write direct messages to your contacts or others.",
       "emptyButton": "Открыть чат"
+    },
+    "faq": {
+      "searchLabel": "Поиск в часто задаваемых вопросах",
+      "note_broadcasting": {
+        "question": "Примечания: вещание",
+        "answer": "Когда пользователь публикует заметку или событие в Nostr, эта информация отправляется на реле, к которому подключен пользователь. Однако, благодаря функции трансляции заметок, этой информацией можно поделиться с другими реле в сети, чтобы она достигла большего числа пользователей. \n\nЭта функция передачи заметок помогает сети и ретрансляторам быть более эффективными и децентрализованными. Благодаря обмену информацией с другими реле, снижается нагрузка и перегрузка на серверы сети, что повышает производительность и способность сети обслуживать большее количество пользователей. Кроме того, децентрализация информации делает Nostr более устойчивым к сбоям и более сложным для цензуры, поскольку информация распределяется между несколькими узлами сети."
+      },
+      "notes_colouring": {
+        "вопрос": "Заметки: раскраска",
+        "answer": "Эта функция отображает цветовую полосу рядом с постами или заметками, отображаемыми в приложении. Каждый цвет обозначает реле, в котором присутствует данная заметка. \n\nПосле открытия детализации заметки, вы можете увидеть информацию о различных реле, в которых находится заметка. Это сделано для того, чтобы сделать реле более заметными и подчеркнуть их важность в сети Nostr. \n\nПоказывая информацию о реле, где находится заметка, вы можете увидеть, как информация передается по сети Nostr. Кроме того, подчеркивая важность реле, поощряется децентрализация, и пользователи получают стимул подключаться к большему количеству серверов в сети, что повышает эффективность и отказоустойчивость сети."
+      },
+      "resilient_login": {
+        "вопрос": "Доступ",
+        "answer": "Процесс 'стойкого входа' состоит из трех шагов, которые помогают сделать сеть более сильной и децентрализованной. \n\n1. Подключение к случайным реле \n\nВы подключитесь к 8 реле, выбранным случайным образом из пула реле. Ваш профиль пользователя и список реле будут просмотрены в этих 8 реле. \n\n2. Поиск контактов в вашем списке реле \n\nОтключитесь от 8 случайных реле и подключитесь к вашему списку реле. Поиск контактов будет осуществляться в этом списке. \n\n3. Поиск реле ваших контактов \nВы увидите список реле, используемых вашими контактами. Вы можете добавить эти реле в свой список и подключиться к ним, сделав сеть более устойчивой."
+      }
     }
   }
 }
diff --git a/frontend/Locales/zhCn.json b/frontend/Locales/zhCn.json
index b024f6f..98ab576 100644
--- a/frontend/Locales/zhCn.json
+++ b/frontend/Locales/zhCn.json
@@ -38,6 +38,7 @@
       "Note": "Note",
       "Profile": "简介",
       "About": "关于",
+      "Faq": "常见问题",
       "Config": "设置",
       "Send": "发送",
       "Relays": "中继",
@@ -114,6 +115,7 @@
       "followers": "{{followers}} 关注者",
       "configuration": "设置",
       "about": "关于",
+      "faq": "常见问题",
       "reportBug": "反馈问题",
       "logout": "退出"
     },
@@ -460,6 +462,21 @@
       "emptyTitle": "您还没有收到过私信",
       "emptyDescription": "给您的联系人或其他用户发送私信",
       "emptyButton": "发送私信"
-    }
+    },
+    "faq": {
+      "searchLabel": "在常见问题解答中搜索",
+      "note_broadcasting": {
+          "question": "注意事项：广播",
+          "answer": "当用户在 Nostr 中发布便笺或事件时，该信息会发送到该用户连接的中继。但是，由于便笺广播功能，该信息可以与网络中的其他中继共享，以便到达更多的用户。\n\n此便笺广播功能有助于网络和中继更加高效和去中心化。通过与其他中继共享信息，减轻了网络服务器的工作量和拥塞，提高了性能和网络处理更多用户的能力。此外，信息的去中心化使 Nostr 更加抗故障和难以审查，因为信息分布在网络的多个节点上。"
+      },
+      "notes_colouring": {
+          "question": "注意事项：着色",
+          "answer": "此功能在应用程序中显示了一条颜色条，旁边显示了发布的帖子或便笺。每种颜色代表一个中继，其中该便笺存在。\n\n打开便笺的详细信息后，您可以看到便笺所在的不同中继的信息。这样做是为了更多地展示中继的重要性，并突出显示它们在 Nostr 网络中的作用。\n\n通过显示便笺所在中继的信息，可以看到信息如何通过 Nostr 网络传输。此外，通过强调中继的重要性，鼓励去中心化，并激励用户连接到网络中更多的服务器，从而增加网络的效率和弹性。"
+      },
+      "resilient_login": {
+          "question": "登录",
+          "answer": "“弹性登录”过程包括三个步骤，有助于使网络更加强大和去中心化。\n\n1. 连接到随机中继\n您将连接到从中继池中随机选择的 8 个中继。在这 8 个中继中搜索您的用户配置文件和中继列表。\n\n2. 在中继列表中搜索联系人\n从 8 个随机中继中断开连接，并连接到您的中继列表。在此列表中搜索您的联系人。\n\n3. 搜索您联系人的中继\n您将看到您的联系人使用的中继列表。您可以将这些中继添加到列表中并连接到它们，从而使网络更加强大和去中心化。"
+      }
+  }
   }
 }
diff --git a/frontend/Pages/FaqPage/index.tsx b/frontend/Pages/FaqPage/index.tsx
new file mode 100644
index 0000000..7d39e54
--- /dev/null
+++ b/frontend/Pages/FaqPage/index.tsx
@@ -0,0 +1,93 @@
+import * as React from 'react';
+import { useTranslation } from 'react-i18next';
+import { ScrollView, Text, View, StyleSheet, LayoutAnimation, Platform, UIManager } from 'react-native';
+import { List, Searchbar, Divider, useTheme } from 'react-native-paper';
+
+if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
+  UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+
+interface FAQItem {
+  id: number;
+  question: string;
+  answer: string;
+}
+
+const FAQ: React.FC<{ faq: FAQItem; expanded: boolean; onPress: () => void }> = ({ faq, expanded, onPress }) => {
+  const theme = useTheme();
+
+  return (
+    <List.Accordion title={faq.question} expanded={expanded} onPress={onPress}>
+      <Text numberOfLines={expanded ? undefined : 3} style={[styles.container, { color: theme.colors.onBackground }]}>
+        {faq.answer}
+      </Text>
+    </List.Accordion>
+  );
+};
+
+const FAQList: React.FC<{ faqs: FAQItem[]; search: string }> = ({ faqs, search }) => {
+  const [expandedId, setExpandedId] = React.useState<number | null>(null);
+
+  const handlePress = (id: number) => {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+    setExpandedId(expandedId === id ? null : id);
+  };
+
+  const filteredFaqs = faqs.filter((faq) => faq.question.toLowerCase().includes(search.toLowerCase()));
+  const groupedFaqs = filteredFaqs.reduce<{ [key: string]: FAQItem[] }>((groups, faq) => {
+    const firstLetter = faq.question[0].toUpperCase();
+    if (!groups[firstLetter]) {
+      groups[firstLetter] = [];
+    }
+    groups[firstLetter].push(faq);
+    return groups;
+  }, {});
+
+  return (
+    <ScrollView>
+      {Object.entries(groupedFaqs).map(([letter, faqs]) => (
+        <View key={letter}>
+          <List.Subheader>{letter}</List.Subheader>
+          {faqs.map((faq) => (
+            <FAQ key={faq.id} faq={faq} expanded={faq.id === expandedId} onPress={() => handlePress(faq.id)} />
+          ))}
+          <Divider />
+        </View>
+      ))}
+    </ScrollView>
+  );
+};
+
+
+interface FaqPageProps {}
+
+const FaqPage: React.FC<FaqPageProps> = () => {
+  const [search, setSearch] = React.useState('');
+  const { t } = useTranslation('common');
+  const theme = useTheme();
+
+  const faqs: FAQItem[] = [
+    { id: 1, question: t('faq.note_broadcasting.question'), answer: t('faq.note_broadcasting.answer') },
+    { id: 2, question: t('faq.notes_colouring.question'), answer: t('faq.notes_colouring.answer') },
+    { id: 3, question: t('faq.resilient_login.question'), answer: t('faq.resilient_login.answer') },
+  ];
+
+  return (
+    <View style={{ flex: 1, backgroundColor: theme.colors.background }}>
+      <Searchbar
+        placeholder={t('faq.searchLabel')}
+        value={search}
+        onChangeText={setSearch}
+      />
+      <FAQList faqs={faqs} search={search} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 16,
+  },
+});
+
+export default FaqPage;
diff --git a/frontend/Pages/FeedNavigator/index.tsx b/frontend/Pages/FeedNavigator/index.tsx
index 5492390..44a9017 100644
--- a/frontend/Pages/FeedNavigator/index.tsx
+++ b/frontend/Pages/FeedNavigator/index.tsx
@@ -8,6 +8,7 @@ import { useTranslation } from 'react-i18next'
 import HomePage from '../HomePage'
 import RelaysPage from '../RelaysPage'
 import AboutPage from '../AboutPage'
+import FaqPage from '../FaqPage'
 import ProfileConfigPage from '../ProfileConfigPage'
 import ProfilePage from '../ProfilePage'
 import ProfileCard from '../../Components/ProfileCard'
@@ -189,6 +190,7 @@ export const HomeNavigator: React.FC = () => {
           <Stack.Screen name='Contacts' component={ContactsPage} />
           <Stack.Screen name='Relays' component={RelaysPage} />
           <Stack.Screen name='About' component={AboutPage} />
+          <Stack.Screen name='Faq' component={FaqPage} />
           <Stack.Screen name='Config' component={ConfigPage} />
           <Stack.Screen name='ProfileConfig' component={ProfileConfigPage} />
           <Stack.Screen name='Profile' component={ProfilePage} />