RN: 빌트인 컴포넌트 래핑으로 기본 스타일 생성

Text 컴포넌트 래핑으로
최소 폰트 사이즈를 16, 기본 color 를 black 으로 하는 예제

components/common/Text.tsx

import React from 'react';
import {Text as RNText, TextProps as RNTextProps} from 'react-native';

interface TextProps extends RNTextProps {
  children?: React.ReactNode;
}

const Text: React.FC<TextProps> = ({style, children, ...props}) => {
  const defaultStyle = {
    color: '#000', 
  };

// 배열 대응을 위해 flat
  const flatStyle = Array.isArray(style) ? Object.assign({}, ...style) : style;
  const userFontSize = flatStyle?.fontSize;


  const finalFontSize = userFontSize && userFontSize > 16 ? userFontSize : 16;

  return (
    <RNText style={[defaultStyle, style, {fontSize: finalFontSize}]} {...props}>
      {children}
    </RNText>
  );
};

export default Text;

components/common/index.ts

import Text from './Text';

export const Custom = {
  Text,
};

export {default as Text} from './Text';

사용

import {Custom} from '@/components/common'

<Custom.Text>hi<Custom.Text>

기존 Text -> CustomText 로 변경

cd [프로젝트 path] &&
sed -i '' 's/<Text/<Custom.Text/g; s/<\/Text>/<\/Custom.Text>/g' src/screen/[수정할 컴포넌트 path]