@fadyshawky/react-native-magic 2.2.0 → 2.3.0

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

@@ -0,0 +1,47 @@
+import NetInfo, {NetInfoState} from '@react-native-community/netinfo';
+import React, {useEffect, useState} from 'react';
+import {StyleSheet, Text, View} from 'react-native';
+import {Fonts} from '../../core/theme/fonts';
+import {CommonSizes} from '../../core/theme/commonSizes';
+
+export const NetworkBanner = () => {
+  const [offline, setOffline] = useState(false);
+
+  useEffect(() => {
+    const unsubscribe = NetInfo.addEventListener((state: NetInfoState) => {
+      const connected = !!state.isConnected && state.isInternetReachable !== false;
+      setOffline(!connected);
+    });
+    NetInfo.fetch().then(state => {
+      const connected = !!state.isConnected && state.isInternetReachable !== false;
+      setOffline(!connected);
+    });
+    return unsubscribe;
+  }, []);
+
+  if (!offline) return null;
+
+  return (
+    <View style={styles.banner} pointerEvents="none">
+      <Text style={styles.text}>No internet connection</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  banner: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    backgroundColor: '#D32F2F',
+    paddingVertical: 8,
+    alignItems: 'center',
+    zIndex: 9999,
+  },
+  text: {
+    color: '#fff',
+    fontFamily: Fonts.bold,
+    fontSize: CommonSizes.font.bodySmall,
+  },
+});

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

