codingpixel-expo-app 0.1.0

package/templates/base/src/ui/appComponents/appText/index.tsx

@@ -0,0 +1,258 @@
+import { Colors } from '@theme/colors';
+import { Fonts } from '@theme/fonts';
+import { RF, RFT } from '@theme/responsive';
+import React from 'react';
+import { DimensionValue, Text, TextProps, TextStyle } from 'react-native';
+
+interface AppTextProps extends TextProps {
+  size?: number;
+  color?: string;
+  fontFamily?: string;
+  capital?: boolean;
+  center?: boolean;
+  italic?: boolean;
+
+  flex?: number;
+  flexGrow?: number;
+  flexShrink?: number;
+  flexBasis?: number | DimensionValue;
+  alignSelf?: TextStyle['alignSelf'];
+  textAlign?: TextStyle['textAlign'];
+  width?: number | DimensionValue;
+  height?: number | DimensionValue;
+  minWidth?: number | DimensionValue;
+  maxWidth?: number | DimensionValue;
+  minHeight?: number | DimensionValue;
+  maxHeight?: number | DimensionValue;
+
+  position?: TextStyle['position'];
+  top?: number | DimensionValue;
+  bottom?: number | DimensionValue;
+  left?: number | DimensionValue;
+  right?: number | DimensionValue;
+  zIndex?: number;
+
+  margin?: number;
+  marginTop?: number;
+  marginBottom?: number;
+  marginLeft?: number;
+  marginRight?: number;
+  marginHorizontal?: number;
+  marginVertical?: number;
+
+  padding?: number;
+  paddingTop?: number;
+  paddingBottom?: number;
+  paddingLeft?: number;
+  paddingRight?: number;
+  paddingStart?: number;
+  paddingEnd?: number;
+  paddingHorizontal?: number;
+  paddingVertical?: number;
+
+  backgroundColor?: string;
+  borderRadius?: number;
+  borderTopLeftRadius?: number;
+  borderTopRightRadius?: number;
+  borderBottomLeftRadius?: number;
+  borderBottomRightRadius?: number;
+
+  borderWidth?: number;
+  borderTopWidth?: number;
+  borderBottomWidth?: number;
+  borderLeftWidth?: number;
+  borderRightWidth?: number;
+  borderColor?: string;
+  borderTopColor?: string;
+  borderBottomColor?: string;
+  borderLeftColor?: string;
+  borderRightColor?: string;
+  borderStyle?: TextStyle['borderStyle'];
+
+  textShadowColor?: string;
+  textShadowOffset?: { width: number; height: number };
+  textShadowRadius?: number;
+
+  lineHeight?: number;
+  letterSpacing?: number;
+  opacity?: number;
+  textDecorationLine?: TextStyle['textDecorationLine'];
+  textTransform?: TextStyle['textTransform'];
+  includeFontPadding?: boolean;
+}
+
+const AppText: React.FC<AppTextProps> = props => {
+  const {
+    children,
+    size = 12,
+    color = Colors.PRIMARY,
+    fontFamily = Fonts.REGULAR,
+    capital = false,
+    center = false,
+    italic,
+    style,
+    flex,
+    flexGrow,
+    flexShrink,
+    flexBasis,
+    alignSelf,
+    width,
+    height,
+    minWidth,
+    maxWidth,
+    minHeight,
+    maxHeight,
+    textAlign,
+    position,
+    top,
+    bottom,
+    left,
+    right,
+    zIndex,
+    margin,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight,
+    marginHorizontal,
+    marginVertical,
+    padding,
+    paddingTop,
+    paddingBottom,
+    paddingStart,
+    paddingEnd,
+    paddingLeft,
+    paddingRight,
+    paddingHorizontal,
+    paddingVertical,
+    backgroundColor,
+    borderRadius,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    borderWidth,
+    borderTopWidth,
+    borderBottomWidth,
+    borderLeftWidth,
+    borderRightWidth,
+    borderColor,
+    borderTopColor,
+    borderBottomColor,
+    borderLeftColor,
+    borderRightColor,
+    borderStyle,
+    textShadowColor,
+    textShadowOffset,
+    textShadowRadius,
+    lineHeight,
+    letterSpacing,
+    opacity,
+    textDecorationLine,
+    textTransform,
+    includeFontPadding,
+    lineBreakMode,
+    ...rest
+  } = props;
+
+  const toDim = (v?: number | DimensionValue) =>
+    v === undefined ? undefined : typeof v === 'number' ? RF(v) : v;
+
+  const textStyle: TextStyle = {
+    fontSize: RFT(size),
+    fontFamily,
+    color,
+    fontStyle: italic ? 'italic' : 'normal',
+    textTransform: capital ? 'uppercase' : textTransform || 'none',
+    textAlign: center ? 'center' : textAlign,
+    lineHeight: lineHeight ? RFT(lineHeight) : undefined,
+    letterSpacing: letterSpacing ? RFT(letterSpacing) : undefined,
+    opacity,
+
+    flex,
+    flexGrow,
+    flexShrink,
+    flexBasis: flexBasis as any,
+    alignSelf,
+    width: toDim(width),
+    height: toDim(height),
+    minWidth: toDim(minWidth),
+    maxWidth: toDim(maxWidth),
+    minHeight: toDim(minHeight),
+    maxHeight: toDim(maxHeight),
+
+    position,
+    top: toDim(top),
+    bottom: toDim(bottom),
+    left: toDim(left),
+    right: toDim(right),
+    zIndex,
+
+    margin: margin !== undefined ? RF(margin) : undefined,
+    marginTop: marginTop !== undefined ? RF(marginTop) : undefined,
+    marginBottom: marginBottom !== undefined ? RF(marginBottom) : undefined,
+    marginLeft: marginLeft !== undefined ? RF(marginLeft) : undefined,
+    marginRight: marginRight !== undefined ? RF(marginRight) : undefined,
+    marginHorizontal:
+      marginHorizontal !== undefined ? RF(marginHorizontal) : undefined,
+    marginVertical:
+      marginVertical !== undefined ? RF(marginVertical) : undefined,
+
+    padding: padding !== undefined ? RF(padding) : undefined,
+    paddingTop: paddingTop !== undefined ? RF(paddingTop) : undefined,
+    paddingBottom: paddingBottom !== undefined ? RF(paddingBottom) : undefined,
+    paddingLeft: paddingStart !== undefined ? RF(paddingStart) : undefined,
+    paddingStart: paddingLeft !== undefined ? RF(paddingLeft) : undefined,
+    paddingEnd: paddingEnd !== undefined ? RF(paddingEnd) : undefined,
+    paddingRight: paddingRight !== undefined ? RF(paddingRight) : undefined,
+    paddingHorizontal:
+      paddingHorizontal !== undefined ? RF(paddingHorizontal) : undefined,
+    paddingVertical:
+      paddingVertical !== undefined ? RF(paddingVertical) : undefined,
+
+    backgroundColor,
+    borderRadius: borderRadius !== undefined ? RF(borderRadius) : undefined,
+    borderTopLeftRadius:
+      borderTopLeftRadius !== undefined ? RF(borderTopLeftRadius) : undefined,
+    borderTopRightRadius:
+      borderTopRightRadius !== undefined ? RF(borderTopRightRadius) : undefined,
+    borderBottomLeftRadius:
+      borderBottomLeftRadius !== undefined
+        ? RF(borderBottomLeftRadius)
+        : undefined,
+    borderBottomRightRadius:
+      borderBottomRightRadius !== undefined
+        ? RF(borderBottomRightRadius)
+        : undefined,
+
+    borderWidth: borderWidth !== undefined ? RF(borderWidth) : undefined,
+    borderTopWidth:
+      borderTopWidth !== undefined ? RF(borderTopWidth) : undefined,
+    borderBottomWidth:
+      borderBottomWidth !== undefined ? RF(borderBottomWidth) : undefined,
+    borderLeftWidth:
+      borderLeftWidth !== undefined ? RF(borderLeftWidth) : undefined,
+    borderRightWidth:
+      borderRightWidth !== undefined ? RF(borderRightWidth) : undefined,
+    borderColor,
+    borderTopColor,
+    borderBottomColor,
+    borderLeftColor,
+    borderRightColor,
+    borderStyle,
+
+    textShadowColor,
+    textShadowOffset,
+    textShadowRadius,
+
+    includeFontPadding,
+  };
+
+  return (
+    <Text allowFontScaling={false} style={[textStyle, style]} {...rest}>
+      {children}
+    </Text>
+  );
+};
+
+export default AppText;

