@fadyshawky/react-native-magic 1.0.8 → 1.0.9

package/template/src/common/components/SearchBar.tsx

@@ -0,0 +1,179 @@
+import React from 'react';
+import {
+  I18nManager,
+  KeyboardTypeOptions,
+  Platform,
+  StyleProp,
+  StyleSheet,
+  TextInput,
+  TextInputProps,
+  TextStyle,
+  TouchableOpacity,
+  ViewStyle,
+} from 'react-native';
+import Icon from 'react-native-vector-icons/Ionicons';
+import {CommonSizes} from '../../core/theme/commonSizes';
+import {createThemedStyles} from '../../core/theme/commonStyles';
+import {useTheme} from '../../core/theme/ThemeProvider';
+import {Languages} from '../localization/localization';
+import {
+  useLocalization,
+  useRTL,
+  useTranslation,
+} from '../localization/LocalizationProvider';
+import {RTLAwareView} from './RTLAwareView';
+
+interface SearchBarProps {
+  value: string;
+  onChangeText: (text: string) => void;
+  placeholder?: string;
+  style?: StyleProp<ViewStyle>;
+  inputStyle?: StyleProp<TextStyle>;
+  onClear?: () => void;
+  autoFocus?: boolean;
+}
+
+export const SearchBar: React.FC<SearchBarProps> = ({
+  value,
+  onChangeText,
+  placeholder,
+  style,
+  inputStyle,
+  onClear,
+  autoFocus = false,
+}) => {
+  const {theme} = useTheme();
+  const t = useTranslation();
+  const isRTL = useRTL();
+  const {currentLanguage} = useLocalization();
+  const isArabic = currentLanguage === Languages.ar;
+
+  // Create a ref to the TextInput to control it programmatically if needed
+  const inputRef = React.useRef<TextInput>(null);
+
+  const handleClear = () => {
+    onChangeText('');
+    if (onClear) {
+      onClear();
+    }
+  };
+
+  const containerStyle: ViewStyle = {
+    backgroundColor: `${theme.colors.white}20`,
+    borderColor: theme.colors.mutedLavender30,
+  };
+
+  // Set keyboard language specific properties
+  const getKeyboardProps = (): Partial<TextInputProps> => {
+    if (Platform.OS === 'ios') {
+      // For iOS, we use primaryLanguage to hint at the keyboard language
+      return {
+        keyboardType: 'default' as KeyboardTypeOptions,
+        textContentType: 'none',
+        // primaryLanguage property is iOS specific but not directly supported by RN types
+        // This custom property helps indicate preferred keyboard language to iOS
+        ...(isArabic ? {primaryLanguage: 'ar'} : {primaryLanguage: 'en'}),
+      };
+    } else {
+      // Android keyboard language is system controlled, we can only hint at it
+      return {
+        keyboardType: 'default' as KeyboardTypeOptions,
+      };
+    }
+  };
+
+  // Switch to appropriate keyboard when language changes
+  React.useEffect(() => {
+    if (Platform.OS === 'android') {
+      // On Android, the keyboard language is managed system-wide
+      // We can only ensure our TextInput respects RTL settings
+      const shouldBeRTL = isArabic;
+      if (I18nManager.isRTL !== shouldBeRTL) {
+      }
+    }
+
+    // Reset input when language changes to ensure keyboard updates
+    if (inputRef.current && value.length > 0) {
+      // Force the keyboard to reload with new language by blurring/focusing
+      inputRef.current.blur();
+      setTimeout(() => {
+        if (inputRef.current) {
+          inputRef.current.focus();
+        }
+      }, 100);
+    }
+  }, [currentLanguage, value]);
+
+  return (
+    <RTLAwareView
+      style={[
+        styles.container,
+        containerStyle,
+        style as ViewStyle,
+        {
+          backgroundColor: theme.colors.surface,
+          ...createThemedStyles(theme).dropShadow,
+        },
+      ]}>
+      <Icon
+        name="search"
+        size={20}
+        color={theme.colors.mutedLavender}
+        style={styles.searchIcon}
+      />
+      <TextInput
+        ref={inputRef}
+        {...getKeyboardProps()}
+        style={[
+          styles.input,
+          theme.text.SearchBar,
+          {
+            textAlign: isRTL ? 'right' : 'left',
+          },
+          inputStyle as TextStyle,
+        ]}
+        placeholder={placeholder || t('search', 'common')}
+        placeholderTextColor={`${theme.colors.mutedLavender}80`}
+        value={value}
+        onChangeText={onChangeText}
+        autoCapitalize="none"
+        autoComplete="off"
+        autoCorrect={false}
+        autoFocus={autoFocus}
+      />
+      {value.length > 0 && (
+        <TouchableOpacity onPressIn={handleClear} style={styles.clearButton}>
+          <Icon
+            name="close-circle"
+            size={20}
+            color={theme.colors.mutedLavender}
+          />
+        </TouchableOpacity>
+      )}
+    </RTLAwareView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    height: 48,
+    borderRadius: 16,
+    borderWidth: 1,
+    paddingHorizontal: CommonSizes.spacing.medium,
+    marginHorizontal: CommonSizes.spacing.large,
+    marginBottom: CommonSizes.spacing.large,
+  },
+  input: {
+    flex: 1,
+    paddingVertical: CommonSizes.spacing.medium,
+    paddingHorizontal: CommonSizes.spacing.small,
+  },
+  searchIcon: {
+    marginHorizontal: CommonSizes.spacing.small,
+  },
+  clearButton: {
+    padding: CommonSizes.spacing.small,
+  },
+});

