The seventh release(Localization) (#20)

* Feat/notes screen (#1)

* feat(header-bar): create some custom components

* feat: implement notes screen

* Feat/edit note screen (#2)

* feat(notes): implement the note edit screen

* feat(notes): integrate with creating, updating and deleting endpoints

* feat: implement the infinite scroll

* feat: implement the splash screen

* feat: implement google authentication (#3)

* Lots of UI/UX enhancements + bug fixing (#15)

* feat: small UI enhancements

* feat(header): add a plus icon on the edit note screen

* feat: implement the toast messages

* feat: implement the confirm alert

* feat(note-form): implement a generic alert before leaving the screen

* feat(note-form): auto focus for a new note

* feat(note-form): improve the text editor UX

* feat(UI): implement the linear gradient bg

* feat: add the gradient bg for the sign in screen

* feat: adjust ui for small and big screens, add alert for label modifications

* fix(notes): pass the correct index after a note created

* Localization (#19)

* feat: setup i18n and add en localization

* feat: add general localizations for 5 other languages

* feat: enhance the translations

* fix: adjust the status bar bg

app.json

@@ -4,7 +4,7 @@
     "slug": "bulletjournal",
     "owner": "oleksandrshysh",
     "originalFullName": "@frankmelward/bulletjournal",
-    "version": "1.1.3",
+    "version": "1.1.4",
     "orientation": "portrait",
     "icon": "./assets/images/mainIcon.png",
     "scheme": "com.frankmelward.bulletjournal",
@@ -15,10 +15,11 @@
       "backgroundColor": "#0891b2"
     },
     "androidStatusBar": {
-      "barStyle": "light-content",
-      "translucent": true
+      "barStyle": "light-content"
     },
-    "assetBundlePatterns": ["**/*"],
+    "assetBundlePatterns": [
+      "**/*"
+    ],
     "ios": {
       "supportsTablet": true,
       "bundleIdentifier": "com.frankmelward.bulletjournal"
@@ -29,7 +30,7 @@
         "backgroundImage": "./assets/images/iconBg.png",
         "backgroundColor": "#354352"
       },
-      "versionCode": 11,
+      "versionCode": 12,
       "googleServicesFile": "./google-services.json",
       "package": "com.frankmelward.bulletjournal"
     },
@@ -38,7 +39,8 @@
       "@react-native-firebase/app",
       "@react-native-firebase/crashlytics",
       "expo-image-picker",
-      "./plugins/custom-android-styles.js"
+      "./plugins/custom-android-styles.js",
+      "expo-localization"
     ],
     "experiments": {
       "typedRoutes": true

babel.config.js

@@ -13,6 +13,7 @@ module.exports = function (api) {
             components: "./src/components",
             config: "./src/config",
             hooks: "./src/hooks",
+            localization: "./src/localization",
             modules: "./src/modules",
             store: "./src/store",
             theme: "./src/theme",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "bulletjournal",
   "main": "index.js",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "scripts": {
     "start": "expo start",
     "android": "expo run:android",
@@ -53,19 +53,22 @@
     "expo-image-picker": "~14.3.2",
     "expo-linear-gradient": "~12.3.0",
     "expo-linking": "~5.0.2",
+    "expo-localization": "~14.3.0",
     "expo-navigation-bar": "~2.3.0",
     "expo-router": "^2.0.0",
     "expo-splash-screen": "~0.20.5",
     "expo-status-bar": "~1.6.0",
     "expo-system-ui": "~2.4.0",
     "expo-web-browser": "~12.3.2",
     "firebase": "^10.4.0",
+    "i18next": "^23.8.2",
     "lodash.debounce": "^4.0.8",
     "lodash.isequal": "^4.5.0",
     "ramda": "^0.29.0",
     "re-reselect": "^4.0.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-i18next": "^14.0.5",
     "react-native": "0.72.5",
     "react-native-dotenv": "^3.4.9",
     "react-native-fast-image": "^8.6.3",

plugins/custom-android-styles.js

@@ -28,7 +28,7 @@ function applyCustomStyles(styles) {
   // Add new style definition
   styles.resources.style.push({
     $: { name: "Dialog.Theme", parent: "Theme.AppCompat.Light.Dialog" },
-    item: [{ _: "#a7243a", $: { name: "colorAccent" } }],
+    item: [{ _: "#0e7490", $: { name: "colorAccent" } }],
   });
 
   return styles;

src/App.tsx

@@ -3,6 +3,7 @@ import { loadAsync } from "expo-font";
 import * as NavigationBar from "expo-navigation-bar";
 import * as SplashScreen from "expo-splash-screen";
 import React, { useCallback, useEffect, useState } from "react";
+import { I18nextProvider } from "react-i18next";
 import { StatusBar } from "react-native";
 import { SafeAreaProvider } from "react-native-safe-area-context";
 import Toast from "react-native-toast-message";
@@ -14,6 +15,7 @@ import { store } from "store/store";
 import styled, { ThemeProvider } from "styled-components/native";
 import { addCrashlyticsLog } from "utils/addCrashlyticsLog";
 
+import i18n from "./localization/i18n";
 import Nav from "./modules/navigation/components/Nav";
 import theme from "./theme";
 
@@ -66,15 +68,17 @@ export default function App() {
 
   return (
     <ThemeProvider theme={theme}>
-      <Provider store={store}>
-        <SafeAreaProvider>
-          <StatusBar barStyle="light-content" backgroundColor="transparent" />
-          <Container onLayout={onLayoutRootView}>
-            <Nav />
-          </Container>
-          <Toast topOffset={105} visibilityTime={2000} />
-        </SafeAreaProvider>
-      </Provider>
+      <I18nextProvider i18n={i18n}>
+        <Provider store={store}>
+          <SafeAreaProvider>
+            <StatusBar barStyle="light-content" backgroundColor="#157f9d" />
+            <Container onLayout={onLayoutRootView}>
+              <Nav />
+            </Container>
+            <Toast topOffset={105} visibilityTime={2000} />
+          </SafeAreaProvider>
+        </Provider>
+      </I18nextProvider>
     </ThemeProvider>
   );
 }

src/components/BottomModal/index.tsx

@@ -1,4 +1,5 @@
 import React, { PropsWithChildren, useMemo } from "react";
+import { useTranslation } from "react-i18next";
 import Toast from "react-native-toast-message";
 import theme from "theme";
 
@@ -57,6 +58,8 @@ const BottomModal = ({
   setIsVisible,
   withDividerBelowHeader = true,
 }: PropsWithChildren<Props>): JSX.Element => {
+  const { t } = useTranslation();
+
   const modalHeight = useMemo(() => {
     if (maxHeight && !height) {
       return "auto";
@@ -135,7 +138,7 @@ const BottomModal = ({
               onPress={closeModal}
             >
               <Typography fontWeight="semibold" uppercase>
-                Close
+                {t("general.close")}
               </Typography>
             </CloseButtonContainer>
           </>

src/components/ConfirmAlert.tsx

@@ -1,5 +1,6 @@
 import { LinearGradient } from "expo-linear-gradient";
 import React, { useMemo } from "react";
+import { useTranslation } from "react-i18next";
 import { Dialog } from "react-native-simple-dialogs";
 import theme from "theme";
 
@@ -22,12 +23,14 @@ type Props = {
 const ConfirmAlert = ({
   isDialogVisible,
   message,
-  title = "Confirm",
+  title,
   isDeletion,
   setIsDialogVisible,
   onConfirm,
   onDeny,
 }: Props): JSX.Element => {
+  const { t } = useTranslation();
+
   const [topGradientColor, bottomGradientColor] = useMemo(() => {
     const relevantColor = isDeletion
       ? theme.colors.red600
@@ -62,15 +65,15 @@ const ConfirmAlert = ({
           paddingBottom={10}
           color={theme.colors.white}
         >
-          {title}
+          {title ?? t("general.confirm")}
         </Typography>
         <Typography align="center" fontSize="md" color={theme.colors.whitish}>
           {message}
         </Typography>
         <Divider marginTop={16} marginBottom={16} />
         <ButtonsContainer>
           <Button
-            label="No"
+            label={t("general.no")}
             width="46%"
             bgColor={isDeletion ? theme.colors.red500 : undefined}
             shouldReverseBgColor={!isDeletion}
@@ -80,7 +83,7 @@ const ConfirmAlert = ({
             }}
           />
           <Button
-            label="Yes"
+            label={t("general.yes")}
             width="46%"
             bgColor={isDeletion ? theme.colors.red500 : undefined}
             shouldReverseBgColor={!isDeletion}

src/components/CustomModal.tsx

@@ -1,4 +1,5 @@
 import React, { PropsWithChildren } from "react";
+import { useTranslation } from "react-i18next";
 import { Modal } from "react-native";
 
 import styled from "styled-components/native";
@@ -21,6 +22,8 @@ const CustomModal = ({
   setIsVisible,
   children,
 }: PropsWithChildren<Props>): JSX.Element => {
+  const { t } = useTranslation();
+
   const dismissModal = () => {
     setIsVisible(false);
   };
@@ -57,7 +60,7 @@ const CustomModal = ({
             <ModalFooterContainer>
               <CloseButton onPress={dismissModal} hitSlop={BUTTON_HIT_SLOP}>
                 <Typography fontWeight="bold" align="center" uppercase>
-                  Close
+                  {t("general.close")}
                 </Typography>
               </CloseButton>
             </ModalFooterContainer>

src/components/HeaderBar/components/LogoutBtn.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
 import theme from "theme";
 
 import { Entypo } from "@expo/vector-icons";
@@ -9,6 +10,8 @@ import { useAppDispatch } from "store/helpers/storeHooks";
 import styled from "styled-components/native";
 
 const LogoutBtn = (): JSX.Element => {
+  const { t } = useTranslation();
+
   const dispatch = useAppDispatch();
 
   const [isDialogVisible, setIsDialogVisible] = useState(false);
@@ -22,7 +25,7 @@ const LogoutBtn = (): JSX.Element => {
         <Entypo name="log-out" size={24} color={theme.colors.white} />
       </LogoutButtonContainer>
       <ConfirmAlert
-        message="Are you sure you want to logout?"
+        message={t("auth.logoutConfirmation")}
         isDialogVisible={isDialogVisible}
         setIsDialogVisible={setIsDialogVisible}
         onConfirm={() => dispatch(logout())}

src/components/HeaderBar/index.tsx

@@ -66,7 +66,10 @@ const HeaderBar = ({
 
   return (
     <Container>
-      <LinearGradient colors={[topGradientColor, bottomGradientColor]}>
+      <LinearGradient
+        start={{ x: 0.5, y: 0.1 }}
+        colors={[topGradientColor, bottomGradientColor]}
+      >
         <CoverView height={distanceFromTheTop} />
         <HeaderWrapper
           marginBottom={marginBottom}

src/components/SwipeableItem/DeleteItemModal.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { useTranslation } from "react-i18next";
 import theme from "theme";
 
 import Typography from "components/Typography";
@@ -16,45 +17,49 @@ const DeleteItemModal: React.FC<DeleteItemModalProps> = ({
   confirmMessage,
   noHandler,
   yesHandler,
-}) => (
-  <ConfirmItemDelete>
-    <ConfirmItemDeleteMessageWrap>
-      <Typography
-        fontSize="xs"
-        fontWeight="light"
-        color={theme.colors.white}
-        lineHeight={12}
-      >
-        {warningMessage}
-      </Typography>
-      <Typography fontSize="sm" color={theme.colors.white} lineHeight={14}>
-        {confirmMessage}
-      </Typography>
-    </ConfirmItemDeleteMessageWrap>
-    <ConfirmItemDeleteButton onPress={noHandler} testID="deleteItemModalNo">
-      <Typography
-        fontSize="sm"
-        fontWeight="bold"
-        uppercase
-        color={theme.colors.red600}
-        lineHeight={17}
-      >
-        No
-      </Typography>
-    </ConfirmItemDeleteButton>
-    <ConfirmItemDeleteButton onPress={yesHandler} testID="deleteItemModalYes">
-      <Typography
-        fontSize="sm"
-        fontWeight="bold"
-        uppercase
-        color={theme.colors.red600}
-        lineHeight={17}
-      >
-        Yes
-      </Typography>
-    </ConfirmItemDeleteButton>
-  </ConfirmItemDelete>
-);
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <ConfirmItemDelete>
+      <ConfirmItemDeleteMessageWrap>
+        <Typography
+          fontSize="xs"
+          fontWeight="light"
+          color={theme.colors.white}
+          lineHeight={12}
+        >
+          {warningMessage}
+        </Typography>
+        <Typography fontSize="sm" color={theme.colors.white} lineHeight={14}>
+          {confirmMessage}
+        </Typography>
+      </ConfirmItemDeleteMessageWrap>
+      <ConfirmItemDeleteButton onPress={noHandler} testID="deleteItemModalNo">
+        <Typography
+          fontSize="sm"
+          fontWeight="bold"
+          uppercase
+          color={theme.colors.red600}
+          lineHeight={17}
+        >
+          {t("general.no")}
+        </Typography>
+      </ConfirmItemDeleteButton>
+      <ConfirmItemDeleteButton onPress={yesHandler} testID="deleteItemModalYes">
+        <Typography
+          fontSize="sm"
+          fontWeight="bold"
+          uppercase
+          color={theme.colors.red600}
+          lineHeight={17}
+        >
+          {t("general.yes")}
+        </Typography>
+      </ConfirmItemDeleteButton>
+    </ConfirmItemDelete>
+  );
+};
 
 const ConfirmItemDelete = styled.View`
   flex: 1;

src/components/SwipeableItem/index.tsx

@@ -5,6 +5,7 @@ import React, {
   useRef,
   useState,
 } from "react";
+import { useTranslation } from "react-i18next";
 import { Animated, View } from "react-native";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import style from "styled-components";
@@ -34,6 +35,8 @@ const SwipeableItem = ({
   onPress,
   onDelete,
 }: PropsWithChildren<Props>): JSX.Element => {
+  const { t } = useTranslation();
+
   const [isRightSideSwiped, setIsRightSideSwiped] = useState(false);
   const [isLeftSideSwiped, setIsLeftSwiped] = useState(false);
 
@@ -79,13 +82,13 @@ const SwipeableItem = ({
 
     return (
       <DeleteItemModal
-        warningMessage="Are you sure?"
-        confirmMessage="Delete selected item?"
+        warningMessage={t("general.areYouSure")}
+        confirmMessage={t("note.deleteSelected")}
         yesHandler={handleDeleteSubmit}
         noHandler={() => swipeRef.current?.close()}
       />
     );
-  }, [handleDeleteSubmit, isLeftSideSwiped, isRightSideSwiped]);
+  }, [handleDeleteSubmit, isLeftSideSwiped, isRightSideSwiped, t]);
 
   return (
     <GestureHandlerRootView>