codingpixel-expo-app 0.1.0

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

@@ -0,0 +1,168 @@
+import { RF } from "@theme/responsive";
+import React from "react";
+import { DimensionValue, StyleProp, ViewStyle } from "react-native";
+import {
+  KeyboardAvoidingView,
+  KeyboardAvoidingViewProps,
+} from "react-native-keyboard-controller";
+
+type CustomKeyboardAvoidingViewProps = KeyboardAvoidingViewProps & {
+  children?: React.ReactNode;
+
+  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;
+
+  borderTopLeftRadius?: number;
+  borderTopRightRadius?: number;
+
+  gap?: number;
+  rowGap?: number;
+  columnGap?: number;
+
+  flex?: number;
+  flexGrow?: number;
+  flexShrink?: number;
+  flexBasis?: number;
+  flexDirection?: ViewStyle["flexDirection"];
+  alignItems?: ViewStyle["alignItems"];
+  justifyContent?: ViewStyle["justifyContent"];
+  alignSelf?: ViewStyle["alignSelf"];
+  flexWrap?: ViewStyle["flexWrap"];
+
+  width?: number | DimensionValue;
+  height?: number | DimensionValue;
+  minWidth?: number | DimensionValue;
+  maxWidth?: number | DimensionValue;
+  minHeight?: number | DimensionValue;
+  maxHeight?: number | DimensionValue;
+
+  backgroundColor?: string;
+  borderRadius?: number;
+  opacity?: number;
+  overflow?: ViewStyle["overflow"];
+};
+
+const AppKeyboardAvoidingView: React.FC<CustomKeyboardAvoidingViewProps> = ({
+  children,
+  style,
+  padding,
+  paddingHorizontal,
+  paddingVertical,
+  paddingTop,
+  paddingBottom,
+  paddingLeft,
+  paddingRight,
+  margin,
+  marginHorizontal,
+  marginVertical,
+  marginTop,
+  marginBottom,
+  marginLeft,
+  marginRight,
+  borderTopLeftRadius,
+  borderTopRightRadius,
+  gap,
+  rowGap,
+  columnGap,
+  flex,
+  flexGrow,
+  flexShrink,
+  flexBasis,
+  flexDirection,
+  alignItems,
+  justifyContent,
+  alignSelf,
+  flexWrap,
+  width,
+  height,
+  minWidth,
+  maxWidth,
+  minHeight,
+  maxHeight,
+  backgroundColor,
+  borderRadius,
+  opacity,
+  overflow,
+  ...rest
+}) => {
+  const toDim = (v?: number | DimensionValue) =>
+    v === undefined
+      ? undefined
+      : typeof v === "number"
+        ? (RF(v) as unknown as DimensionValue)
+        : v;
+
+  const customStyle: StyleProp<ViewStyle> = {
+    padding: padding !== undefined ? RF(padding) : undefined,
+    paddingHorizontal:
+      paddingHorizontal !== undefined ? RF(paddingHorizontal) : undefined,
+    paddingVertical:
+      paddingVertical !== undefined ? RF(paddingVertical) : undefined,
+    paddingTop: paddingTop !== undefined ? RF(paddingTop) : undefined,
+    paddingBottom: paddingBottom !== undefined ? RF(paddingBottom) : undefined,
+    paddingLeft: paddingLeft !== undefined ? RF(paddingLeft) : undefined,
+    paddingRight: paddingRight !== undefined ? RF(paddingRight) : undefined,
+
+    margin: margin !== undefined ? RF(margin) : undefined,
+    marginHorizontal:
+      marginHorizontal !== undefined ? RF(marginHorizontal) : undefined,
+    marginVertical:
+      marginVertical !== undefined ? RF(marginVertical) : 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,
+
+    gap: gap !== undefined ? RF(gap) : undefined,
+    rowGap: rowGap !== undefined ? RF(rowGap) : undefined,
+    columnGap: columnGap !== undefined ? RF(columnGap) : undefined,
+
+    borderTopLeftRadius:
+      borderTopLeftRadius !== undefined ? RF(borderTopLeftRadius) : undefined,
+    borderTopRightRadius:
+      borderTopRightRadius !== undefined ? RF(borderTopRightRadius) : undefined,
+
+    flex,
+    flexGrow,
+    flexShrink,
+    flexBasis,
+    flexDirection,
+    alignItems,
+    justifyContent,
+    alignSelf,
+    flexWrap,
+
+    width: toDim(width),
+    height: toDim(height),
+    minWidth: toDim(minWidth),
+    maxWidth: toDim(maxWidth),
+    minHeight: toDim(minHeight),
+    maxHeight: toDim(maxHeight),
+
+    backgroundColor,
+    borderRadius: borderRadius !== undefined ? RF(borderRadius) : undefined,
+    opacity,
+    overflow,
+  };
+
+  return (
+    <KeyboardAvoidingView style={[customStyle, style]} {...rest}>
+      {children}
+    </KeyboardAvoidingView>
+  );
+};
+
+export default AppKeyboardAvoidingView;

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

