remaining headers added with localisation

RiderApp/.gitignore

@@ -1 +1,2 @@
 /node_modules
+/dist

RiderApp/languages/de.js

@@ -147,5 +147,9 @@ export const de = {
   Subtotal: 'Subtotaal',
   Assigntome: 'Toewijzen aan mij',
   'About Us': 'Over Ons',
-'Product Page': 'Product Pagina',
+  'Product Page': 'Product Pagina',
+  Order: 'Bestelling',
+  OrderMarkedAs: 'Bestelling gemarkeerd als',
+  titleLogin: 'Inloggen',
+  Picked: 'Gekozen',
 }

RiderApp/languages/en.js

@@ -146,5 +146,9 @@ export const en = {
   Subtotal: 'Subtotal',
   Assigntome: 'Assign to me',
   'About Us': 'About Us',
-  'Product Page': 'Product Page'
+  'Product Page': 'Product Page',
+  Order: 'Order',
+  OrderMarkedAs: 'Order marked as',
+  titleLogin: 'Login',
+  Picked: 'Picked'
 }

RiderApp/languages/fr.js

@@ -147,5 +147,9 @@ export const fr = {
   Subtotal: 'Sous-total',
   Assigntome: 'Attribuer à moi',
   'About Us': 'À Propos de Nous',
-'Product Page': 'Page Produit',
+  'Product Page': 'Page Produit',
+  Order: 'Commande',
+  OrderMarkedAs: 'Commande marquée comme',
+  titleLogin: 'Connexion',
+  Picked: 'Choisi',
 }

RiderApp/languages/km.js

@@ -144,5 +144,8 @@ export const km = {
   Subtotal: 'សរុបរង',
   Assigntome: 'ផ្ដល់ទៅខ្លួនឯង',
   'About Us': 'អំពីយើង',
-'Product Page': 'ទំព័រផលិតផល',
+  'Product Page': 'ទំព័រផលិតផល',
+  Order: 'បញ្ជាទិញ',
+  OrderMarkedAs: 'បញ្ជាតម្រៀបជានៅជិត',
+  Picked: 'បានជ្រើសរើស',
 }

RiderApp/languages/zh.js

@@ -141,4 +141,8 @@ export const zh = {
   Assigntome: '分配给我',
   'About Us': '关于我们',
 'Product Page': '产品页面',
+Order: '订单',
+OrderMarkedAs: '标记为订单',
+titleLogin: '登录',
+Picked: '已选取',
 }

RiderApp/src/screens/Chat/Chat.js

@@ -1,6 +1,6 @@
 import { Feather, FontAwesome } from '@expo/vector-icons'
 import { useNavigation } from '@react-navigation/native'
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useState, useLayoutEffect } from 'react'
 import { Keyboard, View } from 'react-native'
 import {
   Bubble,
@@ -13,6 +13,7 @@ import { alignment } from '../../utilities/alignment'
 import colors from '../../utilities/colors'
 import { scale } from '../../utilities/scaling'
 import useStyle from './styles'
+import i18n from '../../../i18n'
 
 const UserInfo = {
   _id: 1,
@@ -42,7 +43,7 @@ function Chat() {
 
   useEffect(() => {
     navigation.setOptions({
-      title: 'Chat'
+      headerTitle: i18n.t('titleChat')
     })
     setMessages([
       {

RiderApp/src/screens/Login/Login.js

@@ -4,7 +4,7 @@ import { useNavigation } from '@react-navigation/native'
 import Constants from 'expo-constants'
 import * as Notifications from 'expo-notifications'
 import gql from 'graphql-tag'
-import React, { useContext, useEffect, useState } from 'react'
+import React, { useContext, useEffect, useState,useLayoutEffect } from 'react'
 import {
   KeyboardAvoidingView,
   Platform,
@@ -38,11 +38,13 @@ export default function Login() {
 
   const { setTokenAsync } = useContext(AuthContext)
 
-  useEffect(() => {
+
+    useLayoutEffect(() => {
     navigation.setOptions({
-      headerLeft: null
+      headerRight: null,
+      headerTitle: i18n.t('titleHelp')
     })
-  }, [])
+  }, [navigation])
 
   const [mutate, { loading }] = useMutation(RIDER_LOGIN, {
     onCompleted,

RiderApp/src/screens/OrderDetail/OrderDetail.js

@@ -71,13 +71,13 @@ function OrderDetail() {
   useLayoutEffect(() => {
     if (!selectedOrder) return;
     navigation.setOptions({
-      title: `Order ${selectedOrder.order_id}`,
+      title: `${i18n.t('Order')} ${selectedOrder.order_id}`,
     });
   }, [selectedOrder]);
   async function onCompleted({ updateOrderStatusRider, assignOrder }) {
     if (updateOrderStatusRider) {
       FlashMessage({
-        message: `Order marked as ${updateOrderStatusRider.order_status}`,
+        message: `${i18n.t('OrderMarkedAs')} ${updateOrderStatusRider.order_status}`,
       });
       if (updateOrderStatusRider.order_status === "DELIVERED") {
         navigation.goBack();

RiderApp/src/screens/Orders/Orders.js

@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState, useLayoutEffect } from 'react'
+import { useNavigation } from '@react-navigation/native'
 import {
   ImageBackground,
   StatusBar,
@@ -15,11 +16,19 @@ const BACKGROUND_IMAGE = require('../../../assets/images/ui/BG.png')
 export default function Orders() {
   const styles = useStyle()
   const [isNewOrderSelected, setIsNewOrderSelected] = useState(false)
+  const navigation = useNavigation()
 
   useEffect(() => {
     StatusBar.setBarStyle('light-content')
   }, [isNewOrderSelected])
 
+  useLayoutEffect(() => {
+    navigation.setOptions({
+      headerRight: null,
+      headerTitle: i18n.t('Orders')
+    })
+  }, [navigation])
+
   return (
     <View style={[styles.flex, styles.bottom]}>
       <ImageBackground style={styles.imageContainer} source={BACKGROUND_IMAGE}>