@fadyshawky/react-native-magic 1.0.7 → 1.0.9

package/template/package.json

@@ -19,6 +19,7 @@
     "test": "jest"
   },
   "dependencies": {
+    "@d11/react-native-fast-image": "^8.9.2",
     "@react-native-async-storage/async-storage": "^2.1.0",
     "@react-native-camera-roll/camera-roll": "^7.9.0",
     "@react-native-community/datetimepicker": "^8.2.0",

package/template/src/common/ImageResources.g.ts

@@ -1,14 +1,12 @@
 /* eslint-disable */
 /* tslint:disable */
-import {ImageURISource} from "react-native";
+import {ImageURISource} from 'react-native';
 
 /**
  * This file is auto-generated by react-native-image-resource-generator
  * !!! DO NOT EDIT !!!
  * For more information check the documentation:
  * https://github.com/svbutko/react-native-image-resource-generator
-*/
+ */
 
-export class ImageResources {
-
-}
+export class ImageResources {}

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

@@ -1,33 +1,71 @@
-import React from 'react';
-import {ImageBackground, StyleSheet, ViewStyle} from 'react-native';
-import {CommonStyles} from '../../core/theme/commonStyles';
+import React, {FC, memo} from 'react';
+import {ImageBackground, StyleSheet, View, ViewStyle} from 'react-native';
+import {useTheme} from '../../core/theme/ThemeProvider';
+import {ImageResources} from '../ImageResources.g';
+import {Container} from './Container';
+import {KeyboardAwareScrollViewProps} from 'react-native-keyboard-aware-scroll-view';
 
-interface BackgroundType {
+interface BackgroundProps
+  extends Omit<KeyboardAwareScrollViewProps, 'contentContainerStyle'> {
   children: React.ReactNode;
-  inverted?: boolean;
-  extraStyle?: ViewStyle;
+  useSafeArea?: boolean;
+  style?: ViewStyle;
+  contentContainerStyle?: ViewStyle;
+  withoutPadding?: boolean;
+  withoutScroll?: boolean;
+  withoutBackgroundImage?: boolean;
 }
 
-export const Background = ({
-  children,
-  inverted,
-  extraStyle,
-}: BackgroundType) => {
-  const styles = StyleSheet.create({
-    imageContainer: {
-      ...CommonStyles.flex1,
-      flexGrow: 1,
-      // justifyContent: 'flex-end',
-    },
-  });
+export const Background: FC<BackgroundProps> = memo(
+  ({
+    children,
+    useSafeArea = true,
+    style,
+    contentContainerStyle,
+    withoutPadding = false,
+    withoutScroll = false,
+    withoutBackgroundImage = false,
+    ...scrollViewProps
+  }) => {
+    const {theme} = useTheme();
 
-  return (
-    <ImageBackground
-      resizeMode="cover"
-      style={{...styles.imageContainer, ...extraStyle}}
-      imageStyle={inverted ? {transform: [{rotateY: '180deg'}]} : undefined}
-      source={0}>
-      {children}
-    </ImageBackground>
-  );
-};
+    const content = (
+      <Container
+        useSafeArea={useSafeArea}
+        style={style}
+        contentContainerStyle={contentContainerStyle}
+        withoutPadding={withoutPadding}
+        withoutScroll={withoutScroll}
+        {...scrollViewProps}>
+        {children}
+      </Container>
+    );
+
+    if (withoutBackgroundImage) {
+      return (
+        <View
+          style={[
+            styles.container,
+            {backgroundColor: theme.colors.background},
+          ]}>
+          {content}
+        </View>
+      );
+    }
+
+    return (
+      <View
+        style={[styles.container, {backgroundColor: theme.colors.background}]}>
+        <ImageBackground source={0} style={styles.container}>
+          {content}
+        </ImageBackground>
+      </View>
+    );
+  },
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});

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

@@ -0,0 +1,116 @@
+import React from 'react';
+import {
+  Image,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+  ViewStyle,
+} from 'react-native';
+import {CommonSizes} from '../../core/theme/commonSizes';
+import {createThemedStyles} from '../../core/theme/commonStyles';
+import {scaleHeight, scaleWidth} from '../../core/theme/scaling';
+import {useTheme} from '../../core/theme/ThemeProvider';
+import FastImage from '@d11/react-native-fast-image';
+
+interface CardProps {
+  icon: {uri: string};
+  title: string;
+  onPress?: () => void;
+  marginRight?: number;
+  cardStyle?: ViewStyle;
+}
+
+export const Card = ({
+  icon,
+  title,
+  onPress,
+  marginRight,
+  cardStyle,
+}: CardProps): JSX.Element => {
+  const {theme} = useTheme();
+  return (
+    <TouchableOpacity
+      style={[
+        styles.card,
+        {backgroundColor: theme.colors.surface},
+        createThemedStyles(theme).dropShadow,
+        {marginRight: marginRight},
+        {overflow: 'hidden'},
+        cardStyle,
+      ]}
+      onPress={() => {
+        onPress?.();
+      }}>
+      <View style={styles.iconContainer}>
+        {icon && icon.uri && (
+          <FastImage
+            source={{uri: icon.uri, cache: FastImage.cacheControl.immutable}}
+            style={{
+              width: '100%',
+              height: '100%',
+            }}
+            resizeMode={FastImage.resizeMode.contain}
+          />
+        )}
+      </View>
+      <Text style={[theme.text.cards, {textAlign: 'center'}]}>{title}</Text>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  card: {
+    padding: CommonSizes.spacing.medium,
+    borderRadius: CommonSizes.borderRadius.large,
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    gap: scaleHeight(10),
+    width: scaleWidth(187),
+    height: scaleHeight(280),
+  },
+  blurContainer: {
+    flex: 1,
+    padding: CommonSizes.spacing.medium,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  iconContainer: {
+    width: '100%',
+    height: scaleHeight(100),
+  },
+  title: {
+    fontSize: CommonSizes.fontSize.body2,
+    textAlign: 'center',
+    marginBottom: CommonSizes.spacing.small,
+  },
+  dotsContainer: {
+    flexDirection: 'row',
+    gap: 4,
+  },
+  dot: {
+    width: 4,
+    height: 4,
+    borderRadius: 2,
+  },
+  whiteDropShadow: {
+    // iOS shadow
+    shadowColor: '#FFF',
+    shadowOffset: {
+      width: 0,
+      height: 4,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 8,
+    // Android shadow
+    elevation: 5,
+    // Add a very subtle border to enhance the white shadow effect
+    borderWidth: 0.5,
+    borderColor: 'rgba(255, 255, 255, 0.1)',
+  },
+  favoriteContainer: {
+    position: 'absolute',
+    top: scaleHeight(17),
+    left: scaleWidth(12),
+  },
+});

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

@@ -0,0 +1,145 @@
+import React, {forwardRef} from 'react';
+import {
+  StyleSheet,
+  ViewStyle,
+  Platform,
+  KeyboardAvoidingView,
+  ScrollView,
+  View,
+  ImageBackground,
+  ImageSourcePropType,
+} from 'react-native';
+import {
+  KeyboardAwareScrollView,
+  KeyboardAwareScrollViewProps,
+} from 'react-native-keyboard-aware-scroll-view';
+import {useTheme} from '../../core/theme/ThemeProvider';
+import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context';
+import {ImageResources} from '../ImageResources.g';
+
+interface ContainerProps extends Partial<KeyboardAwareScrollViewProps> {
+  children: React.ReactNode;
+  useSafeArea?: boolean;
+  style?: ViewStyle;
+  contentContainerStyle?: ViewStyle;
+  withoutPadding?: boolean;
+  withoutScroll?: boolean;
+  backgroundColor?: string;
+  withoutBackgroundImage?: boolean;
+  backgroundImage?: ImageSourcePropType;
+  extendedBackground?: boolean;
+}
+
+export const Container = forwardRef<KeyboardAwareScrollView, ContainerProps>(
+  (
+    {
+      children,
+      useSafeArea = true,
+      style,
+      contentContainerStyle,
+      withoutPadding = false,
+      withoutScroll = false,
+      backgroundColor,
+      withoutBackgroundImage = false,
+      backgroundImage = 0,
+      extendedBackground = false,
+      ...scrollViewProps
+    },
+    ref,
+  ) => {
+    const {theme} = useTheme();
+    const insets = useSafeAreaInsets();
+    const Wrapper = useSafeArea ? SafeAreaView : View;
+    const bgColor = backgroundColor || theme.colors.background;
+
+    const content = (
+      <Wrapper
+        style={[
+          styles.container,
+          !withoutPadding && styles.padding,
+          style,
+          extendedBackground && {
+            marginTop: -insets.top,
+            paddingTop: insets.top,
+          },
+        ]}>
+        {children}
+      </Wrapper>
+    );
+
+    const wrappedContent = withoutBackgroundImage ? (
+      <View style={[styles.container, {backgroundColor: bgColor}]}>
+        {content}
+      </View>
+    ) : (
+      <ImageBackground
+        source={backgroundImage}
+        style={[
+          styles.container,
+          extendedBackground && {
+            marginTop: -insets.top,
+          },
+        ]}
+        resizeMode="cover">
+        {content}
+      </ImageBackground>
+    );
+
+    if (withoutScroll) {
+      return (
+        <KeyboardAvoidingView
+          style={[
+            styles.container,
+            {backgroundColor: bgColor},
+            extendedBackground && {
+              marginTop: -insets.top,
+            },
+          ]}
+          behavior={undefined}
+          enabled>
+          {wrappedContent}
+        </KeyboardAvoidingView>
+      );
+    }
+
+    return (
+      <KeyboardAwareScrollView
+        ref={ref}
+        style={[
+          styles.container,
+          {backgroundColor: bgColor},
+          extendedBackground && {
+            marginTop: -insets.top,
+          },
+        ]}
+        contentContainerStyle={[
+          styles.contentContainer,
+          !withoutPadding && styles.padding,
+          contentContainerStyle,
+        ]}
+        keyboardShouldPersistTaps="handled"
+        showsVerticalScrollIndicator={false}
+        enableOnAndroid
+        enableResetScrollToCoords={false}
+        extraScrollHeight={20}
+        keyboardOpeningTime={0}
+        keyboardDismissMode="on-drag"
+        enableAutomaticScroll={true}
+        {...scrollViewProps}>
+        {wrappedContent}
+      </KeyboardAwareScrollView>
+    );
+  },
+);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  contentContainer: {
+    flexGrow: 1,
+  },
+  padding: {
+    padding: 16, // Using a fixed value here as theme isn't available in StyleSheet
+  },
+});

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

@@ -60,6 +60,7 @@ export function FlatListWrapper({
         {...props}
         refreshing={refreshing}
         ListEmptyComponent={ListEmptyComponent}
+        removeClippedSubviews={true}
       />
     );
   }

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

@@ -87,7 +87,7 @@ export const ImageCropPickerButton: FC<IProps> = memo(
         style={style}
         iconStyle={iconStyle}
         imageStyle={imageStyle}
-        onPress={onPress}
+        onPressIn={onPress}
         backgroundImage={image}
         icon={icon}
         disabled={disabled}

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

@@ -0,0 +1,107 @@
+import React, {useRef, useState} from 'react';
+import {
+  NativeSyntheticEvent,
+  StyleSheet,
+  TextInput,
+  TextInputKeyPressEventData,
+  ViewStyle,
+} from 'react-native';
+import {useTheme} from '../../core/theme/ThemeProvider';
+import {CommonSizes} from '../../core/theme/commonSizes';
+import {scaleWidth} from '../../core/theme/scaling';
+import {PrimaryTextInput} from './PrimaryTextInput';
+import {RTLAwareView} from './RTLAwareView';
+
+interface OTPInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  error?: string | null;
+  style?: ViewStyle;
+}
+
+export const OTPInput: React.FC<OTPInputProps> = ({
+  value,
+  onChange,
+  error,
+  style,
+}) => {
+  const {theme} = useTheme();
+  const inputRefs = useRef<Array<TextInput | null>>([]);
+  const [focused, setFocused] = useState<number>(-1);
+
+  const handleChange = (text: string, index: number) => {
+    const newValue = value.split('');
+    newValue[index] = text;
+    const finalValue = newValue.join('');
+    onChange(finalValue);
+
+    if (text.length > 0 && index < 5) {
+      inputRefs.current[index + 1]?.focus();
+    }
+  };
+
+  const handleKeyPress = (
+    e: NativeSyntheticEvent<TextInputKeyPressEventData>,
+    index: number,
+  ) => {
+    if (e.nativeEvent.key === 'Backspace' && index > 0 && !value[index]) {
+      inputRefs.current[index - 1]?.focus();
+    }
+  };
+
+  const handleFocus = (index: number) => {
+    setFocused(index);
+  };
+
+  const handleBlur = () => {
+    setFocused(-1);
+  };
+
+  return (
+    <RTLAwareView style={{...styles.container, ...style}}>
+      {[0, 1, 2, 3, 4, 5].map(index => (
+        <PrimaryTextInput
+          width={scaleWidth(78)}
+          key={index}
+          inputRef={ref => (inputRefs.current[index] = ref)}
+          style={[
+            styles.input,
+            {
+              borderColor: error
+                ? theme.colors.mutedLavender
+                : focused === index
+                ? theme.colors.indigoBlue
+                : theme.colors.mutedLavender30,
+              backgroundColor: theme.colors.backgroundOpacity,
+            },
+          ]}
+          maxLength={1}
+          keyboardType="number-pad"
+          value={value[index] || ''}
+          onChangeText={text => handleChange(text, index)}
+          onKeyPress={e => handleKeyPress(e, index)}
+          onFocus={() => handleFocus(index)}
+          onBlur={handleBlur}
+          selectTextOnFocus
+        />
+      ))}
+    </RTLAwareView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    width: '100%',
+    gap: CommonSizes.spacing.small,
+    paddingHorizontal: CommonSizes.spacing.large,
+  },
+  input: {
+    flex: 1,
+    height: CommonSizes.spacing.xxl,
+    borderWidth: 1,
+    borderRadius: CommonSizes.borderRadius.medium,
+    textAlign: 'center',
+  },
+});

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

@@ -9,7 +9,6 @@ import {
   ViewStyle,
 } from 'react-native';
 import {Image as CropperImage} from 'react-native-image-crop-picker';
-import {Colors} from '../../core/theme/colors';
 import {CommonSizes} from '../../core/theme/commonSizes';
 
 interface IProps {
@@ -35,7 +34,7 @@ export const PhotoTakingButton: FC<IProps> = memo(
     return (
       <TouchableOpacity
         style={[styles.button, style]}
-        onPress={onPress}
+        onPressIn={onPress}
         disabled={disabled}>
         <BackgroundComponent image={backgroundImage} style={imageStyle}>
           <Image style={[styles.icon, iconStyle]} source={icon!} />
@@ -76,7 +75,6 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     borderRadius: CommonSizes.borderRadius.small,
     borderWidth: 1,
-    borderColor: Colors.gray,
   } as ViewStyle,
   image: {
     height: 120,
@@ -91,7 +89,6 @@ const styles = StyleSheet.create({
     width: 32,
     height: 32,
     resizeMode: 'contain',
-    tintColor: Colors.black,
     opacity: 0.8,
   } as ImageStyle,
 });