@@ -0,0 +1,188 @@
+import {RF} from '@theme/responsive';
+import React from 'react';
+import {DimensionValue, StyleProp, ViewStyle} from 'react-native';
+import {
+  KeyboardAwareScrollView,
+  KeyboardAwareScrollViewProps,
+} from 'react-native-keyboard-controller';
+
+type NumericOrDim = number | DimensionValue;
+
+export interface AppKeyboardAwareScrollViewProps
+  extends Omit<
+    KeyboardAwareScrollViewProps,
+    'style' | 'contentContainerStyle'
+  > {
+  flex?: number;
+  flexGrow?: number;
+  flexShrink?: number;
+  flexBasis?: NumericOrDim;
+
+  flexWrap?: ViewStyle['flexWrap'];
+  flexDirection?: ViewStyle['flexDirection'];
+  alignItems?: ViewStyle['alignItems'];
+  justifyContent?: ViewStyle['justifyContent'];
+  alignSelf?: ViewStyle['alignSelf'];
+
+  width?: NumericOrDim;
+  height?: NumericOrDim;
+  minWidth?: NumericOrDim;
+  maxWidth?: NumericOrDim;
+  minHeight?: NumericOrDim;
+  maxHeight?: NumericOrDim;
+
+  padding?: number;
+  paddingHorizontal?: number;
+  paddingVertical?: number;
+  paddingTop?: number;
+  paddingBottom?: number;
+  paddingLeft?: number;
+  paddingRight?: number;
+  gap?:number;
+
+  margin?: number;
+  marginHorizontal?: number;
+  marginVertical?: number;
+  marginTop?: number;
+  marginBottom?: number;
+  marginLeft?: number;
+  marginRight?: number;
+
+  borderRadius?: number;
+  borderWidth?: number;
+  borderColor?: string;
+  backgroundColor?: string;
+
+  position?: ViewStyle['position'];
+  top?: NumericOrDim;
+  right?: NumericOrDim;
+  bottom?: NumericOrDim;
+  left?: NumericOrDim;
+
+  style?: StyleProp<ViewStyle>;
+  contentContainerStyle?: StyleProp<ViewStyle>;
+}
+
+const toDim = (v?: number | DimensionValue) =>
+  v === undefined
+    ? undefined
+    : typeof v === 'number'
+    ? (RF(v) as unknown as DimensionValue)
+    : v;
+
+function buildContainerStyle(
+  props: AppKeyboardAwareScrollViewProps,
+): ViewStyle {
+  const {
+    flex,
+    flexGrow,
+    flexShrink,
+    flexBasis,
+    flexWrap,
+    flexDirection,
+    alignItems,
+    justifyContent,
+    alignSelf,
+    width,
+    height,
+    minWidth,
+    maxWidth,
+    minHeight,
+    maxHeight,
+    padding,
+    paddingHorizontal,
+    paddingVertical,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    gap,
+    margin,
+    marginHorizontal,
+    marginVertical,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight,
+    borderRadius,
+    borderWidth,
+    borderColor,
+    backgroundColor,
+    position,
+    top,
+    right,
+    bottom,
+    left,
+  } = props;
+
+  return {
+    flex,
+    flexGrow,
+    flexShrink,
+    flexBasis: toDim(flexBasis),
+    flexWrap,
+    flexDirection,
+    alignItems,
+    justifyContent,
+    alignSelf,
+
+    width: toDim(width),
+    height: toDim(height),
+    minWidth: toDim(minWidth),
+    maxWidth: toDim(maxWidth),
+    minHeight: toDim(minHeight),
+    maxHeight: toDim(maxHeight),
+
+    padding: padding !== undefined ? RF(padding) : undefined,
+    paddingHorizontal:
+      paddingHorizontal !== undefined ? RF(paddingHorizontal) : undefined,
+    paddingVertical:
+      paddingVertical !== undefined ? RF(paddingVertical) : undefined,
+    paddingTop: paddingTop !== undefined ? RF(paddingTop) : undefined,
+    paddingBottom: paddingBottom !== undefined ? RF(paddingBottom) : undefined,
+    paddingLeft: paddingLeft !== undefined ? RF(paddingLeft) : undefined,
+    paddingRight: paddingRight !== undefined ? RF(paddingRight) : undefined,
+    gap: gap !== undefined ? RF(gap) : undefined,
+
+    margin: margin !== undefined ? RF(margin) : undefined,
+    marginHorizontal:
+      marginHorizontal !== undefined ? RF(marginHorizontal) : undefined,
+    marginVertical:
+      marginVertical !== undefined ? RF(marginVertical) : 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,
+
+    borderRadius: borderRadius !== undefined ? RF(borderRadius) : undefined,
+    borderWidth: borderWidth !== undefined ? RF(borderWidth) : undefined,
+    borderColor,
+    backgroundColor,
+
+    position,
+    top: toDim(top),
+    right: toDim(right),
+    bottom: toDim(bottom),
+    left: toDim(left),
+  };
+}
+
+const AppKeyboardAwareScrollView: React.FC<AppKeyboardAwareScrollViewProps> = ({
+  style,
+  contentContainerStyle,
+  children,
+  ...rest
+}) => {
+  const containerStyle = buildContainerStyle(rest);
+
+  return (
+    <KeyboardAwareScrollView
+      {...rest}
+      style={style}
+      contentContainerStyle={[containerStyle, contentContainerStyle]}>
+      {children}
+    </KeyboardAwareScrollView>
+  );
+};
+
+export default AppKeyboardAwareScrollView;

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

