@propel-nsl/propel-react-native-sdk 1.0.0

package/src-app/components/MobileHeader.tsx

@@ -0,0 +1,141 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, Platform, StatusBar } from 'react-native';
+// Safe area on iOS is handled natively by PropelSDKViewController (safeAreaLayoutGuide)
+import { typography } from '../styles/shared';
+import FontFamily from '../constants/Fonts';
+import CustomImage from './CustomImage';
+import Images from '../constants/Images';
+import { VSCALE, SCALE, MSCALE } from '../constants/Scaling';
+import { colors } from '../styles/colors';
+
+interface MobileHeaderProps {
+  title?: string;
+  icon?: number | { uri: string };
+  showBack?: boolean;
+  onBack?: () => void;
+  disableSafeAreaPadding?: boolean;
+  iconPress? : () => void
+}
+
+const MobileHeader: React.FC<MobileHeaderProps> = ({
+  title,
+  showBack = false,
+  onBack,
+  disableSafeAreaPadding = false,
+  icon,
+  iconPress
+}) => {
+  // On iOS, the native PropelSDKViewController constrains the RN view below the safe area,
+  // so no top padding is needed here. On Android, use StatusBar.currentHeight.
+  const androidPadding = disableSafeAreaPadding
+    ? StatusBar.currentHeight || 0
+    : (StatusBar.currentHeight || 0) + 20;
+
+  return (
+    <View
+      style={[
+        styles.container,
+        Platform.OS === 'android' && { paddingTop: androidPadding },
+      ]}
+    >
+      {(showBack || title) && (
+        <View style={styles.header}>
+          {showBack && (
+            <TouchableOpacity onPress={onBack} style={styles.backButton}>
+              <CustomImage
+                source={Images.arrowBack}
+                imgStyle={styles.backIcon}
+              />
+            </TouchableOpacity>
+          )}
+          {title && (
+            <Text style={[styles.title, showBack && styles.titleWithBack]}>
+              {title}
+            </Text>
+          )}
+          {icon && (
+             <TouchableOpacity activeOpacity={0.7} onPress={iconPress} style={styles.backButton}>
+               <CustomImage source={icon} imgStyle={styles.imgStyle} />
+             </TouchableOpacity>
+          )}
+        </View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: colors.background,
+    paddingHorizontal: SCALE(16),
+    // paddingBottom: VSCALE(8),
+  },
+  statusBar: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: VSCALE(12),
+  },
+  statusIcons: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: SCALE(8),
+  },
+  signalBars: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    gap: SCALE(2),
+  },
+  bar: {
+    width: SCALE(3),
+    backgroundColor: colors.onSurface,
+    borderRadius: SCALE(1),
+  },
+  battery: {
+    width: SCALE(24),
+    height: VSCALE(12),
+    borderWidth: SCALE(1),
+    borderColor: colors.onSurface,
+    borderRadius: SCALE(2),
+    padding: SCALE(1),
+  },
+  batteryLevel: {
+    flex: 0.8,
+    backgroundColor: colors.onSurface,
+    borderRadius: SCALE(1),
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  backButton: {
+    padding: SCALE(10),
+    minWidth: SCALE(44),
+    minHeight: VSCALE(44),
+    justifyContent: 'center' as const,
+  },
+  title: {
+    ...typography.h3,
+    color: colors.onSurface,
+    textAlign: 'center',
+    flex: 1,
+    fontFamily: FontFamily.LEXEND_REGULAR,
+    fontSize: MSCALE(16),
+  },
+  titleWithBack: {
+    marginRight: SCALE(32),
+  },
+  backIcon: {
+    height: VSCALE(18),
+    width: SCALE(20),
+    resizeMode: 'contain',
+  },
+  imgStyle: {
+    height: VSCALE(24),
+    width: SCALE(24),
+    resizeMode: 'contain',
+  },
+});
+
+export default MobileHeader;

package/src-app/components/NoDataFound/index.tsx

@@ -0,0 +1,18 @@
+import { View, Text } from 'react-native';
+import React from 'react';
+import styles from './styles';
+
+interface Props {
+  containerstyle?: object;
+}
+const NoDataFound: React.FC<Props> = ({ containerstyle }) => {
+  return (
+    <View style={[styles.container, containerstyle]}>
+      <View style={styles.content}>
+        <Text style={styles.text}>No Data Found</Text>
+      </View>
+    </View>
+  );
+};
+
+export default NoDataFound;

package/src-app/components/NoDataFound/styles.ts

@@ -0,0 +1,26 @@
+import { StyleSheet } from 'react-native';
+import FontFamily from '../../constants/Fonts';
+import { VSCALE } from '../../constants/Scaling';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingVertical: VSCALE(40),
+  },
+  content: {
+    padding: VSCALE(20),
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  text: {
+    fontSize: VSCALE(16),
+    color: '#1F2937',
+    fontWeight: '500',
+    fontFamily: FontFamily.LEXEND_MEDIUM,
+    textAlign: 'center',
+  },
+});
+
+export default styles;