Merge pull request #866 from Plant-for-the-Planet-org/feature/translation

Feature/translation

Author: shyambhongle

app.json

@@ -2,7 +2,7 @@
   "expo": {
     "name": "TreeMapper",
     "slug": "treemapper",
-    "version": "2.0.3",
+    "version": "2.0.4",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
     "userInterfaceStyle": "light",

package.json

@@ -15,7 +15,7 @@
     "@expo/metro-runtime": "~3.2.1",
     "@expo/vector-icons": "^14.0.0",
     "@gorhom/bottom-sheet": "^4.6.3",
-    "@maplibre/maplibre-react-native": "10.0.0-alpha.2",
+    "@maplibre/maplibre-react-native": "10.0.0-alpha.28",
     "@react-native-async-storage/async-storage": "1.23.1",
     "@react-native-community/datetimepicker": "8.0.1",
     "@react-native-community/netinfo": "11.3.1",

patches/@maplibre+maplibre-react-native+10.0.0-alpha.2.patch

@@ -1,4 +1,5 @@
-import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+import * as ExpoImage from 'expo-image';
 import React from 'react'
 import { scaleFont } from 'src/utils/constants/mixins'
 import { Colors, Typography } from 'src/utils/constants'
@@ -24,7 +25,7 @@ const CarouselItem = (props: Props) => {
       onPress(data.intervention_id, data.tree_id)
     }}>
       <View style={styles.imageWrapper}>