package/template/src/common/components/Separator.tsx

@@ -1,24 +1,27 @@
 import React, {FC, useMemo} from 'react';
 import {StyleSheet, View, ViewStyle} from 'react-native';
-import {Colors} from '../../core/theme/colors';
 import {hairlineWidth} from '../../core/theme/commonConsts';
 import {CommonSizes} from '../../core/theme/commonSizes';
-
+import {useTheme} from '../../core/theme/ThemeProvider';
 interface IProps {
   isFull?: boolean;
 }
 
 export const Separator: FC<IProps> = ({isFull = true}) => {
+  const {theme} = useTheme();
   const containerStyle = useMemo(() => {
     return isFull ? styles.fullContainer : styles.container;
   }, [isFull]);
 
-  return <View style={containerStyle} />;
+  return (
+    <View
+      style={[containerStyle, {backgroundColor: theme.colors.indigoBlue}]}
+    />
+  );
 };
 
 const sharedStyle: ViewStyle = {
   height: hairlineWidth,
-  backgroundColor: Colors.gray,
 };
 
 const styles = StyleSheet.create({

package/template/src/common/components/TouchablePlatform.tsx

@@ -7,7 +7,6 @@ import {
   PressableStateCallbackType,
   ViewStyle,
 } from 'react-native';
-import {Colors} from '../../core/theme/colors';
 import {isAndroid} from '../../core/theme/commonConsts';
 
 interface IProps extends PressableProps {
@@ -16,7 +15,7 @@ interface IProps extends PressableProps {
 }
 
 export const TouchablePlatform: FC<IProps> = memo(
-  ({children, highlightColor = Colors.white, style, ...props}) => {
+  ({children, highlightColor, style, ...props}) => {
     const pressableStyle = useCallback(
       (state: PressableStateCallbackType) => {
         if (isAndroid) {
@@ -56,6 +55,5 @@ export const TouchablePlatform: FC<IProps> = memo(
 );
 
 const androidRippleConfig: PressableAndroidRippleConfig = {
-  color: Colors.white,
   borderless: false,
 };

package/template/src/common/components/TryAgain.tsx

@@ -6,7 +6,7 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import {Colors, NewColors} from '../../core/theme/colors';
+import {Colors} from '../../core/theme/colors';
 import {CommonSizes} from '../../core/theme/commonSizes';
 import {CommonStyles} from '../../core/theme/commonStyles';
 import {localization} from '../localization/localization';
@@ -23,7 +23,7 @@ export const TryAgain: FC<IProps> = memo(
         style={{...CommonStyles.flexCenter, backgroundColor: 'transparent'}}>
         <Text style={styles.title}>{errorText}</Text>
         {onPress != null && (
-          <TouchableOpacity onPress={onPress}>
+          <TouchableOpacity onPressIn={onPress}>
             <Text style={styles.description}>
               {localization.errors.tryAgain}
             </Text>
@@ -42,7 +42,7 @@ const styles = StyleSheet.create({
   } as TextStyle,
   description: {
     ...CommonStyles.normalText,
-    color: NewColors.blueNormalActive,
+    color: Colors.blueNormalActive,
     textAlign: 'center',
     textDecorationLine: 'underline',
   } as TextStyle,

package/template/src/common/helpers/inAppReviewHelper.ts

@@ -25,7 +25,6 @@ export function showInAppReview(
         failAction?.(error);
       });
   } else {
-    console.error('Review is not available for this device/account');
     onReviewNotAvailable?.();
   }
 }

package/template/src/common/helpers/stringsHelpers.ts

@@ -13,3 +13,13 @@ export function removeEmojis(text: string): string {
     '',
   );
 }
+
+export function normalizeAndTrimWhitespace(text: string): string {
+  // 1. Remove leading whitespace with trimStart()
+  // 2. Remove trailing whitespace with trimEnd()
+  // 3. Replace multiple whitespaces (including tabs, newlines) with a single space
+  return text
+    ?.trimStart() // Remove leading whitespace
+    ?.trimEnd() // Remove trailing whitespace
+    ?.replace(/\s+/g, ' '); // Replace multiple whitespaces with single space
+}

package/template/src/common/hooks/useFlatListActions.ts

@@ -1,5 +1,5 @@
 import {useCallback} from 'react';
-import {LoadState} from '../../types';
+import {LoadState} from '../../../types';
 import {AsyncThunk} from '@reduxjs/toolkit';
 import {useAppDispatch} from '../../core/store/reduxHelpers';
 

package/template/src/common/localization/LocalizationProvider.tsx

@@ -0,0 +1,152 @@
+import React, {createContext, useContext, useState, useEffect} from 'react';
+import {I18nManager, Platform, NativeModules} from 'react-native';
+import RNRestart from 'react-native-restart';
+import {
+  localization,
+  Languages,
+  setLanguage as setLanguageUtil,
+  getInterfaceLanguage,
+  DEFAULT_LANGUAGE,
+} from './localization';
+import {useAppDispatch, useAppSelector} from '../../core/store/reduxHelpers';
+import {setLanguage as setLanguageAction} from '../../core/store/app/appSlice';
+
+interface LocalizationContextType {
+  currentLanguage: Languages;
+  changeLanguage: (language: Languages) => void;
+  t: (key: string, section?: keyof typeof localization) => string;
+  isRTL: boolean;
+}
+
+const LocalizationContext = createContext<LocalizationContextType | undefined>(
+  undefined,
+);
+
+interface LocalizationProviderProps {
+  children: React.ReactNode;
+  initialLanguage?: Languages;
+}
+
+export const LocalizationProvider: React.FC<LocalizationProviderProps> = ({
+  children,
+  initialLanguage,
+}) => {
+  const dispatch = useAppDispatch();
+  const {language: storedLanguage, isRTL: storedIsRTL} = useAppSelector(
+    state => state.app,
+  );
+
+  const [currentLanguage, setCurrentLanguage] = useState<Languages>(
+    storedLanguage ||
+      initialLanguage ||
+      (getInterfaceLanguage() as Languages) ||
+      DEFAULT_LANGUAGE,
+  );
+  const [isRTL, setIsRTL] = useState<boolean>(
+    storedIsRTL !== undefined ? storedIsRTL : currentLanguage === Languages.ar,
+  );
+
+  useEffect(() => {
+    setLanguageUtil(currentLanguage);
+    setIsRTL(currentLanguage === Languages.ar);
+
+    // Force app restart on Android when changing RTL/LTR
+    if (Platform.OS === 'android') {
+      const shouldBeRTL = currentLanguage === Languages.ar;
+      if (I18nManager.isRTL !== shouldBeRTL) {
+        I18nManager.allowRTL(shouldBeRTL);
+        I18nManager.forceRTL(shouldBeRTL);
+      }
+    }
+  }, [currentLanguage]);
+
+  const changeLanguage = (language: Languages) => {
+    // Only restart if the language is actually changing
+    if (language !== currentLanguage) {
+      setCurrentLanguage(language);
+      dispatch(setLanguageAction(language));
+
+      // Set RTL configuration before restart
+      const shouldBeRTL = language === Languages.ar;
+      if (I18nManager.isRTL !== shouldBeRTL) {
+        I18nManager.allowRTL(shouldBeRTL);
+        I18nManager.forceRTL(shouldBeRTL);
+
+        // Restart the app to apply RTL/LTR changes properly
+        // Small delay to ensure settings are applied
+        setTimeout(() => {
+          try {
+            // Check if RNRestart is available
+            if (RNRestart && typeof RNRestart.restart === 'function') {
+              RNRestart.restart();
+            } else if (Platform.OS === 'android') {
+              // Fallback for Android using DevSettings
+              const DevSettings = NativeModules.DevSettings;
+              if (DevSettings && DevSettings.reload) {
+                DevSettings.reload();
+              }
+            }
+          } catch (error) {
+            console.error('Failed to restart the app:', error);
+          }
+        }, 100);
+      }
+    }
+  };
+
+  // Helper function to get translations
+  const t = (
+    key: string,
+    section: keyof typeof localization = 'common',
+  ): string => {
+    try {
+      const keys = key.split('.');
+      let result: any = localization[section];
+
+      // If the key has dot notation (e.g., 'registration.title'), navigate through the object
+      if (keys.length > 1) {
+        for (const k of keys) {
+          result = result[k];
+        }
+        return result || key;
+      }
+
+      // Simple key
+      return result[key] || key;
+    } catch (error) {
+      console.warn(
+        `Translation not found for key: ${key} in section: ${section}`,
+      );
+      return key;
+    }
+  };
+
+  return (
+    <LocalizationContext.Provider
+      value={{currentLanguage, changeLanguage, t, isRTL}}>
+      {children}
+    </LocalizationContext.Provider>
+  );
+};
+
+export const useLocalization = () => {
+  const context = useContext(LocalizationContext);
+  if (!context) {
+    throw new Error(
+      'useLocalization must be used within a LocalizationProvider',
+    );
+  }
+  return context;
+};
+
+// Shorthand hook for translations
+export const useTranslation = () => {
+  const {t} = useLocalization();
+  return t;
+};
+
+// Hook to get RTL status
+export const useRTL = () => {
+  const {isRTL} = useLocalization();
+  return isRTL;
+};