ordering-ui-react-native 0.16.85 → 0.16.86

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.16.85",
+  "version": "0.16.86",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

package/src/components/BusinessProductsList/index.tsx

@@ -34,9 +34,9 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
   return (
     <ProductsContainer>
       {category.id && (
-        categoryState.products?.sort((a: any, b: any) => a.rank - b.rank).map((product: any) => (
+        categoryState.products?.sort((a: any, b: any) => a.rank - b.rank).map((product: any, index: number) => (
           <SingleProductCard
-            key={product.id}
+            key={`category${category.id}-${product.id}-${index}`}
             isSoldOut={(product.inventoried && !product.quantity)}
             product={product}
             businessId={businessId}
@@ -51,9 +51,9 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
             <>
               <OText size={18} weight='bold' mBottom={10}>{t('FEATURED', 'Featured')}</OText>
               <>
-                {categoryState.products?.sort((a: any, b: any) => a.rank - b.rank).map((product: any) => product.featured && (
+                {categoryState.products?.sort((a: any, b: any) => a.rank - b.rank).map((product: any, index: number) => product.featured && (
                   <SingleProductCard
-                    key={product.id}
+                    key={`featured${product.id}-${index}`}
                     isSoldOut={(product.inventoried && !product.quantity)}
                     product={product}
                     businessId={businessId}
@@ -70,16 +70,16 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
         !category.id && categories && categories.filter(category => category.id !== null).map((category, i, _categories) => {
           const products = categoryState.products?.filter((product: any) => category?.children?.some((cat: any) => cat?.category_id === product?.category_id)) || []
           return (
-            <View key={category.id} style={{ alignItems: 'flex-start', flex: 1 }}>
+            <View key={`category${category.id}`} style={{ alignItems: 'flex-start', flex: 1 }}>
               {
                 products.length > 0 && (
                   <>
                     <OText size={18} weight='bold' mBottom={10}>{category.name}</OText>
                     <>
                       {
-                        products?.sort((a: any, b: any) => a.rank - b.rank).map((product: any) => (
+                        products?.sort((a: any, b: any) => a.rank - b.rank).map((product: any, index: number) => (
                           <SingleProductCard
-                            key={product.id}
+                            key={`all${product.id}-${index}`}
                             isSoldOut={product.inventoried && !product.quantity}
                             businessId={businessId}
                             product={product}

package/src/components/LanguageSelector/index.tsx

@@ -1,13 +1,12 @@
 import React, { useEffect, useState } from 'react'
-import { LanguageSelector as LanguageSelectorController, useOrder } from 'ordering-components/native'
+import { Platform, StyleSheet, NativeModules } from 'react-native'
 import { useTheme } from 'styled-components/native';
-import { I18nManager, Platform, StyleSheet, View } from 'react-native'
+import RNRestart from 'react-native-restart'
+import { LanguageSelector as LanguageSelectorController, useOrder, useLanguage } from 'ordering-components/native'
 
 import RNPickerSelect from 'react-native-picker-select'
 import { Container, DummyContainer } from './styles'
 import { LanguageSelectorParams } from '../../types'
-import { OIcon } from '../shared'
-import RNRestart from 'react-native-restart'
 
 const LanguageSelectorUI = (props: LanguageSelectorParams) => {
 
@@ -19,6 +18,7 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
   } = props
 
   const [orderState] = useOrder()
+  const [langugageState] = useLanguage()
   const theme = useTheme();
 
   const [language, setLanguage] = useState(currentLanguage)
@@ -70,16 +70,18 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
   )
 
   const changeDirection = async (language: any) => {
-    if (language !== 'ar') {
-      if (I18nManager.isRTL) {
-        await I18nManager.forceRTL(false)
-        RNRestart.Restart();
-      }
-    } else {
-      if (!I18nManager.isRTL) {
-        await I18nManager.forceRTL(true)
-        RNRestart.Restart();
-      }
+    if (language === langugageState?.language?.code) return
+    const isArabicLang = language === 'ar'
+    const isRTLOn = NativeModules.I18nManager.isRTL
+
+    if (isArabicLang && !isRTLOn) {
+      NativeModules.I18nManager.forceRTL(!isRTLOn)
+      RNRestart.Restart();
+    }
+
+    if (!isArabicLang && isRTLOn) {
+      NativeModules.I18nManager.forceRTL(!isRTLOn)
+      RNRestart.Restart();
     }
   }
 
@@ -87,11 +89,11 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
     changeDirection(Platform.OS === 'ios' ? language : langCode)
     handleChangeLanguage(Platform.OS === 'ios' ? language : langCode)
   }
-  
+
   useEffect(() => {
     changeDirection(currentLanguage)
   }, [])
-  
+
   return (
     <Container>
       {languagesState?.languages ? (
@@ -113,8 +115,11 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
 }
 
 export const LanguageSelector = (props: LanguageSelectorParams) => {
+  const [langugageState] = useLanguage()
+
   const LanguageProps = {
     ...props,
+    currentLanguage: langugageState?.language?.code ?? NativeModules.I18nManager.localeIdentifier?.split('_')?.[0] ?? 'en',
     UIComponent: LanguageSelectorUI
   }
 

package/src/components/Messages/index.tsx

@@ -42,8 +42,8 @@ const ORDER_STATUS: any = {
 
 const imgOptions = {
   mediaType: 'photo',
-  maxHeight: 300,
-  maxWidth: 300,
+  maxHeight: 2048,
+  maxWidth: 2048,
   includeBase64: true,
   selectionLimit: 0
 }