@teamturing/react-native-kit 0.1.0 → 1.2.0

package/src/component/Icon/Icons.tsx

@@ -0,0 +1,219 @@
+export { default as ai } from '../../../../icons/svg/ai.svg';
+export { default as ai_color } from '../../../../icons/svg/ai_color.svg';
+export { default as ai_sad } from '../../../../icons/svg/ai_sad.svg';
+export { default as aim_point } from '../../../../icons/svg/aim_point.svg';
+export { default as alarm } from '../../../../icons/svg/alarm.svg';
+export { default as apple_color } from '../../../../icons/svg/apple_color.svg';
+export { default as arrow_down } from '../../../../icons/svg/arrow_down.svg';
+export { default as arrow_left } from '../../../../icons/svg/arrow_left.svg';
+export { default as arrow_left_circle } from '../../../../icons/svg/arrow_left_circle.svg';
+export { default as arrow_left_limit } from '../../../../icons/svg/arrow_left_limit.svg';
+export { default as arrow_left_right } from '../../../../icons/svg/arrow_left_right.svg';
+export { default as arrow_right } from '../../../../icons/svg/arrow_right.svg';
+export { default as arrow_right_circle } from '../../../../icons/svg/arrow_right_circle.svg';
+export { default as arrow_right_limit } from '../../../../icons/svg/arrow_right_limit.svg';
+export { default as arrow_up } from '../../../../icons/svg/arrow_up.svg';
+export { default as arrow_up_down } from '../../../../icons/svg/arrow_up_down.svg';
+export { default as arrow_up_limit } from '../../../../icons/svg/arrow_up_limit.svg';
+export { default as barchart } from '../../../../icons/svg/barchart.svg';
+export { default as book } from '../../../../icons/svg/book.svg';
+export { default as bookmark } from '../../../../icons/svg/bookmark.svg';
+export { default as box } from '../../../../icons/svg/box.svg';
+export { default as bus_color } from '../../../../icons/svg/bus_color.svg';
+export { default as calendar_check } from '../../../../icons/svg/calendar_check.svg';
+export { default as calendar_check_color } from '../../../../icons/svg/calendar_check_color.svg';
+export { default as calendar_color } from '../../../../icons/svg/calendar_color.svg';
+export { default as camera } from '../../../../icons/svg/camera.svg';
+export { default as card } from '../../../../icons/svg/card.svg';
+export { default as cards_percent } from '../../../../icons/svg/cards_percent.svg';
+export { default as cards_percent_color } from '../../../../icons/svg/cards_percent_color.svg';
+export { default as caret_down } from '../../../../icons/svg/caret_down.svg';
+export { default as caret_left } from '../../../../icons/svg/caret_left.svg';
+export { default as caret_right } from '../../../../icons/svg/caret_right.svg';
+export { default as caret_up } from '../../../../icons/svg/caret_up.svg';
+export { default as cart } from '../../../../icons/svg/cart.svg';
+export { default as chat_bubble } from '../../../../icons/svg/chat_bubble.svg';
+export { default as chat_bubble_badge_color } from '../../../../icons/svg/chat_bubble_badge_color.svg';
+export { default as chat_bubble_correct } from '../../../../icons/svg/chat_bubble_correct.svg';
+export { default as chat_bubble_correct_color } from '../../../../icons/svg/chat_bubble_correct_color.svg';
+export { default as chat_bubble_dots } from '../../../../icons/svg/chat_bubble_dots.svg';
+export { default as chat_bubble_question } from '../../../../icons/svg/chat_bubble_question.svg';
+export { default as check } from '../../../../icons/svg/check.svg';
+export { default as check_in_circle } from '../../../../icons/svg/check_in_circle.svg';
+export { default as check_in_circle_color } from '../../../../icons/svg/check_in_circle_color.svg';
+export { default as check_in_circle_line } from '../../../../icons/svg/check_in_circle_line.svg';
+export { default as chevron_down } from '../../../../icons/svg/chevron_down.svg';
+export { default as chevron_down_two } from '../../../../icons/svg/chevron_down_two.svg';
+export { default as chevron_left } from '../../../../icons/svg/chevron_left.svg';
+export { default as chevron_right } from '../../../../icons/svg/chevron_right.svg';
+export { default as chevron_right_two } from '../../../../icons/svg/chevron_right_two.svg';
+export { default as chevron_up } from '../../../../icons/svg/chevron_up.svg';
+export { default as chevron_up_two } from '../../../../icons/svg/chevron_up_two.svg';
+export { default as circles } from '../../../../icons/svg/circles.svg';
+export { default as clip } from '../../../../icons/svg/clip.svg';
+export { default as close } from '../../../../icons/svg/close.svg';
+export { default as close_in_circle } from '../../../../icons/svg/close_in_circle.svg';
+export { default as coin } from '../../../../icons/svg/coin.svg';
+export { default as contact } from '../../../../icons/svg/contact.svg';
+export { default as copy } from '../../../../icons/svg/copy.svg';
+export { default as correct } from '../../../../icons/svg/correct.svg';
+export { default as coupon } from '../../../../icons/svg/coupon.svg';
+export { default as crown } from '../../../../icons/svg/crown.svg';
+export { default as curriculum } from '../../../../icons/svg/curriculum.svg';
+export { default as curriculum_color } from '../../../../icons/svg/curriculum_color.svg';
+export { default as delete } from '../../../../icons/svg/delete.svg';
+export { default as document } from '../../../../icons/svg/document.svg';
+export { default as dots } from '../../../../icons/svg/dots.svg';
+export { default as download } from '../../../../icons/svg/download.svg';
+export { default as emoji } from '../../../../icons/svg/emoji.svg';
+export { default as emoji_plus } from '../../../../icons/svg/emoji_plus.svg';
+export { default as emoji_plus_dash } from '../../../../icons/svg/emoji_plus_dash.svg';
+export { default as eng } from '../../../../icons/svg/eng.svg';
+export { default as enter } from '../../../../icons/svg/enter.svg';
+export { default as equal } from '../../../../icons/svg/equal.svg';
+export { default as eraser } from '../../../../icons/svg/eraser.svg';
+export { default as exclamation_point_in_circle } from '../../../../icons/svg/exclamation_point_in_circle.svg';
+export { default as eye_off } from '../../../../icons/svg/eye_off.svg';
+export { default as eye_on } from '../../../../icons/svg/eye_on.svg';
+export { default as face_happy } from '../../../../icons/svg/face_happy.svg';
+export { default as face_sad } from '../../../../icons/svg/face_sad.svg';
+export { default as facebook } from '../../../../icons/svg/facebook.svg';
+export { default as facebook_color } from '../../../../icons/svg/facebook_color.svg';
+export { default as filter } from '../../../../icons/svg/filter.svg';
+export { default as fire } from '../../../../icons/svg/fire.svg';
+export { default as fire_color } from '../../../../icons/svg/fire_color.svg';
+export { default as folder } from '../../../../icons/svg/folder.svg';
+export { default as frame } from '../../../../icons/svg/frame.svg';
+export { default as glasses } from '../../../../icons/svg/glasses.svg';
+export { default as graph } from '../../../../icons/svg/graph.svg';
+export { default as gun } from '../../../../icons/svg/gun.svg';
+export { default as gun_color } from '../../../../icons/svg/gun_color.svg';
+export { default as hair } from '../../../../icons/svg/hair.svg';
+export { default as headphone } from '../../../../icons/svg/headphone.svg';
+export { default as heart } from '../../../../icons/svg/heart.svg';
+export { default as home } from '../../../../icons/svg/home.svg';
+export { default as infinite } from '../../../../icons/svg/infinite.svg';
+export { default as info_in_circle } from '../../../../icons/svg/info_in_circle.svg';
+export { default as instagram } from '../../../../icons/svg/instagram.svg';
+export { default as kakao_color } from '../../../../icons/svg/kakao_color.svg';
+export { default as kor } from '../../../../icons/svg/kor.svg';
+export { default as league } from '../../../../icons/svg/league.svg';
+export { default as letter } from '../../../../icons/svg/letter.svg';
+export { default as letter_crown_color } from '../../../../icons/svg/letter_crown_color.svg';
+export { default as letter_crown_open_color } from '../../../../icons/svg/letter_crown_open_color.svg';
+export { default as letter_heart_color } from '../../../../icons/svg/letter_heart_color.svg';
+export { default as letter_heart_open_color } from '../../../../icons/svg/letter_heart_open_color.svg';
+export { default as line_three } from '../../../../icons/svg/line_three.svg';
+export { default as link } from '../../../../icons/svg/link.svg';
+export { default as lock } from '../../../../icons/svg/lock.svg';
+export { default as lock_color } from '../../../../icons/svg/lock_color.svg';
+export { default as logo_apple } from '../../../../icons/svg/logo_apple.svg';
+export { default as logo_color } from '../../../../icons/svg/logo_color.svg';
+export { default as logo_facebook } from '../../../../icons/svg/logo_facebook.svg';
+export { default as logo_kakao } from '../../../../icons/svg/logo_kakao.svg';
+export { default as logo_naver } from '../../../../icons/svg/logo_naver.svg';
+export { default as maxsize } from '../../../../icons/svg/maxsize.svg';
+export { default as minsize } from '../../../../icons/svg/minsize.svg';
+export { default as minus } from '../../../../icons/svg/minus.svg';
+export { default as minus_in_circle } from '../../../../icons/svg/minus_in_circle.svg';
+export { default as moneybag } from '../../../../icons/svg/moneybag.svg';
+export { default as moneybag_color } from '../../../../icons/svg/moneybag_color.svg';
+export { default as more } from '../../../../icons/svg/more.svg';
+export { default as my_bubble } from '../../../../icons/svg/my_bubble.svg';
+export { default as naver_color } from '../../../../icons/svg/naver_color.svg';
+export { default as new } from '../../../../icons/svg/new.svg';
+export { default as note } from '../../../../icons/svg/note.svg';
+export { default as note_color } from '../../../../icons/svg/note_color.svg';
+export { default as note_pen_color } from '../../../../icons/svg/note_pen_color.svg';
+export { default as number_five_filled } from '../../../../icons/svg/number_five_filled.svg';
+export { default as number_five_outlined } from '../../../../icons/svg/number_five_outlined.svg';
+export { default as number_four_filled } from '../../../../icons/svg/number_four_filled.svg';
+export { default as number_four_outlined } from '../../../../icons/svg/number_four_outlined.svg';
+export { default as number_one_filled } from '../../../../icons/svg/number_one_filled.svg';
+export { default as number_one_outlined } from '../../../../icons/svg/number_one_outlined.svg';
+export { default as number_three_filled } from '../../../../icons/svg/number_three_filled.svg';
+export { default as number_three_outlined } from '../../../../icons/svg/number_three_outlined.svg';
+export { default as number_two_filled } from '../../../../icons/svg/number_two_filled.svg';
+export { default as number_two_outlined } from '../../../../icons/svg/number_two_outlined.svg';
+export { default as out } from '../../../../icons/svg/out.svg';
+export { default as palm_tree_color } from '../../../../icons/svg/palm_tree_color.svg';
+export { default as paper_check } from '../../../../icons/svg/paper_check.svg';
+export { default as paper_pen } from '../../../../icons/svg/paper_pen.svg';
+export { default as paper_pen_color } from '../../../../icons/svg/paper_pen_color.svg';
+export { default as paper_two } from '../../../../icons/svg/paper_two.svg';
+export { default as pause } from '../../../../icons/svg/pause.svg';
+export { default as pen } from '../../../../icons/svg/pen.svg';
+export { default as percent_in_circle } from '../../../../icons/svg/percent_in_circle.svg';
+export { default as picture } from '../../../../icons/svg/picture.svg';
+export { default as pill } from '../../../../icons/svg/pill.svg';
+export { default as pill_color } from '../../../../icons/svg/pill_color.svg';
+export { default as pin } from '../../../../icons/svg/pin.svg';
+export { default as pin_color_red } from '../../../../icons/svg/pin_color_red.svg';
+export { default as play } from '../../../../icons/svg/play.svg';
+export { default as plug } from '../../../../icons/svg/plug.svg';
+export { default as plug_color } from '../../../../icons/svg/plug_color.svg';
+export { default as plus } from '../../../../icons/svg/plus.svg';
+export { default as plus_in_circle } from '../../../../icons/svg/plus_in_circle.svg';
+export { default as point_in_circle } from '../../../../icons/svg/point_in_circle.svg';
+export { default as point_in_circle_color } from '../../../../icons/svg/point_in_circle_color.svg';
+export { default as present } from '../../../../icons/svg/present.svg';
+export { default as present_color } from '../../../../icons/svg/present_color.svg';
+export { default as problem } from '../../../../icons/svg/problem.svg';
+export { default as profile } from '../../../../icons/svg/profile.svg';
+export { default as progress_gradient } from '../../../../icons/svg/progress_gradient.svg';
+export { default as question_mark_in_circle } from '../../../../icons/svg/question_mark_in_circle.svg';
+export { default as question_mark_in_circle_outlined } from '../../../../icons/svg/question_mark_in_circle_outlined.svg';
+export { default as raffle_color } from '../../../../icons/svg/raffle_color.svg';
+export { default as receipt } from '../../../../icons/svg/receipt.svg';
+export { default as refresh } from '../../../../icons/svg/refresh.svg';
+export { default as repeat } from '../../../../icons/svg/repeat.svg';
+export { default as school } from '../../../../icons/svg/school.svg';
+export { default as school_color } from '../../../../icons/svg/school_color.svg';
+export { default as scroll } from '../../../../icons/svg/scroll.svg';
+export { default as search } from '../../../../icons/svg/search.svg';
+export { default as set } from '../../../../icons/svg/set.svg';
+export { default as setting } from '../../../../icons/svg/setting.svg';
+export { default as share } from '../../../../icons/svg/share.svg';
+export { default as shield_check } from '../../../../icons/svg/shield_check.svg';
+export { default as siren } from '../../../../icons/svg/siren.svg';
+export { default as skipback } from '../../../../icons/svg/skipback.svg';
+export { default as skipforward } from '../../../../icons/svg/skipforward.svg';
+export { default as sound_off } from '../../../../icons/svg/sound_off.svg';
+export { default as sound_on } from '../../../../icons/svg/sound_on.svg';
+export { default as speaker } from '../../../../icons/svg/speaker.svg';
+export { default as stackup } from '../../../../icons/svg/stackup.svg';
+export { default as star } from '../../../../icons/svg/star.svg';
+export { default as star_color } from '../../../../icons/svg/star_color.svg';
+export { default as store } from '../../../../icons/svg/store.svg';
+export { default as sync } from '../../../../icons/svg/sync.svg';
+export { default as test_upload_color } from '../../../../icons/svg/test_upload_color.svg';
+export { default as thumbdown } from '../../../../icons/svg/thumbdown.svg';
+export { default as thumbup } from '../../../../icons/svg/thumbup.svg';
+export { default as thunder } from '../../../../icons/svg/thunder.svg';
+export { default as ticket } from '../../../../icons/svg/ticket.svg';
+export { default as ticket_color } from '../../../../icons/svg/ticket_color.svg';
+export { default as time } from '../../../../icons/svg/time.svg';
+export { default as timer } from '../../../../icons/svg/timer.svg';
+export { default as top } from '../../../../icons/svg/top.svg';
+export { default as touch } from '../../../../icons/svg/touch.svg';
+export { default as trash } from '../../../../icons/svg/trash.svg';
+export { default as treasurebox } from '../../../../icons/svg/treasurebox.svg';
+export { default as trophy } from '../../../../icons/svg/trophy.svg';
+export { default as twinkle } from '../../../../icons/svg/twinkle.svg';
+export { default as undo } from '../../../../icons/svg/undo.svg';
+export { default as university } from '../../../../icons/svg/university.svg';
+export { default as user_blocked } from '../../../../icons/svg/user_blocked.svg';
+export { default as user_check } from '../../../../icons/svg/user_check.svg';
+export { default as user_plus } from '../../../../icons/svg/user_plus.svg';
+export { default as user_two } from '../../../../icons/svg/user_two.svg';
+export { default as video } from '../../../../icons/svg/video.svg';
+export { default as video_color } from '../../../../icons/svg/video_color.svg';
+export { default as vote_color } from '../../../../icons/svg/vote_color.svg';
+export { default as warning } from '../../../../icons/svg/warning.svg';
+export { default as wifi } from '../../../../icons/svg/wifi.svg';
+export { default as workbook } from '../../../../icons/svg/workbook.svg';
+export { default as workbook_color } from '../../../../icons/svg/workbook_color.svg';
+export { default as wrong } from '../../../../icons/svg/wrong.svg';
+export { default as youtube } from '../../../../icons/svg/youtube.svg';
+export { default as bookmark_animation } from '../../assets/icons/bookmark_animation.svg';
+export { default as chat_bubble_question_animation } from '../../assets/icons/chat_bubble_question_animation.svg';