-        {hasImage ? <Image style={styles.imageContainer} source={{ uri: uri }} /> : <SingleTreeIcon width={SCALE_36} height={SCALE_36} />
+        {hasImage ? <ExpoImage.Image cachePolicy='memory-disk' style={styles.imageContainer} source={{ uri: uri }} /> : <SingleTreeIcon width={SCALE_36} height={SCALE_36} />
         }
       </View>
       <View style={styles.sectionWrapper}>

src/components/carousel/CarouselItem.tsx

@@ -6,7 +6,6 @@ import {
     StyleSheet,
     FlatList,
     TouchableOpacity,
-    Image,
     Platform,
 } from 'react-native';
 
@@ -15,6 +14,7 @@ import { Typography, Colors } from 'src/utils/constants'
 import CountryData from 'src/utils/constants/countryData.json';
 import i18next from 'i18next';
 import { CountryCode } from 'src/types/interface/slice.interface';
+import * as ExpoImage from 'expo-image';
 
 
 const cdnUrl = process.env.EXPO_PUBLIC_CDN_URL
@@ -31,12 +31,13 @@ interface Props {
 const Item = ({ title, onPress }: { title: CountryCode, onPress: () => void }) => (
     <TouchableOpacity style={styles.item} onPress={onPress}>
         <View style={{ flexDirection: 'row' }}>
-            <Image
+            <ExpoImage.Image
+                cachePolicy='memory-disk'
                 source={{
                     uri: cdnUrl ? `${protocol}://${cdnUrl}/media/images/flags/png/256/${title.countryCode}.png` : null,
                 }}
                 style={styles.countryFlag}
-                resizeMode="contain"
+                contentFit="contain"
             />
             <View style={{ paddingLeft: 20 }}>
                 <Text style={{ color: 'black', paddingTop: 12 }}>{title.countryName}</Text>
@@ -56,7 +57,7 @@ export default function CountryModal(props: Props) {
     const selectCountry = (data: CountryCode) => {
         userCountry(data);
     };
- 
+
     const sort = () => {
         CountryData.sort((a, b) => {
             if (a.countryName > b.countryName) {

src/components/common/CountryModal.tsx

@@ -4,6 +4,7 @@ import InfoIcon from 'assets/images/svg/InfoIcon.svg'
 import Modal from 'react-native-modal'
 import { Colors, Typography } from 'src/utils/constants'
 import CustomButton from './CustomButton'
+import i18next from 'src/locales/index'
 
 
 
@@ -23,7 +24,7 @@ const MapAttribution = () => {
                 onBackdropPress={toggleInfo}>
                 <View style={styles.sectionWrapper}>
                     <Text style={styles.header}>
-                        Map credits:
+                    {i18next.t('label.map_credits')}
                     </Text>
                     <Text style={styles.mapLabels}>
                         Maplibre SDK
@@ -32,7 +33,7 @@ const MapAttribution = () => {
                         ESRI
                     </Text>
                     <Text style={styles.mapLabels}>
-                        OpenStreetMap Contributors
+                    {i18next.t('label.openstreet_contributors')}
                     </Text>
                     <CustomButton label={'Close'} pressHandler={toggleInfo} 
                     containerStyle={{width:'100%',height:70, marginTop:'5%'}}    

src/components/common/MapAttribution.tsx

@@ -311,7 +311,7 @@ const SpeciesSync = () => {
           <RotatingView isClockwise={true}>
             <RefreshIcon />
           </RotatingView>
-          <Text style={styles.label}>Species {i18next.t("label.syncing")}</Text>
+          <Text style={styles.label}>{i18next.t("label.species_caps")}{i18next.t("label.syncing")}</Text>
         </View>
       )
     }

src/components/common/SpeciesSync.tsx

@@ -64,7 +64,6 @@ const InterventionCard = (props: Props) => {
       item={item}
       overSwipe={OVERSWIPE_DIST}
       renderUnderlayLeft={() => (swipeableLeftComp())}
-      renderUnderlayRight={() => <Text>Right</Text>}
       snapPointsLeft={item.status=== 'SYNCED'?[100]:[150]}
       snapPointsRight={[0]}
     >

src/components/intervention/InterventionCard.tsx

@@ -2,20 +2,19 @@ import i18next from 'src/locales/index'
 import React from 'react'
 import {
   FlatList,
-  Image,
   StyleSheet,
   Text,
   TouchableOpacity,
   View,
 } from 'react-native'
 import PlantProjectBackdrop from 'assets/images/svg/PlantProjectIcon.svg'
 import { Colors, Typography } from 'src/utils/constants'
-
 import openWebView from 'src/utils/helpers/appHelper/openWebView'
 import LargeButton from 'src/components/common/LargeButton'
 import { useQuery } from '@realm/react'
 import { RealmSchema } from 'src/types/enum/db.enum'
 import { handleFilter } from 'src/utils/constants/CountryDataFilter'
+import * as ExpoImage from 'expo-image';
 
 interface ProjectListProps {
   isSelectable?: boolean;
@@ -95,11 +94,12 @@ const ProjectItem = ({
         isProjectSelected ? { borderColor: Colors.NEW_PRIMARY } : {},
       ]}>
       {item.image && process.env.EXPO_PUBLIC_CDN_URL ? (
-        <Image
+        <ExpoImage.Image
           source={{
             uri: `${process.env.EXPO_PUBLIC_API_PROTOCOL}://${process.env.EXPO_PUBLIC_CDN_URL}/media/cache/project/medium/${item.image}`,
           }}
           style={styles.image}
+          cachePolicy='memory-disk'
         />
       ) : (
         <View style={[styles.image, { paddingBottom: 10 }]}>

src/components/manageProject/ProjectList.tsx

@@ -3,6 +3,7 @@ import React from 'react'
 import { scaleFont, scaleSize } from 'src/utils/constants/mixins'
 import { Colors, Typography } from 'src/utils/constants'
 import BackIcon from 'assets/images/svg/BackIcon.svg'
+import i18next from 'i18next'
 
 interface Props {
 
@@ -15,8 +16,8 @@ const EditDisplayCurrentPolygonMarker = (props: Props) => {
     <View style={styles.container}>
       <TouchableOpacity style={styles.backIcon} onPress={goBack}><BackIcon onPress={goBack} /></TouchableOpacity>
       <View style={styles.wrapper}>
-        <Text style={styles.label}>Corner</Text>
-        <Text style={styles.note}>Please select the point and drag</Text>
+        <Text style={styles.label}>{i18next.t("label.corner")}</Text>
+        <Text style={styles.note}>{i18next.t("label.please_drag_point")}</Text>
       </View>
     </View>
   )