@@ -0,0 +1,22 @@
+// Deviation #3 (docs/MIRROR_NOTES.md): Reactotron import stripped.
+// MyRoster's appLogger imported `../../../../ReactotronConfig` from project root —
+// app-specific dev tooling. Generated apps add Reactotron back per their own setup.
+//
+// Default transport is the built-in console transport from react-native-logs.
+import { consoleTransport, logger } from "react-native-logs";
+
+const config = {
+  transport: consoleTransport,
+  severity: __DEV__ ? "debug" : "error",
+  transportOptions: {
+    colors: {
+      info: "blueBright" as const,
+      warn: "yellowBright" as const,
+      error: "redBright" as const,
+    },
+  },
+};
+
+const log = logger.createLogger(config);
+
+export default log;

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

@@ -0,0 +1,220 @@
+import { RF } from '@theme/responsive';
+import React from 'react';
+import {
+  DimensionValue,
+  Pressable,
+  PressableProps,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+
+type CustomPressableProps = PressableProps & {
+  children?: React.ReactNode;
+
+  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;
+
+  flex?: number;
+  flexGrow?: number;
+  flexShrink?: number;
+  flexBasis?: number | DimensionValue;
+  flexWrap?: ViewStyle['flexWrap'];
+  alignItems?: ViewStyle['alignItems'];
+  justifyContent?: ViewStyle['justifyContent'];
+  alignSelf?: ViewStyle['alignSelf'];
+  alignContent?: ViewStyle['alignContent'];
+  flexDirection?: ViewStyle['flexDirection'];
+
+  gap?: number;
+  rowGap?: number;
+  columnGap?: number;
+
+  width?: number | DimensionValue;
+  height?: number | DimensionValue;
+  minWidth?: number | DimensionValue;
+  maxWidth?: number | DimensionValue;
+  minHeight?: number | DimensionValue;
+  maxHeight?: number | DimensionValue;
+  aspectRatio?: number;
+
+  position?: ViewStyle['position'];
+  top?: number | DimensionValue;
+  left?: number | DimensionValue;
+  right?: number | DimensionValue;
+  bottom?: number | DimensionValue;
+  zIndex?: number;
+
+  backgroundColor?: string;
+  opacity?: number;
+  overflow?: ViewStyle['overflow'];
+  display?: ViewStyle['display'];
+  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?: ViewStyle['borderStyle'];
+
+  shadowColor?: string;
+  shadowOffset?: { width: number; height: number };
+  shadowOpacity?: number;
+  shadowRadius?: number;
+  elevation?: number;
+
+  transform?: ViewStyle['transform'];
+  backfaceVisibility?: ViewStyle['backfaceVisibility'];
+};
+
+const AppPressable: React.FC<CustomPressableProps> = ({
+  children,
+  style,
+  position,
+  top,
+  left,
+  right,
+  bottom,
+  zIndex,
+  gap,
+  rowGap,
+  columnGap,
+  alignItems,
+  justifyContent,
+  alignSelf,
+  alignContent,
+  flexDirection,
+  flex,
+  flexGrow,
+  flexShrink,
+  flexBasis,
+  flexWrap,
+  width,
+  height,
+  minWidth,
+  maxWidth,
+  minHeight,
+  maxHeight,
+  aspectRatio,
+  backgroundColor,
+  opacity,
+  overflow,
+  display,
+  borderRadius,
+  borderTopLeftRadius,
+  borderTopRightRadius,
+  borderBottomLeftRadius,
+  borderBottomRightRadius,
+  borderWidth,
+  borderTopWidth,
+  borderBottomWidth,
+  borderLeftWidth,
+  borderRightWidth,
+  borderColor,
+  borderTopColor,
+  borderBottomColor,
+  borderLeftColor,
+  borderRightColor,
+  borderStyle,
+  ...rest
+}) => {
+  const toDim = (v?: number | DimensionValue) =>
+    v === undefined
+      ? undefined
+      : typeof v === 'number'
+      ? (RF(v) as unknown as DimensionValue)
+      : v;
+
+  const customStyle: ViewStyle = {
+    position,
+    top: toDim(top),
+    left: toDim(left),
+    right: toDim(right),
+    bottom: toDim(bottom),
+    zIndex,
+
+    gap: gap !== undefined ? RF(gap) : undefined,
+    rowGap: rowGap !== undefined ? RF(rowGap) : undefined,
+    columnGap: columnGap !== undefined ? RF(columnGap) : undefined,
+
+    alignItems,
+    justifyContent,
+    alignSelf,
+    alignContent,
+    flexDirection,
+    flex,
+    flexGrow,
+    flexShrink,
+    flexBasis,
+    flexWrap,
+    width: toDim(width),
+    height: toDim(height),
+    minWidth: toDim(minWidth),
+    maxWidth: toDim(maxWidth),
+    minHeight: toDim(minHeight),
+    maxHeight: toDim(maxHeight),
+    aspectRatio,
+    backgroundColor,
+    opacity,
+    overflow,
+    display,
+    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,
+  };
+
+  return (
+    <Pressable style={[customStyle, style as StyleProp<ViewStyle>]} {...rest}>
+      {children}
+    </Pressable>
+  );
+};
+
+export default AppPressable;