@fadyshawky/react-native-magic 2.2.1 → 2.3.0

package/template/package.json

@@ -12,38 +12,59 @@
     "ios": "react-native run-ios",
     "lint": "eslint .",
     "start": "react-native start",
-    "test": "jest"
+    "test": "jest",
+    "typecheck": "tsc --noEmit",
+    "postinstall": "patch-package",
+    "prepare": "husky"
+  },
+  "lint-staged": {
+    "*.{ts,tsx,js,jsx}": [
+      "eslint --fix",
+      "prettier --write"
+    ],
+    "*.{json,md,yml,yaml}": [
+      "prettier --write"
+    ]
   },
   "dependencies": {
-    "@good-react-native/gradient-border": "1.0.2",
+    "@d11/react-native-fast-image": "8.13.0",
+    "@gorhom/bottom-sheet": "5.2.10",
     "@react-native-async-storage/async-storage": "2.2.0",
+    "@react-native-community/netinfo": "12.0.1",
+    "@react-native-firebase/analytics": "24.0.0",
+    "@react-native-firebase/app": "24.0.0",
+    "@react-native-firebase/messaging": "24.0.0",
     "@react-native-masked-view/masked-view": "0.3.2",
-    "@react-navigation/bottom-tabs": "7.15.5",
-    "@react-navigation/native": "7.1.33",
-    "@react-navigation/native-stack": "7.14.4",
+    "@react-navigation/bottom-tabs": "7.15.9",
+    "@react-navigation/native": "7.2.2",
+    "@react-navigation/native-stack": "7.14.11",
     "@reduxjs/toolkit": "2.11.2",
-    "@shopify/flash-list": "^2.0.2",
-    "axios": "1.13.6",
+    "@shopify/flash-list": "2.3.1",
+    "axios": "^1.18.1",
     "babel-plugin-transform-remove-console": "6.9.4",
-    "dayjs": "1.11.19",
+    "dayjs": "1.11.20",
     "intl": "1.2.5",
-    "lodash": "4.17.23",
+    "lodash": "^4.18.1",
     "react": "19.2.3",
     "react-dom": "19.2.3",
-    "react-native": "0.84.1",
+    "react-native": "0.85.2",
     "react-native-actions-sheet": "10.1.2",
     "react-native-config": "1.6.1",
     "react-native-device-info": "15.0.2",
-    "react-native-gesture-handler": "2.30.0",
+    "react-native-gesture-handler": "2.31.1",
+    "react-native-haptic-feedback": "2.3.3",
     "react-native-keyboard-aware-scroll-view": "0.9.5",
     "react-native-linear-gradient": "2.8.3",
     "react-native-localization": "2.3.2",
-    "react-native-reanimated": "4.2.2",
+    "react-native-permissions": "5.5.1",
+    "react-native-reanimated": "4.3.0",
     "react-native-restart": "0.0.27",
     "react-native-safe-area-context": "5.7.0",
     "react-native-screens": "4.24.0",
     "react-native-sfsymbols": "1.2.2",
+    "react-native-size-matters": "0.4.2",
     "react-native-snackbar": "3.0.1",
+    "react-native-svg": "15.15.4",
     "react-native-vector-icons": "10.3.0",
     "react-native-worklets": "0.7.4",
     "react-redux": "9.2.0",
@@ -52,26 +73,38 @@
     "redux-persist-transform-filter": "0.0.22"
   },
   "devDependencies": {
-    "@babel/core": "7.29.0",
-    "@babel/preset-env": "7.29.0",
+    "@babel/core": "^7.29.7",
+    "@babel/preset-env": "7.29.2",
     "@babel/runtime": "7.28.6",
     "@react-native-community/cli": "20.1.2",
     "@react-native-community/cli-platform-android": "20.1.2",
     "@react-native-community/cli-platform-ios": "20.1.2",
-    "@react-native/babel-preset": "0.84.1",
-    "@react-native/eslint-config": "0.84.1",
-    "@react-native/metro-config": "0.84.1",
-    "@react-native/typescript-config": "0.84.1",
+    "@react-native/babel-preset": "0.85.2",
+    "@react-native/eslint-config": "0.85.2",
+    "@react-native/jest-preset": "0.85.2",
+    "@react-native/metro-config": "0.85.2",
+    "@react-native/typescript-config": "0.85.2",
     "@types/jest": "30.0.0",
     "@types/react": "19.2.14",
     "@types/react-test-renderer": "19.1.0",
-    "eslint": "10.0.2",
-    "jest": "30.2.0",
+    "babel-plugin-module-resolver": "5.0.3",
+    "eslint": "^8.57.1",
+    "eslint-plugin-import": "^2.31.0",
+    "husky": "9.1.7",
+    "jest": "^30.4.2",
+    "lint-staged": "16.4.0",
+    "patch-package": "8.0.1",
     "prettier": "3.8.1",
     "react-test-renderer": "19.2.3",
     "typescript": "5.9.3"
   },
   "engines": {
     "node": ">=20"
+  },
+  "overrides": {
+    "jest-mock": "^30.0.0",
+    "jest-runtime": "^30.0.0",
+    "jest-snapshot": "^30.0.0",
+    "jest-environment-node": "^30.0.0"
   }
 }