package/templates/base/src/ui/appComponents/appTextWrapper/index.tsx

@@ -0,0 +1,84 @@
+import AppText from '@appComponents/appText';
+import { Colors } from '@theme/colors';
+import { Fonts } from '@theme/fonts';
+import React from 'react';
+import { TextProps, TextStyle } from 'react-native';
+import AppPressable from '../appPressable';
+
+interface Props extends TextProps {
+  style: any;
+  size: number;
+  color?: string;
+  capital: boolean;
+  children: any;
+  fontFamily: string;
+  numberOfLines: number;
+  linHeight: number;
+  italic: boolean;
+  onPress?: () => void;
+  center: boolean;
+  containerStyle?: any;
+  disabled?: boolean;
+  textAlign?: TextStyle['textAlign'];
+
+  marginText?: number;
+  marginTopText?: number;
+  marginBottomText?: number;
+  marginLeftText?: number;
+  marginRightText?: number;
+  marginHorizontalText?: number;
+  marginVerticalText?: number;
+}
+
+const AppTextWrapper = (props: Partial<Props>) => {
+  const {
+    size = 12,
+    color = Colors.PRIMARY,
+    style,
+    numberOfLines = 0,
+    capital = false,
+    onPress,
+    center,
+    italic = false,
+    fontFamily = Fonts.REGULAR,
+    containerStyle,
+    disabled,
+    linHeight,
+    textAlign,
+    marginText,
+    marginTopText,
+    marginBottomText,
+    marginLeftText,
+    marginRightText,
+    marginHorizontalText,
+    marginVerticalText,
+  } = props;
+  return (
+    <AppPressable onPress={onPress} disabled={disabled} style={containerStyle}>
+      <AppText
+        numberOfLines={numberOfLines}
+        allowFontScaling={false}
+        fontFamily={fontFamily}
+        size={size}
+        color={color}
+        capital={capital}
+        center={center}
+        italic={italic}
+        lineHeight={linHeight}
+        textAlign={textAlign}
+        margin={marginText}
+        marginTop={marginTopText}
+        marginBottom={marginBottomText}
+        marginLeft={marginLeftText}
+        marginRight={marginRightText}
+        marginHorizontal={marginHorizontalText}
+        marginVertical={marginVerticalText}
+        style={style}
+      >
+        {props.children}
+      </AppText>
+    </AppPressable>
+  );
+};
+
+export default AppTextWrapper;

