ordering-ui-react-native 0.16.10 → 0.16.11-release

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.16.10",
+  "version": "0.16.11-release",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",
@@ -33,6 +33,7 @@
     "lint": "eslint ."
   },
   "dependencies": {
+    "@fatnlazycat/react-native-recaptcha-v3": "^1.0.3",
     "@invertase/react-native-apple-authentication": "^2.1.5",
     "@react-native-async-storage/async-storage": "^1.15.5",
     "@react-native-clipboard/clipboard": "^1.8.4",
@@ -57,7 +58,7 @@
     "@types/styled-components": "^5.1.3",
     "axios": "^0.21.0",
     "moment": "^2.29.1",
-    "ordering-components": "github:Ordering-Inc/ordering-components#development",
+    "ordering-components": "github:Ordering-Inc/ordering-components#release",
     "patch-package": "^6.4.7",
     "postinstall-postinstall": "^2.1.0",
     "prop-types": "^15.7.2",
@@ -86,6 +87,7 @@
     "react-native-google-places-autocomplete": "^2.1.3",
     "react-native-html-to-pdf": "^0.10.0",
     "react-native-image-picker": "^4.0.6",
+    "react-native-intersection-observer": "^0.0.9",
     "react-native-lightbox": "^0.8.1",
     "react-native-linear-gradient": "^2.5.6",
     "react-native-loading-spinner-overlay": "^2.0.0",
@@ -109,6 +111,7 @@
     "react-native-sound": "^0.11.1",
     "react-native-swipe-gestures": "^1.0.5",
     "react-native-swiper": "^1.6.0",
+    "react-native-tracking-transparency": "^0.1.1",
     "react-native-uuid": "^2.0.1",
     "react-native-vector-icons": "^7.1.0",
     "react-native-webview": "^11.6.4",
@@ -123,9 +126,10 @@
     "@babel/core": "^7.11.6",
     "@babel/runtime": "^7.11.2",
     "@react-native-community/eslint-config": "^2.0.0",
-    "@types/react": "^18.0.14",
-    "@types/react-dom": "^18.0.5",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
     "@types/react-native": "^0.63.25",
+    "@types/react-native-calendar-picker": "^7.0.2",
     "babel-jest": "^26.3.0",
     "eslint": "^7.10.0",
     "jest": "^26.4.2",

package/src/DeliveryApp.tsx

@@ -7,7 +7,8 @@
  */
 
 import * as React from 'react';
-import { LogBox } from 'react-native';
+import { LogBox, Platform } from 'react-native';
+import * as Sentry from "@sentry/react-native";
 import { OrderingProvider } from 'ordering-components/native';
 import RNBootSplash from "react-native-bootsplash";
 
@@ -22,6 +23,47 @@ import theme from './theme.json';
 import AppContainer from './AppContainer';
 import { FacebookPixel } from './components/FacebookPixel';
 
+Sentry.init({
+  environment: Platform.OS === 'ios' ? 'ios' : 'android',
+  dsn: 'https://e5e1115dc93b49109f4ab65f2098bef9@o460529.ingest.sentry.io/5722123',
+  release: 'ordering-ui-native@' + process.env.npm_package_version,
+  ignoreErrors: [
+    'is not defined',
+    'is not a function',
+    'can\'t find variable',
+    'objects are not valid',
+    'element type is invalid',
+    'requiring module',
+    'has not been registered',
+    'failed to connect to debugger!',
+    'rendered more hooks than',
+    'rendered fewer hooks than',
+    'should have a queue',
+    'the OS most likely terminated',
+    'Connection timed out',
+    'java.io.EOFException',
+    'Abort',
+    'Segfault',
+    'Failed to allocate a',
+    'Application Not Responding',
+    'connection no longer valid',
+    'IllegalInstruction',
+    'React.Children.only expected to receive a single React element child.',
+    'unrecognized selector sent to instance'
+  ],
+  tracesSampleRate: 0.2,
+  // Release health
+  enableAutoSessionTracking: true,
+  // Sessions close after app is 10 seconds in the background.
+  sessionTrackingIntervalMillis: 10000,
+
+  integrations: [
+    new Sentry.ReactNativeTracing({
+      routingInstrumentation: reactNavigationV5Instrumentation,
+    })
+  ]
+});
+
 LogBox.ignoreLogs([
   'Sending \`onAnimatedValueUpdate` with no listeners registered.',
   'Non-serializable values were found in the navigation state.',

package/src/components/ActiveOrders/index.tsx

@@ -48,75 +48,73 @@ export const ActiveOrders = (props: ActiveOrdersParams) => {
   }, [orders.length])
 
   const Order = ({ order }: { order: any }) => (
-    <React.Fragment>
-      <Card
-        isMiniCard={configs?.google_maps_api_key?.value}
-        onPress={() => handleClickCard(order?.uuid)}
-      >
-        {!!(configs?.google_maps_api_key?.value) && (
-          <Map>
+    <Card
+      isMiniCard={configs?.google_maps_api_key?.value}
+      onPress={() => handleClickCard(order?.uuid)}
+    >
+      {!!(configs?.google_maps_api_key?.value) && (
+        <Map>
+          <OIcon
+            url={getGoogleMapImage(order?.business?.location, configs?.google_maps_api_key?.value)}
+            height={100}
+            width={320}
+            style={{resizeMode: 'cover', borderTopRightRadius: 24, borderTopLeftRadius: 24}}
+          />
+        </Map>
+      )}
+      <Information>
+        {!!order.business?.logo && (
+          <Logo>
             <OIcon
-              url={getGoogleMapImage(order?.business?.location, configs?.google_maps_api_key?.value)}
-              height={100}
-              width={320}
-              style={{resizeMode: 'cover', borderTopRightRadius: 24, borderTopLeftRadius: 24}}
+              url={optimizeImage(order.business?.logo, 'h_300,c_limit')}
+              style={styles.logo}
             />
-          </Map>
+          </Logo>
         )}
-        <Information>
-          {!!order.business?.logo && (
-            <Logo>
-              <OIcon
-                url={optimizeImage(order.business?.logo, 'h_300,c_limit')}
-                style={styles.logo}
-              />
-            </Logo>
-          )}
-          <OrderInformation>
-            <BusinessInformation style={{ width: '60%' }}>
-              <GestureHandlerScrollView
-                  showsVerticalScrollIndicator={false}
-                  showsHorizontalScrollIndicator={false}
-                  horizontal
-              >
-                <TouchableWithoutFeedback>
-                  <View>
-                    <OText
-                      size={16}
-                      numberOfLines={1}
-                      ellipsizeMode='tail'
-                    >
-                      {order.business?.name}
-                    </OText>
-                  </View>
-                </TouchableWithoutFeedback>
-              </GestureHandlerScrollView>
-              <GestureHandlerScrollView
+        <OrderInformation>
+          <BusinessInformation style={{ width: '60%' }}>
+            <GestureHandlerScrollView
                 showsVerticalScrollIndicator={false}
                 showsHorizontalScrollIndicator={false}
                 horizontal
-              >
-                <TouchableWithoutFeedback>
-                  <View style={styles.orderNumber}>
-                    <OText size={12} space color={theme.colors.textSecondary}>{t('ORDER_NUMBER', 'Order No.')}</OText>
-                    <OText size={12} color={theme.colors.textSecondary}>{order.id}</OText>
-                  </View>
-                </TouchableWithoutFeedback>
-              </GestureHandlerScrollView>
-              <OText size={12} color={theme.colors.textSecondary}>{order?.delivery_datetime_utc
-                ? parseDate(order?.delivery_datetime_utc)
-                : parseDate(order?.delivery_datetime, { utc: false })}</OText>
-            </BusinessInformation>
-            <Price>
-              <OText size={16}>{parsePrice(order?.summary?.total || order?.total)}</OText>
-              {order?.status !== 0 && (
-                <OText color={theme.colors.primary} size={12} numberOfLines={2}>{getOrderStatus(order.status)?.value}</OText>
-              )}
-            </Price>
-          </OrderInformation>
-        </Information>
-      </Card>
-    </React.Fragment>
+            >
+              <TouchableWithoutFeedback>
+                <View>
+                  <OText
+                    size={16}
+                    numberOfLines={1}
+                    ellipsizeMode='tail'
+                  >
+                    {order.business?.name}
+                  </OText>
+                </View>
+              </TouchableWithoutFeedback>
+            </GestureHandlerScrollView>
+            <GestureHandlerScrollView
+              showsVerticalScrollIndicator={false}
+              showsHorizontalScrollIndicator={false}
+              horizontal
+            >
+              <TouchableWithoutFeedback>
+                <View style={styles.orderNumber}>
+                  <OText size={12} space color={theme.colors.textSecondary}>{t('ORDER_NUMBER', 'Order No.')}</OText>
+                  <OText size={12} color={theme.colors.textSecondary}>{order.id}</OText>
+                </View>
+              </TouchableWithoutFeedback>
+            </GestureHandlerScrollView>
+            <OText size={12} color={theme.colors.textSecondary}>{order?.delivery_datetime_utc
+              ? parseDate(order?.delivery_datetime_utc)
+              : parseDate(order?.delivery_datetime, { utc: false })}</OText>
+          </BusinessInformation>
+          <Price>
+            <OText size={16}>{parsePrice(order?.summary?.total || order?.total)}</OText>
+            {order?.status !== 0 && (
+              <OText color={theme.colors.primary} size={12} numberOfLines={2}>{getOrderStatus(order.status)?.value}</OText>
+            )}
+          </Price>
+        </OrderInformation>
+      </Information>
+    </Card>
   )
 
   return (

package/src/components/ActiveOrders/styles.tsx

@@ -1,10 +1,6 @@
-import styled from 'styled-components/native'
+import styled, { css } from 'styled-components/native'
 
-export const ActiveOrdersContainer = styled.ScrollView`
-  margin-bottom: 20px;
-  height: ${({ isMiniCards }: { isMiniCards: boolean }) => !isMiniCards ? '150px' : '220px'};
-  max-height: ${({ isMiniCards }: { isMiniCards: boolean }) => !isMiniCards ? '150px' : '220px'};
-`
+export const ActiveOrdersContainer = styled.ScrollView``
 
 export const Card = styled.TouchableOpacity`
   flex: 1;
@@ -13,25 +9,24 @@ export const Card = styled.TouchableOpacity`
   margin-right: 10px;
   min-width: 320px;
   width: 320px;
-  height: ${({ isMiniCard }: { isMiniCard: boolean }) => !isMiniCard ? '100px' : '200px'};
+  margin-bottom: 10px;
+  ${({ isMiniCard }: { isMiniCard: boolean }) => !isMiniCard && css`
+    padding: 10px 0;
+  `};
 `
 
 export const Map = styled.View`
   flex: 1;
-  height: 125px;
-  margin-bottom: 10px;
 `
 
 export const Information = styled.View`
   flex-direction: row;
   flex: 1;
-  height: 100px;
   align-items: center;
   padding: 10px;
 `
 
-export const Logo = styled.View`
-`
+export const Logo = styled.View``
 
 export const OrderInformation = styled.View`
   flex-direction: row;
@@ -40,8 +35,7 @@ export const OrderInformation = styled.View`
   padding-left: 10px;
 `
 
-export const BusinessInformation = styled.View`
-`
+export const BusinessInformation = styled.View``
 
 export const Price = styled.View`
   justify-content: space-between;

package/src/components/AddressForm/index.tsx

@@ -210,9 +210,25 @@ const AddressFormUI = (props: AddressFormParams) => {
             }
             if ( addressType === 'postal_code') {
               postalCode = component.short_name
+              if (isObjet) {
+                setValue('zipcode', postalCode)
+                handleChangeInput({ target: { name: 'zipcode', value: postalCode } })
+              }
             }
           }
           isObjet ? address = addressValue.join(', ') : address
+    
+          if (isObjet) {
+            setValue('address', address)
+            googleInput?.current?.setAddressText(address)
+            setLoadingLocation(false)
+            updateChanges({
+              address: address,
+              location: json.results[0].geometry.location
+            })
+            return
+          }
+        
           data.address = {
             address,
             location: json.results[0].geometry.location,
@@ -597,7 +613,7 @@ const AddressFormUI = (props: AddressFormParams) => {
                 name='zipcode'
                 rules={{ required: isRequiredField && isRequiredField('zipcode') ? t(`VALIDATION_ERROR_ZIP_CODE_REQUIRED`, `The field Zip Code is required`) : null }}
                 defaultValue={address?.zipcode || formState.changes?.zipcode || addressState.address.zipcode || ''}
-                render={() => (
+                render={({ value }) => (
                   <OInput
                     name='zipcode'
                     placeholder={t('ZIP_CODE', 'Zip code')}
@@ -605,7 +621,7 @@ const AddressFormUI = (props: AddressFormParams) => {
                       handleChangeInput(text)
                       setValue('zipcode', text)
                     }}
-                    value={address?.zipcode || formState.changes?.zipcode || addressState.address.zipcode || ''}
+                    value={value || address?.zipcode || formState.changes?.zipcode || addressState.address.zipcode || ''}
                     style={styles.inputsStyle}
                     forwardRef={zipCodeRef}
                     returnKeyType='next'

package/src/components/BusinessBasicInformation/index.tsx

@@ -56,22 +56,14 @@ export const BusinessBasicInformation = (props: BusinessBasicInformationParams)
         }
         source={{ uri: header || optimizeImage(businessState?.business?.header, 'h_400,c_limit') }}
       >
-        <BusinessLogo>
-          {loading ? (
-            <View style={{ marginLeft: 20 }}>
-              <Placeholder Animation={Fade}>
-                <PlaceholderLine height={50} width={20} />
-              </Placeholder>
-            </View>
-          ) : (
-            !isBusinessInfoShow && (
-              <OIcon
-                url={logo || optimizeImage(businessState?.business?.logo, 'h_300,c_limit')}
-                style={styles.businessLogo}
-              />
-            )
-          )}
-        </BusinessLogo>
+        {!isBusinessInfoShow && (
+          <BusinessLogo>
+            <OIcon
+              url={logo || optimizeImage(businessState?.business?.logo, 'h_300,c_limit')}
+              style={styles.businessLogo}
+            />
+          </BusinessLogo>
+        )}
       </BusinessHeader>
       <BusinessInfo
         style={styles.businessInfo}
@@ -117,7 +109,7 @@ export const BusinessBasicInformation = (props: BusinessBasicInformationParams)
               <PlaceholderLine width={10} />
             </Placeholder>
           ) : (
-            <View style={{width: '75%'}}>
+            <View style={{ width: '75%' }}>
               <OText color={theme.colors.textSecondary}>{getBusinessType()}</OText>
             </View>
           )}
@@ -187,7 +179,7 @@ export const BusinessBasicInformation = (props: BusinessBasicInformationParams)
         titleSectionStyle={styles.modalTitleSectionStyle}
         open={openBusinessInformation}
         onClose={() => setOpenBusinessInformation(false)}
-        styleCloseButton={{color: theme.colors.white, backgroundColor: 'rgba(0,0,0,0.3)'}}
+        styleCloseButton={{ color: theme.colors.white, backgroundColor: 'rgba(0,0,0,0.3)' }}
         isNotDecoration
       >
         <BusinessInformation
@@ -199,7 +191,7 @@ export const BusinessBasicInformation = (props: BusinessBasicInformationParams)
         titleSectionStyle={styles.modalTitleSectionStyle}
         open={openBusinessReviews}
         onClose={() => setOpenBusinessReviews(false)}
-        styleCloseButton={{color: theme.colors.white, backgroundColor: 'rgba(0,0,0,0.3)'}}
+        styleCloseButton={{ color: theme.colors.white, backgroundColor: 'rgba(0,0,0,0.3)' }}
         isNotDecoration
       >
         <BusinessReviews

package/src/components/BusinessController/index.tsx

@@ -146,16 +146,18 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
           />
         </BusinessLogo>
         <BusinessState>
-          {(isBusinessOpen || !!getBusinessOffer(business?.offers)) && (
+          {(!isBusinessOpen || !!getBusinessOffer(business?.offers)) && (
             <View style={styles.businessStateView}>
               {getBusinessOffer(business?.offers) && (
                 <OText color={theme.colors.white} size={18} style={styles.businessStateText}>
                   {getBusinessOffer(business?.offers) || parsePrice(0)}
                 </OText>
               )}
-              <OText color={theme.colors.white} size={18} style={styles.businessStateText}>
-                {t('PREORDER', 'PREORDER')}
-              </OText>
+              {!isBusinessOpen && (
+                <OText color={theme.colors.white} size={18} style={styles.businessStateText}>
+                  {t('PREORDER', 'PREORDER')}
+                </OText>
+              )}
             </View>
           )}
         </BusinessState>
@@ -164,10 +166,10 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
         <BusinessInfo>
           <View style={{ width: '70%', alignItems: 'flex-start' }}>
             <OText
-                size={20}
-                numberOfLines={1}
-                ellipsizeMode='tail'
-              >
+              size={20}
+              numberOfLines={1}
+              ellipsizeMode='tail'
+            >
               {business?.name}
             </OText>
           </View>

package/src/components/BusinessInformation/index.tsx

@@ -48,6 +48,28 @@ const BusinessInformationUI = (props: BusinessInformationParams) => {
       />
       <WrapMainContent>
         <InnerContent>
+          {(!!businessState?.business?.description) && (
+            <>
+              <GrayBackground>
+                <OText size={16} weight='bold'>{t('BUSINESS_DESCRIPTION', 'Business description')}</OText>
+              </GrayBackground>
+              <OText size={14} mBottom={20} mLeft={15} mRight={15} style={{ marginTop: 10 }}>{businessState?.business?.description}</OText>
+            </>
+          )}
+          {(!!businessState?.business?.email || !!businessState?.business?.cellphone) && (
+            <>
+              <GrayBackground>
+                <OText size={16} weight='bold'>{t('BUSINESS_DETAILS', 'Business Details')}</OText>
+              </GrayBackground>
+              {!!businessState?.business?.email && (
+                <OText size={14} mBottom={5} mLeft={15} style={{ marginTop: 10 }}>{t('EMAIL', 'Email')}: <OText color={theme.colors.textSecondary}>{businessState?.business?.email}</OText></OText>
+              )}
+              {!!businessState?.business?.cellphone && (
+                <OText size={14} mBottom={20} mLeft={15}>{t('CELLPHONE', 'Cellphone')}: <OText color={theme.colors.textSecondary}>{businessState?.business?.cellphone}</OText></OText>
+              )}
+            </>
+          )}
+
           <GrayBackground>
             <OText size={16} weight='bold'>{t('BUSINESS_LOCATION', 'Business Location')}</OText>
           </GrayBackground>

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) => product.category_id === 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/BusinessTypeFilter/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { StyleSheet, View, ScrollView, Dimensions, Platform, PlatformIOSStatic, Pressable } from 'react-native'
+import { StyleSheet, View, ScrollView, Dimensions, Platform, PlatformIOSStatic, TouchableOpacity } from 'react-native'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
 import { BusinessTypeFilter as BusinessTypeFilterController, useLanguage } from 'ordering-components/native'
 
@@ -9,7 +9,6 @@ import { BusinessTypeFilterParams } from '../../types'
 import { useTheme } from 'styled-components/native'
 import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons';
 import DeviceInfo from 'react-native-device-info';
-import { TouchableOpacity } from 'react-native-gesture-handler'
 
 const windowWidth = Dimensions.get('window').width;
 

package/src/components/BusinessesListing/index.tsx

@@ -191,7 +191,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
         {isFarAway && (
 					<FarAwayMessage style={styles.farAwayMsg}>
 						<Ionicons name='md-warning-outline' style={styles.iconStyle} />
-						<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'You are far from this address')}</OText>
+						<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'Your are far from this address')}</OText>
 					</FarAwayMessage>
 				)}
       </OrderControlContainer>

package/src/components/Checkout/index.tsx

@@ -93,7 +93,7 @@ const CheckoutUI = (props: any) => {
     deliveryOptionSelected,
     instructionsOptions,
     handleChangeDeliveryOption,
-
+    merchantId
   } = props
 
   const theme = useTheme();
@@ -530,6 +530,7 @@ const CheckoutUI = (props: any) => {
                   handlePaymentMethodClickCustom={handlePaymentMethodClick}
                   setCardData={setCardData}
                   handlePlaceOrder={handlePlaceOrder}
+                  merchantId={merchantId}
                 />
               </ChPaymethods>
             </ChSection>

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
   }