package/template/react-native.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  assets: ['./resources/fonts'],
+};

package/template/scripts/ci-sync-env.cjs

@@ -0,0 +1,71 @@
+#!/usr/bin/env node
+
+/**
+ * CI helper: write/update KEY=VALUE pairs in an env file.
+ * Used in Codemagic / Bitrise / GitHub Actions to sync version codes,
+ * build numbers, or any other env var into .env.<environment> before build.
+ *
+ * Usage:
+ *   node scripts/ci-sync-env.cjs <envFile> KEY=value [KEY=value ...]
+ *
+ * Example (bump Android version code to next Play Store value):
+ *   node scripts/ci-sync-env.cjs .env.production ANDROID_VERSION_CODE=42 IOS_BUILD_NUMBER=42
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+function parseArgs(argv) {
+  const [, , envFile, ...pairs] = argv;
+  if (!envFile) {
+    console.error(
+      'Usage: node scripts/ci-sync-env.cjs <envFile> KEY=value [KEY=value ...]',
+    );
+    process.exit(1);
+  }
+  const updates = {};
+  for (const pair of pairs) {
+    const eq = pair.indexOf('=');
+    if (eq === -1) {
+      console.error(`Skipping invalid pair (no '='): ${pair}`);
+      continue;
+    }
+    const key = pair.slice(0, eq).trim();
+    const value = pair.slice(eq + 1);
+    updates[key] = value;
+  }
+  return { envFile: path.resolve(process.cwd(), envFile), updates };
+}
+
+function applyUpdates(envFile, updates) {
+  let content = '';
+  if (fs.existsSync(envFile)) {
+    content = fs.readFileSync(envFile, 'utf8');
+  }
+  const lines = content.split('\n');
+  const seen = new Set();
+  const output = lines.map((line) => {
+    const eq = line.indexOf('=');
+    if (eq === -1) return line;
+    const key = line.slice(0, eq).trim();
+    if (key in updates) {
+      seen.add(key);
+      return `${key}=${updates[key]}`;
+    }
+    return line;
+  });
+  for (const key of Object.keys(updates)) {
+    if (!seen.has(key)) {
+      if (output.length && output[output.length - 1] !== '') output.push('');
+      output.push(`${key}=${updates[key]}`);
+    }
+  }
+  fs.writeFileSync(envFile, output.join('\n'), 'utf8');
+}
+
+const { envFile, updates } = parseArgs(process.argv);
+applyUpdates(envFile, updates);
+console.log(`Updated ${envFile}:`);
+for (const [k, v] of Object.entries(updates)) {
+  console.log(`  ${k}=${v}`);
+}

package/template/src/assets/brand/logo-mark.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120" fill="none">
+  <g fill="#2F6BFF">
+    <rect x="25" y="24" width="13" height="72" rx="3"/>
+    <rect x="25" y="24" width="33" height="13" rx="3"/>
+    <rect x="25" y="52" width="26" height="12" rx="3"/>
+    <path d="M101 42 C101 32 91 28 83 28 C73 28 67 35 67 44 C67 52 75 56 84 59 C93 62 101 66 101 76 C101 86 91 91 83 91 C73 91 67 85 66 77" fill="none" stroke="#2F6BFF" stroke-width="13" stroke-linecap="round" stroke-linejoin="round"/>
+  </g>
+</svg>

package/template/src/assets/brand/logo-mono.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120" fill="none">
+  <rect width="120" height="120" rx="30" fill="#0D1124"/>
+  <g fill="#FFFFFF">
+    <rect x="25" y="24" width="13" height="72" rx="3"/>
+    <rect x="25" y="24" width="33" height="13" rx="3"/>
+    <rect x="25" y="52" width="26" height="12" rx="3"/>
+    <path d="M101 42 C101 32 91 28 83 28 C73 28 67 35 67 44 C67 52 75 56 84 59 C93 62 101 66 101 76 C101 86 91 91 83 91 C73 91 67 85 66 77" fill="none" stroke="#FFFFFF" stroke-width="13" stroke-linecap="round" stroke-linejoin="round"/>
+  </g>
+</svg>

package/template/src/assets/brand/logo-primary.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120" fill="none">
+  <defs>
+    <linearGradient id="chip" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#0A1230"/>
+      <stop offset="1" stop-color="#1B45B8"/>
+    </linearGradient>
+  </defs>
+  <rect width="120" height="120" rx="30" fill="url(#chip)"/>
+  <g fill="#6BA0FF">
+    <rect x="25" y="24" width="13" height="72" rx="3"/>
+    <rect x="25" y="24" width="33" height="13" rx="3"/>
+    <rect x="25" y="52" width="26" height="12" rx="3"/>
+    <path d="M101 42 C101 32 91 28 83 28 C73 28 67 35 67 44 C67 52 75 56 84 59 C93 62 101 66 101 76 C101 86 91 91 83 91 C73 91 67 85 66 77" fill="none" stroke="#6BA0FF" stroke-width="13" stroke-linecap="round" stroke-linejoin="round"/>
+  </g>
+</svg>

package/template/src/assets/brand/wordmark-dark.svg

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="460" height="140" viewBox="0 0 460 140" fill="none">
+  <defs>
+    <linearGradient id="chip" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#0A1230"/>
+      <stop offset="1" stop-color="#1B45B8"/>
+    </linearGradient>
+  </defs>
+  <rect width="460" height="140" rx="22" fill="#06080F"/>
+  <rect x="28" y="22" width="96" height="96" rx="24" fill="url(#chip)"/>
+  <g fill="#6BA0FF" transform="translate(28,22) scale(0.8)">
+    <rect x="25" y="24" width="13" height="72" rx="3"/>
+    <rect x="25" y="24" width="33" height="13" rx="3"/>
+    <rect x="25" y="52" width="26" height="12" rx="3"/>
+    <path d="M101 42 C101 32 91 28 83 28 C73 28 67 35 67 44 C67 52 75 56 84 59 C93 62 101 66 101 76 C101 86 91 91 83 91 C73 91 67 85 66 77" fill="none" stroke="#6BA0FF" stroke-width="13" stroke-linecap="round" stroke-linejoin="round"/>
+  </g>
+  <text x="150" y="68" font-family="Verdana,Arial,sans-serif" font-size="30" font-weight="700" fill="#EEF2FF" letter-spacing="4">FADY SHAWKY</text>
+  <text x="152" y="94" font-family="Verdana,Arial,sans-serif" font-size="13" fill="#5E6A98" letter-spacing="3">react native magic</text>
+</svg>

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

@@ -0,0 +1,87 @@
+import React from 'react';
+import {Modal, Pressable, StyleSheet, View, ViewStyle} from 'react-native';
+import {useTheme} from '../../core/theme/ThemeProvider';
+import {CommonSizes} from '../../core/theme/commonSizes';
+import {RTLAwareText} from './RTLAwareText';
+
+interface AppBottomSheetProps {
+  visible: boolean;
+  onClose: () => void;
+  title?: string;
+  children: React.ReactNode;
+}
+
+/**
+ * A bottom-anchored sheet built on react-native's Modal.
+ * Slides up from the bottom with a dimmed midnight backdrop; tapping the
+ * backdrop closes it while taps on the card are absorbed.
+ */
+export function AppBottomSheet({
+  visible,
+  onClose,
+  title,
+  children,
+}: AppBottomSheetProps): JSX.Element {
+  const {theme} = useTheme();
+
+  const cardStyle: ViewStyle = {
+    backgroundColor: theme.colors.grayScale_0,
+    borderTopLeftRadius: CommonSizes.borderRadius.xLarge,
+    borderTopRightRadius: CommonSizes.borderRadius.xLarge,
+    padding: CommonSizes.spacing.large,
+    paddingBottom: CommonSizes.spacing.xxxLarge,
+  };
+
+  const handleStyle: ViewStyle = {
+    width: 40,
+    height: 4,
+    borderRadius: CommonSizes.borderRadius.full,
+    backgroundColor: theme.colors.grayScale_50,
+  };
+
+  return (
+    <Modal
+      transparent
+      visible={visible}
+      animationType="slide"
+      onRequestClose={onClose}>
+      <View style={styles.container}>
+        <Pressable
+          style={styles.backdrop}
+          onPress={onClose}
+          accessibilityRole="button"
+          accessibilityLabel="Close"
+        />
+        <Pressable style={cardStyle} onPress={event => event.stopPropagation()}>
+          <View style={styles.handleWrapper}>
+            <View style={handleStyle} />
+          </View>
+          {title ? (
+            <RTLAwareText style={[theme.text.bodyXLargeBold, styles.title]}>
+              {title}
+            </RTLAwareText>
+          ) : null}
+          {children}
+        </Pressable>
+      </View>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'flex-end',
+  },
+  backdrop: {
+    ...StyleSheet.absoluteFill,
+    backgroundColor: 'rgba(6,8,15,0.6)',
+  },
+  handleWrapper: {
+    alignItems: 'center',
+    marginBottom: CommonSizes.spacing.large,
+  },
+  title: {
+    marginBottom: CommonSizes.spacing.medium,
+  },
+});

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

