[RN] 프로젝트 시작하기 (+svg 넣는법)

1. expo 설치

당연히 node 설치되어 있어야 함

npx create-expo-app@latest 폴더명

cd 폴더명

 

yarn 설치도 바로 하면 됨

 

2.  expo app 실행

npx expo satrt

// yarn
yarn start

 

3. 

npm run reset-project

---

svg 넣기

 

1. 라이브러리 설치

yarn add react-native-svg
yarn add --dev react-native-svg-transformer

 

 

2. Update the Metro Configuration

Open your metro.config.js

const { getDefaultConfig, mergeConfig } = require("@react-native/metro-config");

const defaultConfig = getDefaultConfig(__dirname);
const { assetExts, sourceExts } = defaultConfig.resolver;

/**
 * Metro configuration
 * https://facebook.github.io/metro/docs/configuration
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {
  transformer: {
    babelTransformerPath: require.resolve("react-native-svg-transformer"),
    unstable_allowRequireContext: true,
  },
  resolver: {
    assetExts: [...defaultConfig.resolver.assetExts, "svg"],
    sourceExts: [...sourceExts, "svg"],
  },
};

module.exports = mergeConfig(defaultConfig, config);

 

 

중요! Expo 사용하면 아래로 설정해야 함! 

const { getDefaultConfig } = require("expo/metro-config");

module.exports = (() => {
  const config = getDefaultConfig(__dirname);

  const { transformer, resolver } = config;

  config.transformer = {
    ...transformer,
    babelTransformerPath: require.resolve("react-native-svg-transformer/expo")
  };
  config.resolver = {
    ...resolver,
    assetExts: resolver.assetExts.filter((ext) => ext !== "svg"),
    sourceExts: [...resolver.sourceExts, "svg"]
  };

  return config;
})();

 

Error: Cannot find module '@react-native/metro-config' 에러 뜨면

yarn add @react-native/metro-config

 

2-1. 타입스크립트면 declarations.d.ts 파일 설정

declare module "*.svg" {
  import React from "react";
  import { SvgProps } from "react-native-svg";
  const content: React.FC<SvgProps>;
  export default content;
}

 

 

3. Svg 파일 넣고 컴포넌트처럼 사용하기

import React from 'react';
import { View, StyleSheet } from 'react-native';
import SampleImg from './assets/images/sample.svg'; // Adjust the path based on where the SVG is located

export default function App() {
  return (
    <View style={styles.container}>
      <SampleImg width={100} height={100} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});