feat: move www screen to tw, use component Link instead of navigation.push and add translations

Author: Guillermo Machado

.env.sample

@@ -3,4 +3,4 @@ VAR_NUMBER=
 VAR_BOOL=
 SECRET_KEY=
 WEBSITE_URL=
-TERMS_AND_CONDITIONS_URL=
+TERMS_OF_SERVICE_URL=

env.js

@@ -138,7 +138,7 @@ const clientEnvSchema = z.object({
   API_URL: z.string(),
   VAR_NUMBER: z.number(),
   VAR_BOOL: z.boolean(),
-  TERMS_AND_CONDITIONS_URL: z.string(),
+  TERMS_OF_SERVICE_URL: z.string(),
   WEBSITE_URL: z.string(),
 });
 
@@ -165,7 +165,7 @@ const _clientEnv = {
   VAR_NUMBER: parseNumber(process.env.VAR_NUMBER),
   VAR_BOOL: parseBoolean(process.env.VAR_BOOL),
   WEBSITE_URL: parseString(process.env.WEBSITE_URL),
-  TERMS_AND_CONDITIONS_URL: parseString(process.env.TERMS_AND_CONDITIONS_URL),
+  TERMS_OF_SERVICE_URL: parseString(process.env.TERMS_OF_SERVICE_URL),
 };
 
 /**

src/app/(app)/settings.tsx

@@ -1,5 +1,5 @@
 import { Env } from '@env';
-import { router } from 'expo-router';
+import { Link } from 'expo-router';
 import { useColorScheme } from 'nativewind';
 import React from 'react';
 
@@ -32,25 +32,33 @@ export default function Settings() {
           </ItemsContainer>
 
           <ItemsContainer title="settings.links">
-            <Item
-              text="settings.terms"
-              onPress={() => {
-                const url = encodeURIComponent(Env.TERMS_AND_CONDITIONS_URL);
-                const title = encodeURIComponent('Terms & Conditions');
-
-                router.push(`/www?url=${url}&title=${title}`);
+            <Link
+              asChild
+              href={{
+                pathname: '/www',
+                params: {
+                  url: Env.TERMS_OF_SERVICE_URL,
+                  title: translate('settings.terms'),
+                },
               }}
-            />
-            <Item
-              text="settings.website"
-              icon={<Website color={iconColor} />}
-              onPress={() => {
-                const url = encodeURIComponent(Env.WEBSITE_URL);
-                const title = encodeURIComponent('Website');
-
-                router.push(`/www?url=${url}&title=${title}`);
+            >
+              <Item text="settings.terms" />
+            </Link>
+            <Link
+              asChild
+              href={{
+                pathname: '/www',
+                params: {
+                  url: Env.WEBSITE_URL,
+                  title: translate('settings.website'),
+                },
               }}
-            />
+            >
+              <Item
+                text="settings.website"
+                icon={<Website color={iconColor} />}
+              />
+            </Link>
           </ItemsContainer>
 
           <ItemsContainer title="settings.about">

src/app/onboarding.tsx

@@ -1,41 +1,44 @@
 import { useRouter } from 'expo-router';
 
 import { Cover } from '@/components/cover';
+import { translate } from '@/core';
 import { useIsFirstTime } from '@/core/hooks';
 import { Button, FocusAwareStatusBar, SafeAreaView, Text, View } from '@/ui';
+
 export default function Onboarding() {
   const [, setIsFirstTime] = useIsFirstTime();
   const router = useRouter();
+
   return (
-    <View className="flex h-full items-center  justify-center">
+    <View className="flex h-full items-center justify-center">
       <FocusAwareStatusBar />
       <View className="w-full flex-1">
         <Cover />
       </View>
-      <View className="justify-end ">
+      <View className="justify-end">
         <Text className="my-3 text-center text-5xl font-bold">
-          React Native Template
+          {translate('onboarding.title')}
         </Text>
         <Text className="mb-2 text-center text-lg text-gray-600">
-          The right way to build your mobile app
+          {translate('onboarding.subtitle')}
         </Text>
 
         <Text className="my-1 pt-6 text-left text-lg">
-          🚀 Production-ready{' '}
+          {translate('onboarding.features.production_ready')}
         </Text>
         <Text className="my-1 text-left text-lg">
-          🥷 Developer experience + Productivity
+          {translate('onboarding.features.developer_experience')}
         </Text>
         <Text className="my-1 text-left text-lg">
-          🧩 Minimal code and dependencies
+          {translate('onboarding.features.minimal_code')}
         </Text>
         <Text className="my-1 text-left text-lg">
-          💪 well maintained third-party libraries
+          {translate('onboarding.features.well_maintained_libraries')}
         </Text>
       </View>
       <SafeAreaView className="mt-6">
         <Button
-          label="Let's Get Started"
+          label={translate('onboarding.button_label')}
           onPress={() => {
             setIsFirstTime(false);
             router.replace('/sign-in');

src/app/sign-in.tsx

@@ -1,4 +1,5 @@
 import { useRouter } from 'expo-router';
+import React from 'react';
 import { showMessage } from 'react-native-flash-message';
 
 import { useLogin } from '@/api/auth/use-login';

src/app/www.tsx

@@ -1,6 +1,6 @@
 import { useLocalSearchParams, useNavigation, useRouter } from 'expo-router';
 import React, { useEffect } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { View } from 'react-native';
 import { WebView } from 'react-native-webview';
 
 import { Text } from '@/ui';
@@ -20,39 +20,19 @@ export default function WWW() {
 
   if (!url || typeof url !== 'string') {
     return (
-      <View style={styles.errorContainer}>
-        <Text style={styles.errorText}>Invalid URL</Text>
+      <View className="flex-1 items-center justify-center bg-white">
+        <Text className="text-lg text-red-500">Invalid URL</Text>
       </View>
     );
   }
 
   return (
-    <View style={styles.container}>
+    <View className="flex-1 bg-white">
       <WebView
         source={{ uri: url }}
-        style={styles.webview}
+        className="flex-1"
         onError={() => router.back()}
       />
     </View>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: 'white',
-  },
-  webview: {
-    flex: 1,
-  },
-  errorContainer: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: 'white',
-  },
-  errorText: {
-    color: 'red',
-    fontSize: 16,
-  },
-});

src/core/i18n/utils.test.ts

@@ -38,7 +38,7 @@ describe('getLanguage', () => {
 
 describe('translate', () => {
   it('should return translated string', () => {
-    const key: TxKeyPath = 'onboarding.message';
+    const key: TxKeyPath = 'onboarding.title';
     const options = { lang: 'en' };
     const translatedString = translate(key, options);
     expect(translatedString).toBe('Welcome to rootstrap app site');

src/translations/en.json

@@ -16,7 +16,15 @@
     "title": "Forgot your password?"
   },
   "onboarding": {
-    "message": "Welcome to rootstrap app site"
+    "button_label": "Let's Get Started",
+    "features": {
+      "developer_experience": "🥷 Developer experience + Productivity",
+      "minimal_code": "🧩 Minimal code and dependencies",
+      "production_ready": "🚀 Production-ready",
+      "well_maintained_libraries": "💪 Well maintained third-party libraries"
+    },
+    "subtitle": "The right way to build your mobile app",
+    "title": "React Native Template"
   },
   "settings": {
     "about": "About",