package/templates/base/src/ui/appComponents/appWrapper/index.tsx

@@ -0,0 +1,56 @@
+import AppStatusBar from "@appComponents/appStatusBar";
+import BackgroundGradient from "@components/backgroundGradient";
+import { Colors } from "@theme/colors";
+import React from "react";
+import AppColumnView from "../appColumnView";
+import { useSafeArea } from "../appSafeAreaInsets";
+
+interface Props {
+  children: any;
+  noPaddingTop: any;
+  noPaddingBottom: any;
+  bgColor?: string;
+  barStyle: "dark-content" | "default" | "light-content";
+  tabBarHeight?: number;
+  statusBarColor?: string;
+}
+
+const AppWrapper = ({
+  barStyle = "dark-content",
+  children,
+  noPaddingTop,
+  noPaddingBottom,
+  bgColor = Colors.WHITE,
+  tabBarHeight,
+  statusBarColor = "white",
+}: Partial<Props>) => {
+  const insets: any = useSafeArea();
+
+  const paddingTop = noPaddingTop ? 0 : insets.top;
+  const paddingBottom = tabBarHeight
+    ? tabBarHeight
+    : noPaddingBottom
+      ? 0
+      : insets.bottom;
+
+  return (
+    <>
+      <AppStatusBar
+        barStyle={barStyle}
+        translucent={true} // safer default on Android
+        backgroundColor={statusBarColor}
+      />
+      <AppColumnView
+        flex={1}
+        paddingBottom={paddingBottom}
+        paddingTop={paddingTop}
+        backgroundColor={bgColor}
+      >
+        <BackgroundGradient />
+        {children}
+      </AppColumnView>
+    </>
+  );
+};
+
+export default AppWrapper;

package/templates/base/src/ui/appComponents/customActivityIndicator/index.tsx

@@ -0,0 +1,34 @@
+import {RF} from '@theme/responsive';
+import React from 'react';
+import {ActivityIndicator, ActivityIndicatorProps} from 'react-native';
+
+interface CustomActivityIndicatorProps extends ActivityIndicatorProps {
+  size?: 'small' | 'large' | number;
+  color?: string;
+  width?: number;
+  height?: number;
+}
+
+const CustomActivityIndicator: React.FC<CustomActivityIndicatorProps> = ({
+  size = 'small',
+  color = '#000',
+  width,
+  height,
+  ...rest
+}) => {
+  const indicatorStyle = {
+    width: width ? RF(width) : undefined,
+    height: height ? RF(height) : undefined,
+  };
+
+  return (
+    <ActivityIndicator
+      size={size}
+      color={color}
+      style={indicatorStyle}
+      {...rest}
+    />
+  );
+};
+
+export default CustomActivityIndicator;

