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

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

Author: olegatorlelik

package-lock.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",

package.json

@@ -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/index.tsx

@@ -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/error-boundary/styles.ts

@@ -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/index.tsx

@@ -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/flat-list/empty/styles.ts

@@ -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/components/top-flash-messages/index.tsx

@@ -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/get-navigation-bar-dimension.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/helpers/platform.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,
   },