@dryanovski/react-native-components 1.0.6 → 1.0.8

package/src/components/Layout/HStack.tsx

@@ -0,0 +1,19 @@
+import { forwardRef } from 'react';
+import { View } from 'react-native';
+import type { ViewRef } from '../../types/general.types';
+import Style from '../../utils/Style';
+import type { HStackProps } from './layout.types';
+
+export const HStack = forwardRef<ViewRef, HStackProps>((props, ref) => {
+  const { style, ...rest } = props;
+
+  return <View ref={ref} style={[elementStyle.base, style]} {...rest} />;
+});
+
+HStack.displayName = 'HStack';
+
+const elementStyle = Style.create({
+  base: {
+    flexDirection: 'row',
+  },
+});

package/src/components/Layout/VStack.tsx

@@ -0,0 +1,19 @@
+import { forwardRef } from 'react';
+import { View } from 'react-native';
+import type { ViewRef } from '../../types/general.types';
+import Style from '../../utils/Style';
+import type { VStackProps } from './layout.types';
+
+export const VStack = forwardRef<ViewRef, VStackProps>((props, ref) => {
+  const { style, ...rest } = props;
+
+  return <View ref={ref} style={[elementStyle.base, style]} {...rest} />;
+});
+
+VStack.displayName = 'VStack';
+
+const elementStyle = Style.create({
+  base: {
+    flexDirection: 'column',
+  },
+});

package/src/components/Layout/layout.types.ts

@@ -0,0 +1,9 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+
+export type VStackProps = {
+  style?: StyleProp<ViewStyle>;
+};
+
+export type HStackProps = {
+  style?: StyleProp<ViewStyle>;
+};

package/src/index.tsx

@@ -1,5 +1,22 @@
 // Export Components
+export * from './components/Button/Button';
+export * from './components/Button/DangerButton';
+export * from './components/Button/GhostButton';
+export * from './components/Button/PrimaryButton';
+export * from './components/Button/SecondaryButton';
 export * from './components/Card/Card';
+export * from './components/Divider/Divider';
+export * from './components/Layout/HStack';
+export * from './components/Layout/VStack';
+export * from './components/Surface/Surface';
+
+// types
+export * from './components/Button/types';
+export * from './components/Card/types';
+export * from './components/Divider/types';
+export * from './components/Layout/layout.types';
+export * from './components/Surface/types';
+export * from './types/general.types';
 
 // Provider
 export * from './providers/ThemeProvider';

package/src/providers/ThemeProvider.tsx

@@ -6,6 +6,8 @@ import type {
   ThemeVariants,
 } from './types';
 
+import * as Font from 'expo-font';
+
 /**
  * Create a ThemeContext with default value null
  * @type {React.Context<ThemeContextType | null>}
@@ -67,6 +69,24 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({
     [deviceColorscheme]
   );
 
+  useEffect(() => {
+    (async function loadAsyncFonts() {
+      try {
+        await Font.loadAsync({
+          CodanRegular: require('../assets/fonts/CodanRegular.ttf'),
+          CodanBold: require('../assets/fonts/CodanBold.ttf'),
+          CodanBook: require('../assets/fonts/CodanBook.ttf'),
+          CodanLight: require('../assets/fonts/CodanLight.ttf'),
+          CodanMedium: require('../assets/fonts/CodanMedium.ttf'),
+        });
+      } catch (e) {
+        console.warn('Error loading fonts:', e);
+      } finally {
+        console.log('Theme Fonts loaded');
+      }
+    })();
+  }, []);
+
   return (
     <ThemeContext.Provider value={{ theme: currentTheme, changeTheme }}>
       {children}

package/src/utils/fontScale.ts

@@ -0,0 +1,51 @@
+import { Dimensions, PixelRatio } from 'react-native';
+import { getDeviceType } from './getDeviceType';
+import { getScreenSizeCategory } from './getScreenSizeCategory';
+
+const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');
+
+// Use whichever is smaller, width or height
+const SCALE = SCREEN_WIDTH > SCREEN_HEIGHT ? SCREEN_HEIGHT : SCREEN_WIDTH;
+const BASE_WIDTH = 375;
+
+const fontConfig = {
+  phone: {
+    small: { min: 0.8, max: 1 },
+    medium: { min: 0.9, max: 1.1 },
+    large: { min: 1, max: 1.2 },
+  },
+  tablet: {
+    small: { min: 1.3, max: 1.4 },
+    medium: { min: 1.4, max: 1.5 },
+    large: { min: 1.5, max: 1.7 },
+  },
+};
+
+export function fontScale(size: number) {
+  const deviceType = getDeviceType();
+  const screenCategory = getScreenSizeCategory();
+  const config = fontConfig[deviceType][screenCategory];
+
+  // Calculate the scale factor
+  const scaleFactor = SCALE / BASE_WIDTH;
+
+  // Clamp the scale factor between the configured min and max
+  const clampedScaleFactor = Math.min(
+    Math.max(scaleFactor, config.min),
+    config.max
+  );
+
+  // Calculate the new size
+  let newSize = size * clampedScaleFactor;
+
+  // Additional scaling for tablets to ensure text isn't too small
+  if (deviceType === 'tablet') {
+    newSize *= 1.1; // Increase tablet font sizes by an additional 10%
+  }
+
+  // Round the size and adjust for the device's font scale
+  return (
+    Math.round(PixelRatio.roundToNearestPixel(newSize)) /
+    PixelRatio.getFontScale()
+  );
+}

package/src/utils/getDeviceType.ts

@@ -0,0 +1,20 @@
+import { Dimensions, PixelRatio } from 'react-native';
+
+const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');
+
+export const getDeviceType = (): 'phone' | 'tablet' => {
+  const pixelDensity = PixelRatio.get();
+  const adjustedWidth = SCREEN_WIDTH * pixelDensity;
+  const adjustedHeight = SCREEN_HEIGHT * pixelDensity;
+
+  if (pixelDensity < 2 && (adjustedWidth >= 1000 || adjustedHeight >= 1000)) {
+    return 'tablet';
+  } else if (
+    pixelDensity === 2 &&
+    (adjustedWidth >= 1920 || adjustedHeight >= 1920)
+  ) {
+    return 'tablet';
+  } else {
+    return 'phone';
+  }
+};

package/src/utils/getScreenSizeCategory.ts

@@ -0,0 +1,12 @@
+import { Dimensions } from 'react-native';
+
+const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');
+
+// Use whichever is smaller, width or height
+const SCALE = SCREEN_WIDTH > SCREEN_HEIGHT ? SCREEN_HEIGHT : SCREEN_WIDTH;
+
+export const getScreenSizeCategory = (): 'small' | 'medium' | 'large' => {
+  if (SCALE < 350) return 'small';
+  if (SCALE > 500) return 'large';
+  return 'medium';
+};