React Native Svg 사용하기 (react-native-svg)

React Native 에서 D3.js를 사용하기 위해 찾아보던중 react-native-svg 라는걸 알게되었다. 

react-native-svg 는 React Native에서 Svg를 사용할 수 있는 라이브러리이다. 

npm i react-native-svg

프로젝트 폴더에 react-native-svg를 설치한다. 

react-native link react-native-svg

프로젝트에 해당라이브러리를 link 해준다. 

Manual Linking IOS (수동으로 설정할경우 절차, 위에 절차를 거쳤을경우는 따로 해줄필요 없음)

Xcode에서 해당프로젝트를 Open 한다.

Libraries 에서 마우스 오른쪽버튼을 눌르고 Add Files to 프로젝트명 선택한다.

프로젝트명/node_modules/react-native-svg/ios 에서 RNSVG.xcodeproj file 을 선택하여 Add 버튼을 선택한다. 

프로젝트 선택후 Build Phases 탭을선택한후 Link Binary with Libraries 항목에서 + 선택하여  libRNSVG.a 선택한다. 

import Svg,{
    Circle,
    Ellipse,
    G,
    Text,
    TSpan,
    TextPath,
    Path,
    Polygon,
    Polyline,
    Line,
    Rect,
    Use,
    Image,
    Symbol,
    Defs,
    LinearGradient,
    RadialGradient,
    Stop,
    ClipPath,
    Pattern,
    Mask,
} from 'react-native-svg';
import React, { Component } from 'react';
import { View, StyleSheet, Dimensions } from 'react-native';
// Percentages work in plain react-native but aren't supported in Expo yet, workaround with this or onLayout
const { width, height } = Dimensions.get('window');
 
class SvgExample extends Component {
 
    render () {
      return (
        <Svg style={{flex: 1, alignSelf: 'stretch'}} viewBox='0 0 1000 1000'>
        <Rect
          x='50'
          y='50'
          width='900'
          height='900' />
      </Svg>
      )
    }
 
  }
 
  export default SvgExample;

[Sample 예제]

출처 : https://github.com/react-native-community/react-native-svg