package/templates/base/src/ui/appComponents/customGetPermissionModal/index.tsx

@@ -0,0 +1,62 @@
+import AppButton from "@appComponents/appButton";
+import AppColumnView from "@appComponents/appColumnView";
+import AppText from "@appComponents/appText";
+import CustomModal, { ModalAnimationType } from "@appComponents/customModal";
+import { Colors } from "@theme/colors";
+import { Fonts } from "@theme/fonts";
+import React from "react";
+
+const CustomGetPermissionModal = ({ visible, onClose, message }: any) => {
+  return (
+    <CustomModal
+      visible={visible}
+      transparent
+      animationType={ModalAnimationType.FADE}
+    >
+      <AppColumnView
+        flex={1}
+        backgroundColor={"rgba(0,0,0,0.5)"}
+        justifyContent="center"
+        alignItems="center"
+      >
+        <AppColumnView
+          backgroundColor={Colors.WHITE}
+          borderRadius={16}
+          padding={24}
+          width={"80%"}
+          shadowColor="#000"
+          shadowOpacity={0.25}
+          shadowOffset={{ width: 0, height: 2 }}
+          elevation={5}
+          gap={24}
+        >
+          <AppColumnView gap={16} alignItems="center">
+            <AppText fontFamily={Fonts.BOLD} size={18} color={Colors.PRIMARY}>
+              Permission Required
+            </AppText>
+            <AppText
+              size={16}
+              color={Colors.GRAY_4}
+              textAlign="center"
+              lineHeight={20}
+            >
+              {message}
+            </AppText>
+          </AppColumnView>
+
+          <AppButton
+            title="Cancel"
+            onPress={onClose}
+            bgColor={Colors.PRIMARY}
+            titleColor={Colors.WHITE}
+            padding={12}
+            titleSize={12}
+            noRightIcon={true}
+          />
+        </AppColumnView>
+      </AppColumnView>
+    </CustomModal>
+  );
+};
+
+export default CustomGetPermissionModal;

package/templates/base/src/ui/appComponents/customModal/index.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import {Modal, ModalProps} from 'react-native';
+
+export enum ModalAnimationType {
+  NONE = 'none',
+  SLIDE = 'slide',
+  FADE = 'fade',
+}
+
+interface CustomModalProps extends Omit<ModalProps, 'animationType'> {
+  animationType?: ModalAnimationType;
+}
+
+const CustomModal: React.FC<CustomModalProps> = ({
+  children,
+  animationType = ModalAnimationType.FADE,
+  ...rest
+}) => {
+  return (
+    <Modal animationType={animationType} {...rest}>
+      {children}
+    </Modal>
+  );
+};
+
+export default CustomModal;

package/templates/base/src/ui/appComponents/customTextInput/index.tsx