@@ -0,0 +1,75 @@
+import React, {useEffect, useRef} from 'react';
+import {Animated, Pressable, StyleSheet, ViewStyle} from 'react-native';
+import {useTheme} from '../../core/theme/ThemeProvider';
+import {CommonSizes} from '../../core/theme/commonSizes';
+
+interface AppSwitchProps {
+  value: boolean;
+  onValueChange: (v: boolean) => void;
+  disabled?: boolean;
+}
+
+const TRACK_WIDTH = 48;
+const TRACK_HEIGHT = 28;
+const THUMB_SIZE = 24;
+const PADDING = (TRACK_HEIGHT - THUMB_SIZE) / 2;
+const TRAVEL = TRACK_WIDTH - THUMB_SIZE - PADDING * 2;
+
+export function AppSwitch(props: AppSwitchProps): JSX.Element {
+  const {value, onValueChange, disabled} = props;
+  const {theme} = useTheme();
+  const anim = useRef(new Animated.Value(value ? 1 : 0)).current;
+
+  useEffect(() => {
+    Animated.timing(anim, {
+      toValue: value ? 1 : 0,
+      duration: 180,
+      useNativeDriver: true,
+    }).start();
+  }, [value, anim]);
+
+  const translateX = anim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, TRAVEL],
+  });
+
+  const trackStyle: ViewStyle = {
+    width: TRACK_WIDTH,
+    height: TRACK_HEIGHT,
+    borderRadius: CommonSizes.borderRadius.full,
+    padding: PADDING,
+    justifyContent: 'center',
+    backgroundColor: value
+      ? theme.colors.PlatinateBlue_400
+      : theme.colors.grayScale_50,
+    opacity: disabled ? 0.5 : 1,
+  };
+
+  return (
+    <Pressable
+      onPress={() => !disabled && onValueChange(!value)}
+      disabled={disabled}
+      hitSlop={8}
+      accessibilityRole="switch"
+      accessibilityState={{checked: value, disabled}}
+      style={trackStyle}>
+      <Animated.View
+        style={[styles.thumb, {transform: [{translateX}]}]}
+      />
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  thumb: {
+    width: THUMB_SIZE,
+    height: THUMB_SIZE,
+    borderRadius: THUMB_SIZE / 2,
+    backgroundColor: '#FFFFFF',
+    shadowColor: '#06080F',
+    shadowOpacity: 0.2,
+    shadowRadius: 3,
+    shadowOffset: {width: 0, height: 1},
+    elevation: 3,
+  },
+});

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