@@ -1,7 +1,6 @@
 import React, {useRef, useState} from 'react';
 import {
   StyleSheet,
-  View,
   TextInput,
   NativeSyntheticEvent,
   TextInputKeyPressEventData,

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

@@ -4,7 +4,6 @@ import {
   Image,
   ImageStyle,
   ImageURISource,
-  Platform,
   StyleProp,
   StyleSheet,
   Text,
@@ -192,18 +191,6 @@ function createButtonStyles(theme: Theme) {
     width: '100%',
   };
 
-  const commonLabelStyle: TextStyle = {
-    ...createThemedStyles(theme).h4_bold,
-    color: theme.colors.white,
-    textAlign: 'center',
-    textAlignVertical: 'center',
-    ...Platform.select({
-      android: {
-        textTransform: 'uppercase',
-      } as TextStyle,
-    }),
-  };
-
   const commonIcon: ImageStyle = {
     width: 22,
     height: 22,
@@ -268,7 +255,6 @@ function createButtonStyles(theme: Theme) {
 }
 
 function createSmallSolidStyles(theme: Theme): IStyles {
-  const commonStyles = createThemedStyles(theme);
   return StyleSheet.create({
     button: {
       padding: CommonSizes.spacing.medium,

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

@@ -1,4 +1,3 @@
-import {GradientBorderView} from '@good-react-native/gradient-border';
 import React, {
   FC,
   memo,
@@ -9,25 +8,20 @@ import React, {
   useState,
 } from 'react';
 import {
-  NativeSyntheticEvent,
   Platform,
   StyleSheet,
   Text,
   TextInput,
-  TextInputFocusEventData,
   TextInputProps,
-  TextInputSubmitEditingEventData,
   TextStyle,
   View,
   ViewStyle,
 } from 'react-native';
 import {useTheme} from '../../core/theme/ThemeProvider';
-import {PrimaryColors, AlertColors, NaturalColors} from '../../core/theme/colors';
-import {isIos} from '../../core/theme/commonConsts';
+import {PrimaryColors, AlertColors} from '../../core/theme/colors';
 import {CommonSizes} from '../../core/theme/commonSizes';
 import {CommonStyles} from '../../core/theme/commonStyles';
 import {scaleHeight} from '../../core/theme/scaling';
-import {localization} from '../localization/localization';
 import {regexValidation} from '../validations/regexValidator';
 
 interface IProps extends TextInputProps {
@@ -63,26 +57,26 @@ interface IProps extends TextInputProps {
 export const PrimaryTextInput: FC<IProps> = memo(
   ({
     style,
-    blurOnSubmit = true,
-    disableFullscreenUI = true,
-    enablesReturnKeyAutomatically = true,
-    underlineColorAndroid,
-    placeholderTextColor,
+    blurOnSubmit: _blurOnSubmit = true,
+    disableFullscreenUI: _disableFullscreenUI = true,
+    enablesReturnKeyAutomatically: _enablesReturnKeyAutomatically = true,
+    underlineColorAndroid: _underlineColorAndroid,
+    placeholderTextColor: _placeholderTextColor,
     editable = true,
-    clearButtonMode = 'while-editing',
-    label,
+    clearButtonMode: _clearButtonMode = 'while-editing',
+    label: _label,
     keyboardType = 'numeric',
     error,
     hint,
-    containerStyle,
+    containerStyle: _containerStyle,
     inputRef,
-    nextInputFocusRef,
+    nextInputFocusRef: _nextInputFocusRef,
     onTouchStart,
     onFocus,
     onBlur,
-    onSubmitEditing,
-    required,
-    optional,
+    onSubmitEditing: _onSubmitEditing,
+    required: _required,
+    optional: _optional,
     width,
     height,
     regex,
@@ -93,17 +87,8 @@ export const PrimaryTextInput: FC<IProps> = memo(
     const {theme} = useTheme();
     const [regexError, setRegexError] = useState<string | null>(null);
 
-    // Ensure gradient colors are always a valid array (BVLinearGradient crashes on null/undefined)
-    const gradientColors = useMemo(
-      () => [
-        theme.colors.mutedLavender ?? NaturalColors.naturalColor_100,
-        theme.colors.indigoBlue ?? PrimaryColors.PlatinateBlue_400,
-      ],
-      [theme.colors.mutedLavender, theme.colors.indigoBlue],
-    );
-
     const onLocalFocus = useCallback(
-      (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+      (e: any) => {
         setFocused(true);
         onFocus && onFocus(e);
       },
@@ -111,31 +96,13 @@ export const PrimaryTextInput: FC<IProps> = memo(
     );
 
     const onLocalBlur = useCallback(
-      (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+      (e: any) => {
         setFocused(false);
         onBlur && onBlur(e);
       },
       [onBlur, setFocused],
     );
 
-    const inputContainerStyle = useMemo(() => {
-      return getInputContainerStyle(
-        isFocused,
-        error,
-        onTouchStart ? true : editable,
-      );
-    }, [isFocused, error, editable, onTouchStart]);
-
-    const onLocalSubmitEditing = useCallback(
-      (e: NativeSyntheticEvent<TextInputSubmitEditingEventData>) => {
-        onSubmitEditing && onSubmitEditing(e);
-        nextInputFocusRef &&
-          nextInputFocusRef.current &&
-          nextInputFocusRef.current.focus();
-      },
-      [nextInputFocusRef, onSubmitEditing],
-    );
-
     const pointerEvents = useMemo(() => {
       return onTouchStart ? 'none' : undefined;
     }, [onTouchStart]);
@@ -155,52 +122,50 @@ export const PrimaryTextInput: FC<IProps> = memo(
           props.onChangeText(text);
         }
       },
+      // props.onChangeText is referenced directly; keep deps stable to avoid
+      // re-creating the callback on every parent render.
+      // eslint-disable-next-line react-hooks/exhaustive-deps
       [regex, regexErrorMessage, props.onChangeText],
     );
 
+    const containerStyle: ViewStyle = {
+      ...styles.outerContainer,
+      width: width ?? '100%',
+    };
+
+    const inputWrapperStyle: ViewStyle = {
+      ...styles.inputWrapper,
+      borderColor: error
+        ? theme.colors.red
+        : isFocused
+        ? theme.colors.indigoBlue
+        : theme.colors.strokeDeactive,
+      height: height ?? scaleHeight(84),
+      backgroundColor: theme.colors.backgroundOpacity,
+    };
+
+    const textInputStyle: TextStyle = {
+      ...theme.text.body1,
+      paddingStart: CommonSizes.spacing.medium,
+      ...Platform.select({
+        android: {
+          paddingEnd: CommonSizes.spacing.medium,
+        },
+      }),
+    };
+
     return (
-      <View
-        style={{
-          justifyContent: 'space-between',
-          gap: CommonSizes.spacing.small,
-          width: width ?? '100%',
-        }}>
-        <GradientBorderView
-          gradientProps={{
-            colors: gradientColors,
-          }}
-          style={{
-            borderWidth: CommonSizes.borderWidth.small,
-            borderRadius: CommonSizes.borderRadius.medium,
-            height: height ?? scaleHeight(84),
-            width: '100%',
-            backgroundColor: theme.colors.backgroundOpacity,
-          }}>
+      <View style={containerStyle}>
+        <View style={inputWrapperStyle}>
           <TextInput
             disableFullscreenUI={true}
             selectionColor={selectionColor}
             {...props}
             pointerEvents={pointerEvents}
             ref={inputRef}
-            style={[
-              {
-                ...theme.text.body1,
-                width: '100%',
-                zIndex: 2,
-                alignSelf: 'flex-start',
-                alignItems: 'center',
-                justifyContent: 'center',
-                flex: 1,
-                textAlignVertical: 'center',
-                paddingStart: CommonSizes.spacing.medium,
-                ...Platform.select({
-                  android: {
-                    paddingEnd: CommonSizes.spacing.medium,
-                  },
-                }),
-              },
-              style,
-            ]}
+            onFocus={onLocalFocus}
+            onBlur={onLocalBlur}
+            style={[styles.textInput, textInputStyle, style]}
             onChangeText={handleChangeText}
             placeholderTextColor={theme.colors.tintColor}
             autoCapitalize="none"
@@ -208,38 +173,13 @@ export const PrimaryTextInput: FC<IProps> = memo(
             keyboardType={keyboardType}
             editable={editable}
           />
-        </GradientBorderView>
+        </View>
         <BottomText error={error || regexError} hint={hint} />
       </View>
     );
   },
 );
 
-const Label: FC<{text?: string; required?: boolean; optional?: boolean}> = memo(
-  ({text, required, optional}) => {
-    const {theme} = useTheme();
-    if (text != null) {
-      return (
-        <Text
-          style={{
-            ...theme.text.label,
-            color: theme.colors.indigoBlue,
-          }}
-          numberOfLines={1}>
-          {text +
-            (required
-              ? localization.common.required
-              : optional
-              ? localization.common.optional
-              : '')}
-        </Text>
-      );
-    } else {
-      return null;
-    }
-  },
-);
-
 const BottomText: FC<{error?: string | null; hint?: string}> = memo(
   ({error, hint}) => {
     const {theme} = useTheme();
@@ -257,26 +197,6 @@ const BottomText: FC<{error?: string | null; hint?: string}> = memo(
   },
 );
 
-function getInputContainerStyle(
-  isFocused: boolean,
-  error?: string | null,
-  isEditable?: boolean,
-): ViewStyle {
-  if (isIos) {
-    return !isEditable ? styles.disabledInputContainer : styles.inputContainer;
-  } else {
-    if (isFocused) {
-      return styles.focusedInputContainer;
-    } else if (!isEditable) {
-      return styles.disabledInputContainer;
-    } else if (error) {
-      return styles.errorInputContainer;
-    } else {
-      return styles.inputContainer;
-    }
-  }
-}
-
 const selectionColor = PrimaryColors.PlatinateBlue_400;
 
 const commonInputContainer: TextStyle = {
@@ -291,6 +211,22 @@ const commonInputContainer: TextStyle = {
 };
 
 const styles = StyleSheet.create({
+  outerContainer: {
+    justifyContent: 'space-between',
+    gap: CommonSizes.spacing.small,
+  } as ViewStyle,
+  inputWrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderWidth: CommonSizes.borderWidth.small,
+    borderRadius: CommonSizes.borderRadius.medium,
+    width: '100%',
+  } as ViewStyle,
+  textInput: {
+    width: '100%',
+    flex: 1,
+    textAlignVertical: 'center',
+  } as TextStyle,
   container: {
     flexDirection: 'column',
   } as ViewStyle,

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

@@ -0,0 +1,95 @@
+import React from 'react';
+import {Pressable, StyleSheet, View, ViewStyle} from 'react-native';
+import {useTheme} from '../../core/theme/ThemeProvider';
+import {CommonSizes} from '../../core/theme/commonSizes';
+import {RTLAwareText} from './RTLAwareText';
+import {RTLAwareView} from './RTLAwareView';
+
+interface RadioOption {
+  label: string;
+  value: string;
+}
+
+interface RadioGroupProps {
+  value?: string;
+  options: RadioOption[];
+  onChange: (value: string) => void;
+}
+
+export function RadioGroup(props: RadioGroupProps): JSX.Element {
+  const {value, options, onChange} = props;
+  const {theme} = useTheme();
+
+  return (
+    <RTLAwareView style={styles.container}>
+      {options.map(option => {
+        const isSelected = option.value === value;
+        const ringStyle: ViewStyle = {
+          width: 20,
+          height: 20,
+          borderRadius: CommonSizes.borderRadius.full,
+          borderWidth: CommonSizes.borderWidth.medium,
+          borderColor: isSelected
+            ? theme.colors.PlatinateBlue_400
+            : theme.colors.grayScale_50,
+          alignItems: 'center',
+          justifyContent: 'center',
+        };
+        return (
+          <Pressable
+            key={option.value}
+            onPress={() => onChange(option.value)}
+            hitSlop={6}
+            accessibilityRole="radio"
+            accessibilityState={{selected: isSelected}}
+            style={styles.rowPressable}>
+            <RTLAwareView style={styles.row}>
+              <View style={ringStyle}>
+                {isSelected ? (
+                  <View
+                    style={[
+                      styles.dot,
+                      {backgroundColor: theme.colors.PlatinateBlue_400},
+                    ]}
+                  />
+                ) : null}
+              </View>
+              <RTLAwareText
+                style={[
+                  theme.text.bodyLargeRegular,
+                  styles.label,
+                  {color: theme.colors.grayScale_700},
+                ]}>
+                {option.label}
+              </RTLAwareText>
+            </RTLAwareView>
+          </Pressable>
+        );
+      })}
+    </RTLAwareView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    flexDirection: 'column',
+    gap: CommonSizes.spacing.large,
+  } as ViewStyle,
+  rowPressable: {
+    paddingVertical: CommonSizes.spacing.small,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  } as ViewStyle,
+  dot: {
+    width: 10,
+    height: 10,
+    borderRadius: 5,
+  },
+  label: {
+    marginStart: CommonSizes.spacing.large,
+    flexShrink: 1,
+  },
+});

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

@@ -21,10 +21,11 @@ export const SafeText: React.FC<SafeTextProps> = ({children, ...props}) => {
 
     // If it's a React element, process its children
     if (React.isValidElement(node)) {
+      const element = node as React.ReactElement<{children?: React.ReactNode}>;
       return React.cloneElement(
-        node,
-        node.props,
-        React.Children.map(node.props.children, processChildren),
+        element,
+        element.props,
+        React.Children.map(element.props.children, processChildren),
       );
     }
 

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

@@ -2,7 +2,6 @@ import React from 'react';
 import {
   StyleSheet,
   TextInput,
-  View,
   ViewStyle,
   TextStyle,
   TouchableOpacity,
@@ -11,7 +10,6 @@ import {
   KeyboardTypeOptions,
   TextInputProps,
   I18nManager,
-  NativeModules,
 } from 'react-native';
 import {useTheme} from '../../core/theme/ThemeProvider';
 import {
@@ -65,6 +63,10 @@ export const SearchBar: React.FC<SearchBarProps> = ({
     borderColor: theme.colors.mutedLavender30,
   };
 
+  const textAlignStyle: TextStyle = {
+    textAlign: isRTL ? 'right' : 'left',
+  };
+
   // Set keyboard language specific properties
   const getKeyboardProps = (): Partial<TextInputProps> => {
     if (Platform.OS === 'ios') {
@@ -104,6 +106,8 @@ export const SearchBar: React.FC<SearchBarProps> = ({
         }
       }, 100);
     }
+    // Only re-run when language or value changes; inputRef is a stable ref.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentLanguage, value]);
 
   return (
@@ -129,9 +133,7 @@ export const SearchBar: React.FC<SearchBarProps> = ({
         style={[
           styles.input,
           theme.text.SearchBar,
-          {
-            textAlign: isRTL ? 'right' : 'left',
-          },
+          textAlignStyle,
           inputStyle as TextStyle,
         ]}
         placeholder={placeholder || t('search', 'common')}

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

@@ -0,0 +1,77 @@
+import React from 'react';
+import {Pressable, StyleSheet, View} from 'react-native';
+import {CommonSizes} from '../../core/theme/commonSizes';
+import {useTheme} from '../../core/theme/ThemeProvider';
+import {RTLAwareText} from './RTLAwareText';
+
+interface SegmentedControlProps {
+  segments: string[];
+  index: number;
+  onChange: (index: number) => void;
+}
+
+/**
+ * A rounded, pill-shaped segmented control. The active segment fills with
+ * primary blue + white label; inactive labels are muted. Segments share equal
+ * width via flex.
+ */
+export function SegmentedControl({
+  segments,
+  index,
+  onChange,
+}: SegmentedControlProps): JSX.Element {
+  const {theme} = useTheme();
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          backgroundColor: theme.colors.grayScale_0,
+          borderColor: theme.colors.grayScale_50,
+          borderWidth: CommonSizes.borderWidth.small,
+        },
+      ]}>
+      {segments.map((segment, segmentIndex) => {
+        const isActive = segmentIndex === index;
+        const segLabel = {
+          textAlign: 'center' as const,
+          color: isActive ? '#FFFFFF' : theme.colors.grayScale_200,
+        };
+        return (
+          <Pressable
+            key={`segment-${segmentIndex}`}
+            onPress={() => onChange(segmentIndex)}
+            style={[
+              styles.segment,
+              isActive
+                ? {backgroundColor: theme.colors.PlatinateBlue_400}
+                : null,
+            ]}>
+            <RTLAwareText
+              numberOfLines={1}
+              style={[theme.text.bodyMediumBold, segLabel]}>
+              {segment}
+            </RTLAwareText>
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderRadius: CommonSizes.borderRadius.full,
+    padding: 4,
+  },
+  segment: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: CommonSizes.spacing.medium,
+    borderRadius: CommonSizes.borderRadius.full,
+  },
+});

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

@@ -0,0 +1,47 @@
+import React, {useEffect, useRef} from 'react';
+import {Animated, DimensionValue, ViewStyle} from 'react-native';
+import {useTheme} from '../../core/theme/ThemeProvider';
+import {CommonSizes} from '../../core/theme/commonSizes';
+
+interface SkeletonProps {
+  width?: number | string;
+  height?: number;
+  radius?: number;
+}
+
+/**
+ * A lightweight shimmer placeholder. Loops its opacity between 0.4 and 1 to
+ * signal loading content. Built on Animated only — no extra dependencies.
+ */
+export function Skeleton({width, height, radius}: SkeletonProps): JSX.Element {
+  const {theme} = useTheme();
+  const opacity = useRef(new Animated.Value(0.4)).current;
+
+  useEffect(() => {
+    const animation = Animated.loop(
+      Animated.sequence([
+        Animated.timing(opacity, {
+          toValue: 1,
+          duration: 700,
+          useNativeDriver: true,
+        }),
+        Animated.timing(opacity, {
+          toValue: 0.4,
+          duration: 700,
+          useNativeDriver: true,
+        }),
+      ]),
+    );
+    animation.start();
+    return () => animation.stop();
+  }, [opacity]);
+
+  const blockStyle: ViewStyle = {
+    width: (width ?? '100%') as DimensionValue,
+    height: height ?? 16,
+    borderRadius: radius ?? CommonSizes.borderRadius.medium,
+    backgroundColor: theme.colors.grayScale_50,
+  };
+
+  return <Animated.View style={[blockStyle, {opacity}]} />;
+}

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

@@ -19,8 +19,7 @@ interface IProps {
 export const TryAgain: FC<IProps> = memo(
   ({onPress, errorText = localization.errors.unknownErrorHasOccurred}) => {
     return (
-      <View
-        style={{...CommonStyles.flexCenter, backgroundColor: 'transparent'}}>
+      <View style={[CommonStyles.flexCenter, styles.container]}>
         <Text style={styles.title}>{errorText}</Text>
         {onPress != null && (
           <TouchableOpacity onPressIn={onPress}>
@@ -35,6 +34,9 @@ export const TryAgain: FC<IProps> = memo(
 );
 
 const styles = StyleSheet.create({
+  container: {
+    backgroundColor: 'transparent',
+  },
   title: {
     ...CommonStyles.normalText,
     textAlign: 'center',