feat: drop layout-helper and codepush, move analytics to modular fire…

package.json

@@ -35,7 +35,6 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@lomray/react-native-layout-helper": "^2.0.0",
     "@lomray/reactotron-mobx-store-manager": "^1.2.0",
     "atomic-batcher": "^1.0.2",
     "react-native-flash-message": "^0.4.2",
@@ -92,9 +91,9 @@
   "peerDependencies": {
     "@lomray/client-helpers": "*",
     "@react-native-firebase/analytics": "^21.8.0",
+    "@react-native-firebase/app": "^21.8.0",
     "axios": "*",
     "lodash": "*",
-    "react-native-code-push": ">=7.0.5",
     "react-native-device-info": ">=10.6.0",
     "react-native-haptic-feedback": ">=2.0.3",
     "react-native-localize": "^3.0.6",

src/components/error-boundary/index.tsx

@@ -3,7 +3,6 @@ import React, { Component } from 'react';
 import { withTranslation } from 'react-i18next';
 import type { WithTranslation } from 'react-i18next';
 import { Text, View, Button } from 'react-native';
-import CodePush from 'react-native-code-push';
 import Config from '../../services/config';
 import styles from './styles';
 
@@ -29,10 +28,10 @@ class ErrorBoundary extends Component<WithTranslation & { children: ReactNode },
   }
 
   /**
-   * Reload app
+   * Drop the error state and render the tree again
    */
   handleReloadApp = () => {
-    CodePush.restartApp();
+    this.setState({ hasError: false });
   };
 
   render(): ReactNode {

src/components/error-boundary/styles.ts

@@ -1,4 +1,3 @@
-import { fs } from '@lomray/react-native-layout-helper';
 import { StyleSheet } from 'react-native';
 
 const styles = StyleSheet.create({
@@ -12,7 +11,7 @@ const styles = StyleSheet.create({
     paddingBottom: 10,
   },
   restartButtonText: {
-    fontSize: fs(9),
+    fontSize: 34,
   },
 });
 

src/components/flat-list/empty/index.tsx

@@ -1,6 +1,6 @@
 import type { FC } from 'react';
 import React from 'react';
-import type { ImageSourcePropType } from 'react-native';
+import type { ImageSourcePropType, StyleProp, TextStyle, ViewStyle } from 'react-native';
 import { ImageBackground, View, Text } from 'react-native';
 import styles from './styles';
 
@@ -10,18 +10,34 @@ interface IEmpty {
   title?: string;
   text?: string;
   Img?: ImageSourcePropType;
+  containerStyle?: StyleProp<ViewStyle>;
+  imageStyle?: StyleProp<ViewStyle>;
+  titleStyle?: StyleProp<TextStyle>;
+  textStyle?: StyleProp<TextStyle>;
 }
 
 /**
  * Empty flat list component
  * @constructor
  */
-const Empty: FC<IEmpty> = ({ hasRows, isFetching, title, text, Img }) =>
+const Empty: FC<IEmpty> = ({
+  hasRows,
+  isFetching,
+  title,
+  text,
+  Img,
+  containerStyle,
+  imageStyle,
+  titleStyle,
+  textStyle,
+}) =>
   (!hasRows && !isFetching && (
-    <View style={styles.emptyBlock}>
-      {Img && <ImageBackground source={Img} style={styles.background} resizeMode="cover" />}
-      {title && <Text style={styles.noFoundTitle}>{title}</Text>}
-      {text && <Text style={styles.noFoundText}>{text}</Text>}
+    <View style={[styles.emptyBlock, containerStyle]}>
+      {Img && (
+        <ImageBackground source={Img} style={[styles.background, imageStyle]} resizeMode="cover" />
+      )}
+      {title && <Text style={[styles.noFoundTitle, titleStyle]}>{title}</Text>}
+      {text && <Text style={[styles.noFoundText, textStyle]}>{text}</Text>}
     </View>
   )) ||
   null;

src/components/flat-list/empty/styles.ts

@@ -1,31 +1,30 @@
-import { fs, hp } from '@lomray/react-native-layout-helper';
 import { StyleSheet } from 'react-native';
 
 const styles = StyleSheet.create({
   emptyBlock: {
     flex: 1,
-    minHeight: hp(49.261), // 400
+    minHeight: 400,
     justifyContent: 'center',
     alignItems: 'center',
   },
   background: {
     position: 'absolute',
     top: '50%',
     left: '50%',
-    marginTop: hp(-18.473), // -150,
-    marginLeft: hp(-18.473), // -150,
-    width: hp(36.946), // 300
-    height: hp(36.946), // 300
+    marginTop: -150,
+    marginLeft: -150,
+    width: 300,
+    height: 300,
   },
   noFoundTitle: {
     fontWeight: '600',
-    fontSize: fs(6.4), // 24
+    fontSize: 24,
     lineHeight: 26,
-    marginBottom: hp(2.217), // 18
+    marginBottom: 18,
   },
   noFoundText: {
     lineHeight: 20,
-    fontSize: fs(3.733), // 14
+    fontSize: 14,
     fontWeight: '400',
   },
 });

src/components/top-flash-messages/index.tsx

@@ -1,4 +1,3 @@
-import { fs } from '@lomray/react-native-layout-helper';
 import type { MessageOptions } from 'react-native-flash-message';
 import { showMessage } from 'react-native-flash-message';
 import type { IConfigParams } from '../../services/config';
@@ -24,7 +23,7 @@ const showTopFlashMessage = (msgOptions: MessageOptions): void => {
       {
         color: '#ffffff',
         fontWeight: '500',
-        fontSize: fs(3.733), // 14
+        fontSize: 14,
       },
       commonOptions?.textStyle,
       typeOptions?.textStyle,

src/helpers/get-navigation-bar-dimension.ts

@@ -1,5 +1,5 @@
-import { isAndroid } from '@lomray/react-native-layout-helper';
 import { NativeModules } from 'react-native';
+import { isAndroid } from './platform';
 
 /**
  * Get navigation bar dimension on android
@@ -8,7 +8,7 @@ import { NativeModules } from 'react-native';
 const getNavigationBarDimension = (): ReturnType<
   (typeof NativeModules)['CommonModule']['getNavigationBarDimension']
 > => {
-  if (!isAndroid) {
+  if (!isAndroid()) {
     return Promise.resolve({});
   }
 

src/helpers/platform.ts

@@ -0,0 +1,13 @@
+import { Platform } from 'react-native';
+
+/**
+ * Running on iOS
+ */
+const isIOS = (): boolean => Platform.OS === 'ios';
+
+/**
+ * Running on Android
+ */
+const isAndroid = (): boolean => Platform.OS === 'android';
+
+export { isAndroid, isIOS };

src/modals/bottom-half/styles.ts

@@ -1,4 +1,3 @@
-import { hp, wp } from '@lomray/react-native-layout-helper';
 import { StyleSheet } from 'react-native';
 
 const styles = StyleSheet.create({
@@ -12,8 +11,8 @@ const styles = StyleSheet.create({
   dropdown: {
     marginTop: 'auto',
     justifyContent: 'flex-start',
-    paddingBottom: hp(6.158), // 50
-    paddingHorizontal: wp(7.467), // 28
+    paddingBottom: 50,
+    paddingHorizontal: 28,
     backgroundColor: '#FFFFFF',
     borderTopLeftRadius: 24,
     borderTopRightRadius: 24,
@@ -23,12 +22,12 @@ const styles = StyleSheet.create({
     width: '100%',
     justifyContent: 'center',
     alignItems: 'center',
-    paddingTop: hp(1.478), // 12
-    paddingBottom: hp(2.956), // 24
+    paddingTop: 12,
+    paddingBottom: 24,
   },
   controlButton: {
-    width: wp(11.733), // 44
-    height: hp(0.493), // 4
+    width: 44,
+    height: 4,
     backgroundColor: 'rgba(18, 18, 29, 0.1)',
     borderRadius: 10,
   },

src/modals/slide-modal/styles.ts

@@ -1,4 +1,3 @@
-import { fs, hp, wp } from '@lomray/react-native-layout-helper';
 import { StyleSheet } from 'react-native';
 
 const styles = StyleSheet.create({
@@ -8,7 +7,7 @@ const styles = StyleSheet.create({
   },
   titleWrapper: {
     backgroundColor: '#010101',
-    height: hp(5.419), // 44
+    height: 44,
     position: 'relative',
     flexDirection: 'row',
     alignItems: 'center',
@@ -17,11 +16,11 @@ const styles = StyleSheet.create({
   title: {
     color: '#FFFFFF',
     fontWeight: '700',
-    fontSize: fs(4.533), // 17
+    fontSize: 17,
   },
   doneWrapper: {
     position: 'absolute',
-    right: wp(4.267), // 16
+    right: 16,
     zIndex: 1,
   },
   done: {

src/navigation/helpers/handler-back-button-android.ts

@@ -1,8 +1,8 @@
-import { isAndroid } from '@lomray/react-native-layout-helper';
 import _ from 'lodash';
 import { BackHandler, NativeModules, ToastAndroid } from 'react-native';
 import ReactNativeHapticFeedback from 'react-native-haptic-feedback';
 import { Navigation } from 'react-native-navigation';
+import { isAndroid } from '../../helpers/platform';
 import Config from '../../services/config';
 import i18n from '../../services/localization';
 
@@ -15,7 +15,7 @@ import i18n from '../../services/localization';
  * NOTE: Wait popScreenDuration and if resetTimer is not called (screen is not popped) then show toast.
  */
 const HandleBackButtonAndroid = (): void => {
-  if (!isAndroid) {
+  if (!isAndroid()) {
     return;
   }
 

src/navigation/helpers/hide-android-notification-badge.ts

@@ -1,11 +1,11 @@
-import { isAndroid } from '@lomray/react-native-layout-helper';
 import { NativeModules } from 'react-native';
+import { isAndroid } from '../../helpers/platform';
 
 /**
  * Hide notification badge in android
  */
 const HideAndroidNotificationBadge = (): void => {
-  if (!isAndroid) {
+  if (!isAndroid()) {
     return;
   }
 

src/navigation/screen-animation.ts

@@ -1,12 +1,18 @@
-import { isAndroid, wp } from '@lomray/react-native-layout-helper';
+import { Dimensions } from 'react-native';
 import type {
   AnimationOptions,
   OptionsAnimationPropertyConfig,
   ViewAnimationOptions,
 } from 'react-native-navigation';
+import { isAndroid } from '../helpers/platform';
 
 const SCREEN_ANIMATION_DURATION = 300;
 
+/**
+ * The screen slides the full width, so it tracks the real device
+ */
+const SCREEN_WIDTH = Dimensions.get('window').width;
+
 const baseAnimation: OptionsAnimationPropertyConfig = {
   duration: SCREEN_ANIMATION_DURATION,
   interpolation: {
@@ -16,7 +22,7 @@ const baseAnimation: OptionsAnimationPropertyConfig = {
 
 const slideInFromRight: ViewAnimationOptions = {
   translationX: {
-    from: wp(100),
+    from: SCREEN_WIDTH,
     to: 0,
     ...baseAnimation,
   },
@@ -41,7 +47,7 @@ const slideOutToLeft: ViewAnimationOptions = {
 const slideOutToRight: ViewAnimationOptions = {
   translationX: {
     from: 0,
-    to: wp(100),
+    to: SCREEN_WIDTH,
     ...baseAnimation,
   },
 };
@@ -79,7 +85,7 @@ const slideOutAndExit: ViewAnimationOptions = {
  * @type {object}
  */
 const screenAnimations: AnimationOptions = {
-  ...(isAndroid
+  ...(isAndroid()
     ? {
         push: {
           content: {
@@ -104,7 +110,7 @@ const screenAnimations: AnimationOptions = {
     : {}),
   setRoot: {
     waitForRender: true,
-    ...(isAndroid
+    ...(isAndroid()
       ? {
           enter: {
             waitForRender: true,

src/services/analytics.ts

@@ -1,13 +1,19 @@
-import { isIOS } from '@lomray/react-native-layout-helper';
 import type { FirebaseAnalyticsTypes } from '@react-native-firebase/analytics';
-import analytics from '@react-native-firebase/analytics';
+import { getAnalytics } from '@react-native-firebase/analytics';
+import { getApp } from '@react-native-firebase/app';
 import _ from 'lodash';
 import type { ConversionData } from 'react-native-appsflyer';
 import DeviceInfo from 'react-native-device-info';
 import { getTrackingStatus, requestTrackingPermission } from 'react-native-tracking-transparency';
+import { isIOS } from '../helpers/platform';
 import Config from './config';
 import type { ILogType } from './log';
 
+/**
+ * Modular Firebase analytics instance
+ */
+const analytics = (): FirebaseAnalyticsTypes.Module => getAnalytics(getApp());
+
 // eslint-disable-next-line @typescript-eslint/consistent-type-imports
 type FacebookSDK = typeof import('react-native-fbsdk-next');
 // eslint-disable-next-line @typescript-eslint/consistent-type-imports
@@ -332,7 +338,7 @@ class Analytics {
    * Check APP TRACKING TRANSPARENCY
    */
   protected async checkATT(): Promise<boolean> {
-    if (!isIOS || !this.isATT) {
+    if (!isIOS() || !this.isATT) {
       return true;
     }
 

src/services/version-check.ts

@@ -1,5 +1,6 @@
 import { Platform } from 'react-native';
 import DeviceInfo from 'react-native-device-info';
+import { isAndroid } from '../helpers/platform';
 import Config from './config';
 import type { ILogType } from './log';
 
@@ -59,7 +60,7 @@ class VersionCheck {
         headers: { 'sec-fetch-site': 'same-origin' },
       });
 
-      if (Platform.OS === 'android') {
+      if (isAndroid()) {
         const text = await res.text();
 
         const match = text.match(/Current Version.+?>([\d.-]+)<\/span>/);