@@ -0,0 +1,161 @@
+import React, {useMemo, useState} from 'react';
+import {
+  KeyboardTypeOptions,
+  Pressable,
+  StyleSheet,
+  TextInput,
+  ViewStyle,
+} from 'react-native';
+import Svg, {Path} from 'react-native-svg';
+import {useTheme} from '../../core/theme/ThemeProvider';
+import {CommonSizes} from '../../core/theme/commonSizes';
+import {RTLAwareText} from './RTLAwareText';
+import {RTLAwareView} from './RTLAwareView';
+
+interface AppTextInputProps {
+  label?: string;
+  value: string;
+  onChangeText: (t: string) => void;
+  placeholder?: string;
+  error?: string | null;
+  secureTextEntry?: boolean;
+  multiline?: boolean;
+  keyboardType?: KeyboardTypeOptions;
+  editable?: boolean;
+}
+
+function EyeIcon({open, color}: {open: boolean; color: string}): JSX.Element {
+  return (
+    <Svg width={22} height={22} viewBox="0 0 24 24" fill="none">
+      <Path
+        d="M2 12C3.7 7.6 7.5 5 12 5C16.5 5 20.3 7.6 22 12C20.3 16.4 16.5 19 12 19C7.5 19 3.7 16.4 2 12Z"
+        stroke={color}
+        strokeWidth={1.8}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <Path
+        d="M12 15C13.66 15 15 13.66 15 12C15 10.34 13.66 9 12 9C10.34 9 9 10.34 9 12C9 13.66 10.34 15 12 15Z"
+        stroke={color}
+        strokeWidth={1.8}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      {!open ? (
+        <Path
+          d="M4 4L20 20"
+          stroke={color}
+          strokeWidth={1.8}
+          strokeLinecap="round"
+        />
+      ) : null}
+    </Svg>
+  );
+}
+
+export function AppTextInput(props: AppTextInputProps): JSX.Element {
+  const {
+    label,
+    value,
+    onChangeText,
+    placeholder,
+    error,
+    secureTextEntry,
+    multiline,
+    keyboardType,
+    editable = true,
+  } = props;
+  const {theme} = useTheme();
+  const [isFocused, setFocused] = useState(false);
+  const [hidden, setHidden] = useState(true);
+
+  const borderColor = useMemo(() => {
+    if (error) {
+      return theme.colors.error_400;
+    }
+    if (isFocused) {
+      return theme.colors.PlatinateBlue_400;
+    }
+    return theme.colors.grayScale_50;
+  }, [error, isFocused, theme.colors]);
+
+  const rowStyle: ViewStyle = {
+    flexDirection: 'row',
+    alignItems: multiline ? 'flex-start' : 'center',
+    backgroundColor: theme.colors.grayScale_0,
+    borderColor,
+    borderWidth: CommonSizes.borderWidth.medium,
+    borderRadius: CommonSizes.borderRadius.large,
+    paddingHorizontal: CommonSizes.spacing.xLarge,
+    paddingVertical: multiline
+      ? CommonSizes.spacing.large
+      : CommonSizes.spacing.medium,
+    minHeight: multiline ? 96 : undefined,
+    opacity: editable ? 1 : 0.6,
+  };
+
+  const inputDynamicStyle = {
+    color: theme.colors.grayScale_700,
+    textAlignVertical: multiline ? ('top' as const) : ('center' as const),
+    minHeight: multiline ? 72 : undefined,
+  };
+
+  return (
+    <RTLAwareView style={styles.container}>
+      {label ? (
+        <RTLAwareText
+          style={[theme.text.bodyMediumBold, {color: theme.colors.grayScale_700}]}>
+          {label}
+        </RTLAwareText>
+      ) : null}
+      <RTLAwareView style={rowStyle}>
+        <TextInput
+          style={[styles.input, theme.text.bodyLargeRegular, inputDynamicStyle]}
+          value={value}
+          onChangeText={onChangeText}
+          placeholder={placeholder}
+          placeholderTextColor={theme.colors.grayScale_200}
+          secureTextEntry={secureTextEntry ? hidden : false}
+          multiline={multiline}
+          keyboardType={keyboardType}
+          editable={editable}
+          onFocus={() => setFocused(true)}
+          onBlur={() => setFocused(false)}
+          selectionColor={theme.colors.PlatinateBlue_400}
+        />
+        {secureTextEntry ? (
+          <Pressable
+            onPress={() => setHidden(prev => !prev)}
+            hitSlop={8}
+            accessibilityRole="button"
+            accessibilityLabel={hidden ? 'Show password' : 'Hide password'}
+            style={styles.eyeButton}>
+            <EyeIcon open={!hidden} color={theme.colors.grayScale_200} />
+          </Pressable>
+        ) : null}
+      </RTLAwareView>
+      {error ? (
+        <RTLAwareText
+          style={[theme.text.bodySmallRegular, {color: theme.colors.error_400}]}>
+          {error}
+        </RTLAwareText>
+      ) : null}
+    </RTLAwareView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    flexDirection: 'column',
+    gap: CommonSizes.spacing.medium,
+  } as ViewStyle,
+  input: {
+    flex: 1,
+    padding: 0,
+  },
+  eyeButton: {
+    paddingStart: CommonSizes.spacing.medium,
+    alignSelf: 'center',
+  },
+});

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

