@fadyshawky/react-native-magic 2.0.4 → 2.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fadyshawky/react-native-magic",
-  "version": "2.0.4",
+  "version": "2.0.6",
   "description": "react native template with ready components, hooks, react navigation, redux, typescript, etc.",
   "keywords": [
     "react-native-magic",

package/template/App.tsx

@@ -4,33 +4,44 @@
  *
  * @format
  */
-import React from 'react';
-import {LogBox, SafeAreaView, StatusBar} from 'react-native';
+import React, {useEffect} from 'react';
+import {ImageBackground, LogBox, SafeAreaView, StatusBar} from 'react-native';
 import {SheetProvider} from 'react-native-actions-sheet';
 import {SafeAreaProvider} from 'react-native-safe-area-context';
 import {Provider} from 'react-redux';
 import {PersistGate} from 'redux-persist/integration/react';
 import {LocalizationProvider} from './src/common/localization/LocalizationProvider';
-import {DEFAULT_LANGUAGE} from './src/common/localization/localization';
+import {RTLInitializer} from './src/common/localization/RTLInitializer';
+import {
+  Languages,
+  DEFAULT_LANGUAGE,
+} from './src/common/localization/localization';
 import {persistor, store} from './src/core/store/store';
-import {ThemeProvider, useTheme} from './src/core/theme/ThemeProvider';
 import AppNavigator from './src/navigation/MainNavigation';
+import {ThemeProvider, useTheme} from './src/core/theme/ThemeProvider';
+import {useAppSelector} from './src/core/store/reduxHelpers';
 
 LogBox.ignoreAllLogs();
 
 const ThemedApp = () => {
   const {theme} = useTheme();
+  const {language} = useAppSelector(state => state.app);
+
   return (
-    <SafeAreaProvider>
-      <SafeAreaView style={{position: 'absolute'}} />
-      <StatusBar
-        barStyle={theme.mode === 'dark' ? 'light-content' : 'dark-content'}
-        backgroundColor={theme.colors.background}
-      />
-      <SheetProvider>
-        <AppNavigator />
-      </SheetProvider>
-    </SafeAreaProvider>
+    <RTLInitializer>
+      <LocalizationProvider initialLanguage={language}>
+        <SafeAreaProvider>
+          <SafeAreaView style={{position: 'absolute'}} />
+          <StatusBar
+            barStyle={theme.mode === 'dark' ? 'light-content' : 'dark-content'}
+            backgroundColor={theme.colors.background_2}
+          />
+          <SheetProvider>
+            <AppNavigator />
+          </SheetProvider>
+        </SafeAreaProvider>
+      </LocalizationProvider>
+    </RTLInitializer>
   );
 };
 
@@ -38,11 +49,9 @@ function App(): React.JSX.Element {
   return (
     <Provider store={store}>
       <PersistGate loading={null} persistor={persistor}>
-        <LocalizationProvider initialLanguage={DEFAULT_LANGUAGE}>
-          <ThemeProvider initialTheme="dark">
-            <ThemedApp />
-          </ThemeProvider>
-        </LocalizationProvider>
+        <ThemeProvider initialTheme="dark">
+          <ThemedApp />
+        </ThemeProvider>
       </PersistGate>
     </Provider>
   );

package/template/ios/reactnativemagic/AppDelegate.mm

@@ -1,11 +1,16 @@
 #import "AppDelegate.h"
 
 #import <React/RCTBundleURLProvider.h>
+#import <React/RCTI18nUtil.h>
 
 @implementation AppDelegate
 
 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
 {
+
+  [[RCTI18nUtil sharedInstance] allowRTL:YES];
+  [[RCTI18nUtil sharedInstance] forceRTL:YES];
+
   self.moduleName = @"reactnativemagic";
   // You can add your custom initial props in the dictionary below.
   // They will be passed down to the ViewController used by React Native.

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

@@ -1,9 +1,8 @@
 import React, {FC, memo} from 'react';
 import {ImageBackground, StyleSheet, View, ViewStyle} from 'react-native';
+import {KeyboardAwareScrollViewProps} from 'react-native-keyboard-aware-scroll-view';
 import {useTheme} from '../../core/theme/ThemeProvider';
-import {ImageResources} from '../ImageResources.g';
 import {Container} from './Container';
-import {KeyboardAwareScrollViewProps} from 'react-native-keyboard-aware-scroll-view';
 
 interface BackgroundProps
   extends Omit<KeyboardAwareScrollViewProps, 'contentContainerStyle'> {
@@ -46,7 +45,7 @@ export const Background: FC<BackgroundProps> = memo(
         <View
           style={[
             styles.container,
-            {backgroundColor: theme.colors.background},
+            {backgroundColor: theme.colors.background_2},
           ]}>
           {content}
         </View>
@@ -55,7 +54,10 @@ export const Background: FC<BackgroundProps> = memo(
 
     return (
       <View
-        style={[styles.container, {backgroundColor: theme.colors.background}]}>
+        style={[
+          styles.container,
+          {backgroundColor: theme.colors.background_2},
+        ]}>
         <ImageBackground source={0} style={styles.container}>
           {content}
         </ImageBackground>

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

@@ -1,21 +1,18 @@
 import React, {forwardRef} from 'react';
 import {
-  StyleSheet,
-  ViewStyle,
-  Platform,
-  KeyboardAvoidingView,
-  ScrollView,
-  View,
   ImageBackground,
   ImageSourcePropType,
+  KeyboardAvoidingView,
+  StyleSheet,
+  View,
+  ViewStyle,
 } from 'react-native';
 import {
   KeyboardAwareScrollView,
   KeyboardAwareScrollViewProps,
 } from 'react-native-keyboard-aware-scroll-view';
-import {useTheme} from '../../core/theme/ThemeProvider';
 import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context';
-import {ImageResources} from '../ImageResources.g';
+import {useTheme} from '../../core/theme/ThemeProvider';
 
 interface ContainerProps extends Partial<KeyboardAwareScrollViewProps> {
   children: React.ReactNode;
@@ -50,7 +47,7 @@ export const Container = forwardRef<KeyboardAwareScrollView, ContainerProps>(
     const {theme} = useTheme();
     const insets = useSafeAreaInsets();
     const Wrapper = useSafeArea ? SafeAreaView : View;
-    const bgColor = backgroundColor || theme.colors.background;
+    const bgColor = backgroundColor || theme.colors.background_2;
 
     const content = (
       <Wrapper

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

@@ -1,15 +1,16 @@
 import React, {useRef, useState} from 'react';
 import {
-  NativeSyntheticEvent,
   StyleSheet,
+  View,
   TextInput,
+  NativeSyntheticEvent,
   TextInputKeyPressEventData,
   ViewStyle,
 } from 'react-native';
 import {useTheme} from '../../core/theme/ThemeProvider';
 import {CommonSizes} from '../../core/theme/commonSizes';
-import {scaleWidth} from '../../core/theme/scaling';
 import {PrimaryTextInput} from './PrimaryTextInput';
+import {scaleWidth} from '../../core/theme/scaling';
 import {RTLAwareView} from './RTLAwareView';
 
 interface OTPInputProps {

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

@@ -17,12 +17,12 @@ import {
   TouchablePlatformProps,
 } from '../../../types';
 import {useTheme} from '../../core/theme/ThemeProvider';
+import {BorderRadius, Spacing} from '../../core/theme/commonSizes';
 import {createThemedStyles} from '../../core/theme/commonStyles';
 import {Theme} from '../../core/theme/types';
 import {IconPlatform} from './IconPlatform';
 import {TouchablePlatform} from './TouchablePlatform';
 import {scaleHeight, scaleSpacing} from '../../core/theme/scaling';
-import {CommonSizes} from '../../core/theme/commonSizes';
 
 interface IProps extends TouchablePlatformProps {
   label: string;
@@ -58,7 +58,7 @@ export const PrimaryButton: FC<IProps> = memo(
         return (
           <ActivityIndicator
             animating={true}
-            color={theme.colors.grayScale_50}
+            color={theme.colors.backgroundOpacity}
             size={'small'}
           />
         );
@@ -91,7 +91,7 @@ export const PrimaryButton: FC<IProps> = memo(
     return (
       <TouchablePlatform
         style={[styles.button, style] as ViewStyle[]}
-        highlightColor={theme.colors.grayScale_50}
+        highlightColor={theme.colors.mutedLavender30}
         {...props}>
         {content}
       </TouchablePlatform>
@@ -158,19 +158,19 @@ function mergeStylesWithDisabled(
     ...styles,
     button: {
       ...styles.button,
-      backgroundColor: theme.colors.grayScale_50,
+      backgroundColor: theme.colors.mutedLavender30,
       borderColor: outline
-        ? theme.colors.grayScale_50
+        ? theme.colors.mutedLavender
         : styles.button.borderColor,
       elevation: 0,
     } as ViewStyle,
     icon: {
       ...styles.icon,
-      tintColor: theme.colors.grayScale_50,
+      tintColor: theme.colors.mutedLavender,
     } as ImageStyle,
     label: {
       ...styles.label,
-      color: theme.colors.grayScale_50,
+      color: theme.colors.backgroundOpacity,
     } as TextStyle,
   };
 }
@@ -194,7 +194,7 @@ function createButtonStyles(theme: Theme) {
 
   const commonLabelStyle: TextStyle = {
     ...createThemedStyles(theme).h4_bold,
-    color: theme.colors.grayScale_0,
+    color: theme.colors.white,
     textAlign: 'center',
     textAlignVertical: 'center',
     ...Platform.select({
@@ -209,26 +209,26 @@ function createButtonStyles(theme: Theme) {
     height: 22,
     marginHorizontal: scaleSpacing(12),
     resizeMode: 'contain',
-    tintColor: theme.colors.PlatinateBlue_700,
+    tintColor: theme.colors.indigoBlue,
   };
 
   return {
     solid: StyleSheet.create({
       button: {
         ...commonButtonStyle,
-        backgroundColor: theme.colors.PlatinateBlue_700,
+        backgroundColor: theme.colors.indigoBlue,
       } as ViewStyle,
       label: theme.text.button,
       icon: {
         ...commonIcon,
-        tintColor: theme.colors.grayScale_0,
+        tintColor: theme.colors.white,
       },
     }),
 
     outline: StyleSheet.create({
       button: {
         ...commonButtonStyle,
-        borderColor: theme.colors.PlatinateBlue_700,
+        borderColor: theme.colors.indigoBlue,
         borderWidth: 2,
       } as ViewStyle,
       label: {
@@ -240,7 +240,7 @@ function createButtonStyles(theme: Theme) {
     outlineNegative: StyleSheet.create({
       button: {
         ...commonButtonStyle,
-        borderColor: theme.colors.PlatinateBlue_700,
+        borderColor: theme.colors.mutedLavender,
         borderWidth: 2,
       } as ViewStyle,
       label: {
@@ -248,7 +248,7 @@ function createButtonStyles(theme: Theme) {
       } as TextStyle,
       icon: {
         ...commonIcon,
-        tintColor: theme.colors.PlatinateBlue_700,
+        tintColor: theme.colors.mutedLavender,
       },
     }),
 
@@ -271,12 +271,12 @@ function createSmallSolidStyles(theme: Theme): IStyles {
   const commonStyles = createThemedStyles(theme);
   return StyleSheet.create({
     button: {
-      padding: CommonSizes.spacing.md,
+      padding: Spacing.medium,
       alignItems: 'center',
       justifyContent: 'center',
-      borderRadius: CommonSizes.borderRadius.xl,
+      borderRadius: BorderRadius.extraLarge,
       flexDirection: 'row',
-      backgroundColor: theme.colors.PlatinateBlue_700,
+      backgroundColor: theme.colors.indigoBlue,
       // width: 175,
     } as ViewStyle,
     label: {
@@ -286,7 +286,7 @@ function createSmallSolidStyles(theme: Theme): IStyles {
       width: 22,
       height: 22,
       resizeMode: 'contain',
-      tintColor: theme.colors.grayScale_0,
+      tintColor: theme.colors.white,
     } as ImageStyle,
   });
 }
@@ -295,25 +295,25 @@ function createSmallOutlineStyles(theme: Theme): IStyles {
   const commonStyles = createThemedStyles(theme);
   return StyleSheet.create({
     button: {
-      padding: CommonSizes.spacing.md,
+      padding: Spacing.medium,
       alignItems: 'center',
       justifyContent: 'center',
-      borderRadius: CommonSizes.borderRadius.xl,
+      borderRadius: BorderRadius.extraLarge,
       flexDirection: 'row',
       backgroundColor: 'transparent',
       width: 175,
-      borderColor: theme.colors.PlatinateBlue_700,
+      borderColor: theme.colors.indigoBlue,
       borderWidth: 1,
     } as ViewStyle,
     label: {
       ...commonStyles.normalText,
-      color: theme.colors.PlatinateBlue_700,
+      color: theme.colors.indigoBlue,
     } as TextStyle,
     icon: {
       width: 22,
       height: 22,
       resizeMode: 'contain',
-      tintColor: theme.colors.PlatinateBlue_700,
+      tintColor: theme.colors.indigoBlue,
     } as ImageStyle,
   });
 }