package/src/component/Icon/index.tsx

@@ -0,0 +1,28 @@
+import type { SxProps } from '@react-native-styled-system/core';
+import { useSx } from '@react-native-styled-system/core';
+import { type PaletteColor, palette } from '@teamturing/react-native-kit';
+import type { SvgProps } from 'react-native-svg';
+
+import * as Icons from './Icons';
+
+export type IconName = keyof typeof Icons;
+type Props = {
+  name: IconName;
+  size?: number;
+  fill?: SvgProps['fill'] | PaletteColor;
+  testID?: string;
+} & SxProps;
+
+const Icon = (props: Props) => {
+  const { getStyle, filteredProps } = useSx(props);
+  // eslint-disable-next-line import/namespace
+  const IconComponent = Icons[props.name];
+
+  const size = props.size ?? 24;
+  const fill = (props.fill ? (props.fill in palette ? palette[props.fill] : props.fill) : undefined) ?? palette.gray400;
+
+  return <IconComponent {...filteredProps} width={size} height={size} fill={fill} style={getStyle()} />;
+};
+
+export { Icon };
+export type { Props as IconProps };

package/src/component/IconCheckbox.tsx

@@ -0,0 +1,78 @@
+import { palette, type Spacing, spacing, is, type LayoutStyle, RowCenter } from '@teamturing/react-native-kit';
+import type { ReactElement } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { Pressable } from 'react-native';
+
+import { type IconName, type IconProps, Icon } from './Icon';
+
+export type IconCheckboxSize = 'm' | 's' | 's20';
+export type IconCheckboxVariant = 'check-primary' | 'check-circle-gray900' | 'check-circle-violet500';
+
+const iconByVariant: Record<
+  IconCheckboxVariant,
+  { name: IconName; pressedFill: IconProps['fill']; defaultFill: IconProps['fill'] }
+> = {
+  'check-primary': { name: 'check', pressedFill: palette.violet500, defaultFill: palette.gray200 },
+  'check-circle-gray900': { name: 'check_in_circle', pressedFill: palette.gray900, defaultFill: palette.gray200 },
+  'check-circle-violet500': {
+    name: 'check_in_circle',
+    pressedFill: palette.violet500,
+    defaultFill: palette.gray100,
+  },
+};
+
+const iconSizeBySize: Record<IconCheckboxSize, IconProps['size']> = {
+  m: 24,
+  s20: 20,
+  s: 16,
+};
+
+export type IconCheckboxProps = {
+  value?: boolean;
+  onPress?: () => void;
+  size?: IconCheckboxSize;
+  layout?: LayoutStyle;
+  variant?: IconCheckboxVariant;
+  readonly?: boolean;
+  testID?: string;
+  renderTrailing?: (params: { value: boolean }) => ReactElement;
+  horizontalGap?: Spacing;
+};
+
+const IconCheckbox = ({
+  value,
+  onPress,
+  size = 'm',
+  layout,
+  variant = 'check-circle-gray900',
+  readonly = false,
+  testID,
+  renderTrailing,
+  horizontalGap = 1,
+}: IconCheckboxProps) => {
+  const commonStyle: StyleProp<ViewStyle> = {
+    alignItems: 'center',
+    justifyContent: 'center',
+  };
+
+  return (
+    <Pressable
+      testID={testID}
+      style={[commonStyle, layout]}
+      hitSlop={spacing[2]}
+      onPress={() => onPress?.()}
+      pointerEvents={readonly ? 'none' : 'auto'}
+    >
+      <RowCenter gapX={horizontalGap}>
+        <Icon
+          name={iconByVariant[variant].name}
+          fill={value ? iconByVariant[variant].pressedFill : iconByVariant[variant].defaultFill}
+          size={iconSizeBySize[size]}
+        />
+        {is.function(renderTrailing) && renderTrailing({ value: !!value })}
+      </RowCenter>
+    </Pressable>
+  );
+};
+
+export { IconCheckbox };