@@ -0,0 +1,75 @@
+import React from 'react';
+import {Image, StyleSheet} from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import {BrandGradients, GradientDirection} from '../../core/theme/brand';
+import {RTLAwareText} from './RTLAwareText';
+
+interface AvatarProps {
+  name?: string;
+  uri?: string;
+  size?: number;
+}
+
+const DEFAULT_SIZE = 44;
+
+function getInitials(name?: string): string {
+  if (!name) {
+    return '?';
+  }
+  const parts = name.trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 0) {
+    return '?';
+  }
+  if (parts.length === 1) {
+    return parts[0].charAt(0).toUpperCase();
+  }
+  return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase();
+}
+
+/**
+ * A circular avatar. With `uri` it renders the image; otherwise it shows the
+ * name's initials (1–2 letters, '?' when absent) in white on a gradient circle.
+ * Initials scale with `size`.
+ */
+export function Avatar({name, uri, size = DEFAULT_SIZE}: AvatarProps): JSX.Element {
+  const circleStyle = {
+    width: size,
+    height: size,
+    borderRadius: size / 2,
+  };
+
+  if (uri) {
+    return <Image source={{uri}} style={[circleStyle, styles.image]} />;
+  }
+
+  return (
+    <LinearGradient
+      colors={BrandGradients.primary}
+      start={GradientDirection.start}
+      end={GradientDirection.end}
+      style={[circleStyle, styles.gradient]}>
+      <RTLAwareText
+        style={[
+          styles.initials,
+          {fontSize: size * 0.4, lineHeight: size * 0.5},
+        ]}>
+        {getInitials(name)}
+      </RTLAwareText>
+    </LinearGradient>
+  );
+}
+
+const styles = StyleSheet.create({
+  image: {
+    resizeMode: 'cover',
+  },
+  gradient: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  initials: {
+    color: '#FFFFFF',
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+});