RN | NativeWind install

일어나 개발해야지·2024년 4월 5일

React

목록 보기

3/6

Intro

RN 프로젝트를 새로 셋팅하면서 TailWind를 사용하기위해서 NativeWind를 설치했다. 그러나코드에 className이 뜨는걸 확인하기 까지 삽질의 시간이 있었다.
NativeWind의 설치방법과 문제해결과정을 담았다.

Install comand

tailwind 를 react native에서 사용하기 위해서는 세개의 라이브러리가 필요하다.

$ yarn add nativewind 
$ yarn add tailwindcss 
$ yarn add react-native-reanimated (애니매이션)

RN 버전에 따라 호환 되는 라이브러리의 버전이 달라지며, 설정의 디테일도 달라진다. tailwind는 다른 라이브러리와 달리 설정 파일이 많은 편인데, 버전에 따라 내부 코드가 달라지다보니 초기 설정에 시간이 많이 소요되는 것 같다. 결론적으로 여러 버전에서 테스트 하며 내가 찾은 조합은 다음과 같다.

"react-native": "0.80.1",
"tailwindcss": "3.4.9",
"nativewind": "4.1.23",
"react-native-reanimated": "3.18.0"

Setting files

npx tailwindcss init 을 실행하면,
프로젝트 최상단에 파일이 하나 생성된다.
여기에 TailWind를 사용할 폴더의 경로를 추가해준다.

① tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./App.{js,jsx,ts,tsx}",
    "./src/**/*.{js,jsx,ts,tsx}"
  ],
  presets: [require("nativewind/preset")],
  theme: {
    extend: {},
  },
  plugins: [],
}

② babel.config.js

module.exports = {
  presets: ['module:@react-native/babel-preset', 'nativewind/babel'],
  plugins: [
    'react-native-reanimated/plugin',
  ],
}

babel.config.js의 변화는 Metro가 reset후에 반영되므로
터미널의 재실행이 필요하다

③ nativewind-env.d.ts (TypeScript에서 필요)

/// <reference types="nativewind/types" />

// NOTE: This file should not be edited and should be committed with your source code. It is generated by NativeWind.

④ metro.config.js

const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config')
const {withNativeWind} = require('nativewind/metro')

const config = mergeConfig(getDefaultConfig(__dirname), {
   /* your config */
})

module.exports = withNativeWind(config, {input: './global.css'})

⑤ global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

⑥ App.tsx

import './global.css';

function App() {

  return (
    <SafeAreaView className={'bg-pink-200'}>
      <StatusBar />
       <View>
          <Text>안녕하세요</Text>
      </View>
    </SafeAreaView>
  );
}

export default App;