translating welcome screen

app/mobile/src/constants/Strings.js

@@ -187,6 +187,13 @@ const Strings = [
     editMessage: 'Edit Message Text',
     emptyTopic: 'Empty Topic',
     notes: 'Notes',
+
+    welcome: 'Welcome To Databag',
+    communication: 'Communication for the Decentralized Web',
+    setup: 'Setup Your Profile',
+    connect: 'Connect With People',
+    start: 'Start a Conversation',
+    started: 'Get Started',
   },
   {
     languageCode: 'fr',
@@ -370,6 +377,13 @@ const Strings = [
     editMessage: 'Modifier le Texte du Message',
     emptyTopic: 'Pas de Messages',
     notes: 'Notes',
+
+    welcome: 'Bienvenue Sur Databag',
+    communication: 'Communication Pour l\'Internet Décentralisé',
+    setup: 'Configurez Votre Profil',
+    connect: 'Se Connecter Avec d'Autres',
+    start: 'Créer une Conversation',
+    started: 'Commencer',
   },
   {
     languageCode: 'es',
@@ -553,6 +567,13 @@ const Strings = [
     editMessage: 'Editar Texto del Mensaje',
     emptyTopic: 'Ningún Mensaje',
     notes: 'Notas',
+
+    welcome: 'Bienvenido a Databag',
+    communication: 'Comunicación para Internet Descentralizada',
+    setup: 'Configura Tu Perfil',
+    connect: 'Conéctate Con Gente',
+    start: 'Iniciar una Conversación',
+    started: 'Empezar',
   },
   {
     languageCode: 'de',
@@ -736,6 +757,13 @@ const Strings = [
     editMessage: 'Nachrichtentext Bearbeiten',
     emptyTopic: 'Keine Nachrichten',
     notes: 'Anmerkungen',
+
+    welcome: 'Willkommen bei Databag',
+    communication: 'Kommunikation für das dezentrale Internet',
+    setup: 'Richten Sie Ihr Profil ein',
+    connect: 'Verbinde dich mit Menschen',
+    start: 'Eine Konversation Beginnen',
+    started: 'Loslegen',
   },
   {
     languageCode: 'pt',
@@ -904,6 +932,13 @@ const Strings = [
     editMessage: 'Editar Texto da Mensagem',
     emptyTopic: 'Sem Mensagens',
     notes: 'Notas',
+
+    welcome: 'Bem-vindo ao DataBag',
+    communication: 'Comunicação para a Internet Descentralizada',
+    setup: 'Configure Seu Perfil',
+    connect: 'Conecte-se Com As Pessoas',
+    start: 'Crie Uma Conversa',
+    started: 'Iniciar',
   },
 ];
 

app/mobile/src/session/Session.jsx

@@ -408,8 +408,8 @@ export function Session({ sharing, clearSharing }) {
         { state.firstRun == true && (
           <SafeAreaView edges={['top', 'bottom']}  style={styles.firstRun}>
             <View style={styles.title}>
-              <Text style={styles.titleText}>Welcome To Databag</Text>
+              <Text style={styles.titleText}>{ state.strings.welcome }</Text>
-              <Text style={styles.tagText}>Communication for the Decentralized Web</Text>
+              <Text style={styles.tagText}>{ state.strings.communication }</Text>
             </View>
             { Colors.theme === 'dark' && (
               <Image style={styles.splash} source={darkSplash} resizeMode="contain" />
@@ -420,18 +420,18 @@ export function Session({ sharing, clearSharing }) {
             <View style={styles.steps} >
               <View style={styles.step}>
                 <Ionicons name={'user'} size={18} color={Colors.white} />
-                <Text style={styles.stepText}>Setup Your Profile</Text>
+                <Text style={styles.stepText}>{ state.strings.setup }</Text>
               </View>
               <View style={styles.step}>
                 <Ionicons name={'contacts'} size={18} color={Colors.white} />
-                <Text style={styles.stepText}>Connect With People</Text>
+                <Text style={styles.stepText}>{ state.strings.connect }</Text>
               </View>
               <View style={styles.step}>
                 <Ionicons name={'message1'} size={18} color={Colors.white} />
-                <Text style={styles.stepText}>Start a Conversation</Text>
+                <Text style={styles.stepText}>{ state.strings.start }</Text>
               </View>
               <TouchableOpacity style={styles.start} onPress={actions.clearFirstRun}>
-                <Text style={styles.startText}>Get Started</Text>
+                <Text style={styles.startText}>{ state.strings.started }</Text>
               </TouchableOpacity>
             </View>
           </SafeAreaView>

app/mobile/src/session/welcome/Welcome.jsx

@@ -1,19 +1,21 @@
-import { useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { Image, View, TouchableOpacity, Text } from 'react-native';
 import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
 import { styles } from './Welcome.styled';
 import { Colors } from 'constants/Colors';
 import Ionicons from 'react-native-vector-icons/AntDesign';
+import { getLanguageStrings } from 'constants/Strings';
 
 import light from 'images/session.png';
 import dark from 'images/darksess.png';
 
 export function Welcome() {
+  const [strings, setStrings] = useState(getLanguageStrings());
 
   return (
     <SafeAreaView style={styles.container}>
       <Text style={styles.header}>Databag</Text>
-      <Text style={styles.label}>Communication for the Decentralized Web</Text>
+      <Text style={styles.label}>{ strings.communication }</Text>
       { Colors.theme === 'dark' && (
         <Image style={styles.image} source={dark} />
       )}
@@ -21,11 +23,11 @@ export function Welcome() {
         <Image style={styles.image} source={light} />
       )}
       <View style={styles.steps}>
-        <Text style={styles.stepstext}>Setup your profile</Text>
+        <Text style={styles.stepstext}>{ strings.setup }</Text>
         <Ionicons name={'right'} size={18} color={Colors.text} />
-        <Text style={styles.stepstext}>Connect with people</Text>
+        <Text style={styles.stepstext}>{ strings.connect }</Text>
         <Ionicons name={'right'} size={18} color={Colors.text} />
-        <Text style={styles.stepstext}>Start a conversation</Text>
+        <Text style={styles.stepstext}>{ strings.start }</Text>
       </View>
     </SafeAreaView>
   );