package/src/component/Img/ImageConfig.ts

@@ -0,0 +1,27 @@
+import type { SxProps } from '@react-native-styled-system/core';
+import type { ImageStyle, ImageURISource, StyleProp, DimensionValue } from 'react-native';
+import type { OnLoadEvent } from 'react-native-fast-image';
+
+export type ImgAlign = 'auto' | 'left' | 'right' | 'center' | 'justify';
+export interface ImageConfig {
+  resizeMode?: 'contain' | 'cover' | 'stretch' | 'center';
+  width?: DimensionValue;
+  height?: DimensionValue;
+  style?: StyleProp<ImageStyle>;
+  sx?: SxProps;
+
+  testID?: string;
+  key?: string | number;
+
+  tintColor?: string;
+  headers?: ImageURISource['headers'];
+  onError?: () => void;
+  onLoad?: (event: OnLoadEvent) => void;
+  onLoadEnd?: () => void;
+  useFastImageInLocalImage?: boolean;
+}
+export type ImageConfigProp = Partial<ImageConfig>;
+export const DefaultImageConfig: ImageConfig = {
+  resizeMode: 'contain',
+};
+Object.freeze(DefaultImageConfig);

package/src/component/Img/Img.tsx

@@ -0,0 +1,176 @@
+import type { SxProps } from '@react-native-styled-system/core';
+import { propsToThemedStyle, StyledSystemContext } from '@react-native-styled-system/core';
+import type { ReactElement } from 'react';
+import type { ImageSourcePropType } from 'react-native';
+import { type ImageStyle, type DimensionValue, type ImageProps, Platform, Image } from 'react-native';
+import type { ImageStyle as FastImageStyle, FastImageProps } from 'react-native-fast-image';
+import FastImage from 'react-native-fast-image';
+
+import { flatStyle, is } from '../../util';
+
+import type { ImageConfig } from './ImageConfig';
+import { DefaultImageConfig } from './ImageConfig';
+
+export type ImgSource = ImageSourcePropType | string | undefined | null;
+
+export class Img {
+  readonly #config: ImageConfig;
+  readonly #style: ImageStyle;
+
+  get config() {
+    return this.#config;
+  }
+
+  private constructor(argConfig?: Partial<ImageConfig>) {
+    this.#config = { ...DefaultImageConfig, ...argConfig };
+    this.#style = flatStyle(argConfig?.style);
+  }
+
+  render(source: ImgSource, additionalConfig?: Partial<ImageConfig>): ReactElement {
+    if (additionalConfig) {
+      return this.append(additionalConfig).render(source);
+    }
+
+    return this.shouldUseFastImage(source) ? this.renderFastImage(source) : this.renderRNImage(source);
+  }
+
+  private renderRNImage(source: Omit<ImgSource, string> | undefined | null): ReactElement {
+    const props: ImageProps = {
+      source: source || -1,
+      resizeMode: this.resizeMode,
+      testID: this.#config.testID,
+    };
+    if (this.#config.sx) {
+      return (
+        <StyledSystemContext.Consumer>
+          {(value) => (
+            <Image
+              {...props}
+              style={[
+                propsToThemedStyle({
+                  sx: this.#config.sx,
+                  theme: value?.theme,
+                }) as ImageStyle,
+                this.style,
+              ]}
+              key={this.#config.key}
+            />
+          )}
+        </StyledSystemContext.Consumer>
+      );
+    } else {
+      return <Image {...props} style={this.style} key={this.#config.key} />;
+    }
+  }
+
+  private renderFastImage(source: ImgSource): ReactElement {
+    const props: FastImageProps = {
+      source: (is.string(source) ? { uri: source, headers: this.#config.headers } : source) as any,
+      resizeMode: this.resizeMode,
+      testID: this.#config.testID,
+      tintColor: this.#config.tintColor,
+      onError: this.#config.onError,
+      onLoad: this.#config.onLoad,
+      onLoadEnd: this.#config.onLoadEnd,
+    };
+
+    if (this.#config.sx) {
+      return (
+        <StyledSystemContext.Consumer>
+          {(value) => (
+            <FastImage
+              {...props}
+              style={[
+                propsToThemedStyle({
+                  sx: this.#config.sx,
+                  theme: value?.theme,
+                }) as FastImageStyle,
+                this.style,
+              ]}
+              key={this.#config.key}
+            />
+          )}
+        </StyledSystemContext.Consumer>
+      );
+    } else {
+      return <FastImage {...props} style={this.style} key={this.#config.key} />;
+    }
+  }
+
+  private shouldUseFastImage(source: ImgSource): boolean {
+    return is.string(source) || (Platform.OS !== 'web' && !!this.#config.useFastImageInLocalImage);
+  }
+
+  private get style(): ImageStyle & FastImageStyle {
+    const result = {
+      ...this.#style,
+      tintColor: Platform.OS !== 'web' ? this.#config.tintColor : undefined,
+    };
+    if (this.width) {
+      result.width = this.width;
+    }
+    if (this.height) {
+      result.height = this.height;
+    }
+    delete result.resizeMode;
+    return result as ImageStyle & FastImageStyle;
+  }
+
+  private get width(): DimensionValue | undefined {
+    return this.#config.width || this.#style?.width || undefined;
+  }
+  private get height(): DimensionValue | undefined {
+    return this.#config.height || this.#style?.height || undefined;
+  }
+  private get resizeMode(): 'contain' | 'cover' | 'stretch' | 'center' {
+    let result = this.#config.resizeMode || this.#style?.resizeMode || (DefaultImageConfig.resizeMode! as any);
+    if (result === 'contain' && is.android() && typeof this.borderRadius === 'number' && this.borderRadius > 0) {
+      result = 'cover';
+    }
+    return result;
+  }
+  private get borderRadius() {
+    return this.#style?.borderRadius || 0;
+  }
+
+  append(config: Partial<ImageConfig>) {
+    return new Img({ ...this.config, ...config });
+  }
+
+  static render(source: ImgSource, config?: Partial<ImageConfig>) {
+    return Img.create(config).render(source);
+  }
+  static create(config?: Partial<ImageConfig>) {
+    return new Img(config);
+  }
+  static Sx(sx: SxProps) {
+    return new Img({ sx });
+  }
+  Sx(sx?: SxProps) {
+    return this.append({ sx });
+  }
+
+  static readonly S10 = Img.create({ width: 10, height: 10 });
+  static readonly S12 = Img.create({ width: 12, height: 12 });
+  static readonly S14 = Img.create({ width: 14, height: 14 });
+  static readonly S16 = Img.create({ width: 16, height: 16 });
+  static readonly S20 = Img.create({ width: 20, height: 20 });
+  static readonly S24 = Img.create({ width: 24, height: 24 });
+  static readonly S28 = Img.create({ width: 28, height: 28 });
+  static readonly S30 = Img.create({ width: 30, height: 30 });
+  static readonly S32 = Img.create({ width: 32, height: 32 });
+  static readonly S36 = Img.create({ width: 36, height: 36 });
+  static readonly S40 = Img.create({ width: 40, height: 40 });
+  static readonly S44 = Img.create({ width: 44, height: 44 });
+  static readonly S48 = Img.create({ width: 48, height: 48 });
+  static readonly S56 = Img.create({ width: 56, height: 56 });
+  static readonly S64 = Img.create({ width: 64, height: 64 });
+  static readonly S68 = Img.create({ width: 68, height: 68 });
+  static readonly S72 = Img.create({ width: 72, height: 72 });
+  static readonly S80 = Img.create({ width: 80, height: 80 });
+  static readonly S88 = Img.create({ width: 88, height: 88 });
+  static readonly S96 = Img.create({ width: 96, height: 96 });
+  static readonly S100 = Img.create({ width: 100, height: 100 });
+  static readonly S120 = Img.create({ width: 120, height: 120 });
+  static readonly S140 = Img.create({ width: 140, height: 140 });
+}

package/src/component/Img/index.ts

@@ -0,0 +1,2 @@
+export * from './ImageConfig';
+export * from './Img';

package/src/component/Layout/AdaptiveHeightConstraintView.tsx

@@ -0,0 +1,53 @@
+import React, { useState, useMemo } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { View } from 'react-native';
+
+const UNDETERMINED = 'UNDETERMINED';
+const TRUE = 'TRUE';
+const FALSE = 'FALSE';
+type UNDETERMINED_BOOL = 'UNDETERMINED' | 'TRUE' | 'FALSE';
+
+export type AdaptiveHeightConstriantViewProps = {
+  ifElement?: React.ReactElement;
+  elseElement?: React.ReactElement;
+  minHeight?: number;
+  maxHeight?: number;
+  style?: StyleProp<ViewStyle>;
+};
+const AdaptiveHeightConstraintView = ({
+  elseElement,
+  ifElement,
+  minHeight = -99999,
+  maxHeight = 99999,
+  style,
+}: AdaptiveHeightConstriantViewProps) => {
+  const [layoutHeight, setLayoutHeight] = useState(-1);
+
+  const renderState: UNDETERMINED_BOOL = useMemo(() => {
+    if (layoutHeight === -1) {
+      return UNDETERMINED;
+    }
+    if (layoutHeight >= minHeight && layoutHeight <= maxHeight) {
+      return TRUE;
+    } else {
+      return FALSE;
+    }
+  }, [layoutHeight, minHeight, maxHeight]);
+
+  return (
+    <View
+      style={style}
+      onLayout={({
+        nativeEvent: {
+          layout: { height },
+        },
+      }) => {
+        setLayoutHeight(height);
+      }}
+    >
+      {renderState === UNDETERMINED ? null : renderState === TRUE ? ifElement : elseElement}
+    </View>
+  );
+};
+
+export { AdaptiveHeightConstraintView };

package/src/component/Layout/AdaptiveWidthConstraintView.tsx

@@ -0,0 +1,53 @@
+import React, { useState, useMemo } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { View } from 'react-native';
+
+const UNDETERMINED = 'UNDETERMINED';
+const TRUE = 'TRUE';
+const FALSE = 'FALSE';
+type UNDETERMINED_BOOL = 'UNDETERMINED' | 'TRUE' | 'FALSE';
+
+export type AdaptiveWidthConstriantViewProps = {
+  ifElement?: React.ReactElement;
+  elseElement?: React.ReactElement;
+  minWidth?: number;
+  maxWidth?: number;
+  style?: StyleProp<ViewStyle>;
+};
+const AdaptiveWidthConstraintView = ({
+  elseElement,
+  ifElement,
+  minWidth = -99999,
+  maxWidth = 99999,
+  style,
+}: AdaptiveWidthConstriantViewProps) => {
+  const [layoutWidth, setLayoutWidth] = useState(-1);
+
+  const renderState: UNDETERMINED_BOOL = useMemo(() => {
+    if (layoutWidth === -1) {
+      return UNDETERMINED;
+    }
+    if (layoutWidth >= minWidth && layoutWidth <= maxWidth) {
+      return TRUE;
+    } else {
+      return FALSE;
+    }
+  }, [layoutWidth, minWidth, maxWidth]);
+
+  return (
+    <View
+      style={style}
+      onLayout={({
+        nativeEvent: {
+          layout: { width },
+        },
+      }) => {
+        setLayoutWidth(width);
+      }}
+    >
+      {renderState === UNDETERMINED ? null : renderState === TRUE ? ifElement : elseElement}
+    </View>
+  );
+};
+
+export { AdaptiveWidthConstraintView };