@@ -0,0 +1,143 @@
+import { Colors } from "@theme/colors";
+import { Fonts } from "@theme/fonts";
+import { RF, RFT } from "@theme/responsive";
+import React, { forwardRef } from "react";
+import {
+  DimensionValue,
+  TextInput,
+  TextInputProps,
+  TextStyle,
+} from "react-native";
+
+interface CustomTextInputProps extends Omit<TextInputProps, "textAlign"> {
+  flex?: number;
+  width?: DimensionValue | number;
+  height?: number;
+  maxHeight?: number;
+  padding?: number;
+  paddingHorizontal?: number;
+  paddingVertical?: number;
+  paddingTop?: number;
+  paddingBottom?: number;
+  paddingLeft?: number;
+  paddingRight?: number;
+  margin?: number;
+  marginHorizontal?: number;
+  marginVertical?: number;
+  marginTop?: number;
+  marginBottom?: number;
+  marginLeft?: number;
+  marginRight?: number;
+  borderRadius?: number;
+  borderWidth?: number;
+  borderBottomWidth?: number;
+  borderTopWidth?: number;
+  borderLeftWidth?: number;
+  borderRightWidth?: number;
+  borderBottomColor?: string;
+  borderTopColor?: string;
+  borderLeftColor?: string;
+  borderRightColor?: string;
+  borderColor?: string;
+  borderStyle?: "solid" | "dotted" | "dashed";
+  backgroundColor?: string;
+  color?: string;
+  fontSize?: number;
+  fontFamily?: string;
+  textAlign?: TextStyle["textAlign"]; // ✅ Fix type conflict
+  textAlignVertical?: TextStyle["textAlignVertical"];
+}
+
+const CustomTextInput = forwardRef<TextInput, CustomTextInputProps>(
+  (
+    {
+      flex,
+      width,
+      height,
+      maxHeight,
+      padding,
+      paddingHorizontal,
+      paddingVertical,
+      paddingTop,
+      paddingBottom,
+      paddingLeft,
+      paddingRight,
+      margin,
+      marginHorizontal,
+      marginVertical,
+      marginTop,
+      marginBottom,
+      marginLeft,
+      marginRight,
+      borderRadius,
+      borderWidth,
+      borderBottomWidth,
+      borderTopWidth,
+      borderLeftWidth,
+      borderRightWidth,
+      borderBottomColor,
+      borderTopColor,
+      borderLeftColor,
+      borderRightColor,
+      borderColor,
+      borderStyle,
+      backgroundColor,
+      color = Colors.PRIMARY,
+      fontSize = RFT(14),
+      fontFamily = Fonts.MEDIUM,
+      textAlign,
+      style,
+      ...rest
+    },
+    ref,
+  ) => {
+    const toDim = (v?: number | DimensionValue) =>
+      v === undefined
+        ? undefined
+        : typeof v === "number"
+          ? (RF(v) as unknown as DimensionValue)
+          : v;
+
+    const inputStyle: TextStyle = {
+      flex,
+      width: toDim(width),
+      height: height ? RF(height) : undefined,
+      maxHeight: maxHeight ? RF(maxHeight) : undefined,
+      padding: padding ? RF(padding) : undefined,
+      paddingHorizontal: paddingHorizontal ? RF(paddingHorizontal) : undefined,
+      paddingVertical: paddingVertical ? RF(paddingVertical) : undefined,
+      paddingTop: paddingTop ? RF(paddingTop) : undefined,
+      paddingBottom: paddingBottom ? RF(paddingBottom) : undefined,
+      paddingLeft: paddingLeft ? RF(paddingLeft) : undefined,
+      paddingRight: paddingRight ? RF(paddingRight) : undefined,
+      margin: margin ? RF(margin) : undefined,
+      marginHorizontal: marginHorizontal ? RF(marginHorizontal) : undefined,
+      marginVertical: marginVertical ? RF(marginVertical) : undefined,
+      marginTop: marginTop ? RF(marginTop) : undefined,
+      marginBottom: marginBottom ? RF(marginBottom) : undefined,
+      marginLeft: marginLeft ? RF(marginLeft) : undefined,
+      marginRight: marginRight ? RF(marginRight) : undefined,
+      borderRadius: borderRadius ? RF(borderRadius) : undefined,
+      borderWidth,
+      borderBottomWidth,
+      borderTopWidth,
+      borderLeftWidth,
+      borderRightWidth,
+      borderBottomColor,
+      borderTopColor,
+      borderLeftColor,
+      borderRightColor,
+      borderColor,
+      borderStyle,
+      backgroundColor,
+      color,
+      fontSize,
+      fontFamily,
+      textAlign,
+    };
+
+    return <TextInput ref={ref} style={[inputStyle, style]} {...rest} />;
+  },
+);
+
+export default CustomTextInput;

package/templates/base/src/ui/components/avatarBlock/index.tsx

@@ -0,0 +1,42 @@
+import AppColumnView from "@appComponents/appColumnView";
+import AppIcon from "@appComponents/appIcon";
+import AppPressable from "@appComponents/appPressable";
+import IoniconsIcons from "@icons/IoniconsIcons";
+import { Colors } from "@theme/colors";
+import React from "react";
+
+type AvatarBlockProps = {
+  avatarUri: string | null;
+  onPressProfile?: () => void;
+};
+
+const AvatarBlock = ({ avatarUri, onPressProfile }: AvatarBlockProps) => {
+  if (avatarUri) {
+    return (
+      <AppIcon
+        uri={avatarUri}
+        width={44}
+        height={44}
+        borderRadius={22}
+        resizeMode="cover"
+        onPress={onPressProfile}
+      />
+    );
+  }
+  return (
+    <AppPressable onPress={onPressProfile}>
+      <AppColumnView
+        height={44}
+        width={44}
+        borderRadius={22}
+        backgroundColor={Colors.PRIMARY_7}
+        alignItems="center"
+        justifyContent="center"
+      >
+        <IoniconsIcons icon="person" color={Colors.PRIMARY} size={22} />
+      </AppColumnView>
+    </AppPressable>
+  );
+};
+
+export default AvatarBlock;