Setup Project React Native with Expo and NativeWind

 Berikut step by step untuk setup project React Native dengan Expo :

1. Buat project menggunakan CLI seperti berikut:

npx create-expo-app@latest
   

2. Instal dependensi untuk SDK 50 dan diatasnya:

npx expo install expo-router react-native-safe-area-context react-native-screens expo-linking expo-constants expo-status-bar
   

Instal dependensi untuk SDK 49 dan dibawahnya:

npx expo install expo-router react-native-safe-area-context react-native-screens expo-linking expo-constants expo-status-bar react-native-gesture-handler
   

3. Modif isi dari file package.json untuk key "main":

{
  "main": "expo-router/entry"
}
   

3. Tambahkan key "scheme" pada file app.json:

{
  "scheme": "ganti-dengan-app-name"
}
   

Jika Anda mengembangkan aplikasi untuk web, instal dependensi berikut:

npx expo install react-native-web react-dom
   

Kemudian, aktifkan dukungan web Metro dengan menambahkan yang berikut ini pada file app.json Anda :

{
  "web": {
    "bundler": "metro"
  }
}
   

4. Pastikan Anda menggunakan babel-preset-expo sebagai "preset" :

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
  };
};
   

5. Hapus Cache Bundler dan runing react native expo:

npx expo start -c
   

6. Install NativeWind

npx expo install nativewind tailwindcss react-native-reanimated react-native-safe-area-context
   

7. Setup Tailwind CSS

Run npx tailwindcss init to create a tailwind.config.js file
   

8. Sesuaikan isi tailwind.config.js seperti berikut:

/** @type {import('tailwindcss').Config} */
module.exports = {
  // NOTE: Update this to include the paths to all of your component files.
  content: ["./app/**/*.{js,jsx,ts,tsx}"],
  presets: [require("nativewind/preset")],
  theme: {
    extend: {},
  },
  plugins: [],
}
   

9. Buat css file "global.css" dan tambahkan isinya seperti berikut:

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

10. Sesuaikan kembali file babel.config.js seperti berikut :

module.exports = function (api) {
  api.cache(true);
  return {
    presets: [
      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
      "nativewind/babel",
    ],
  };
};
   

11. Jika proyek Anda tidak ada file "metro.config.js" jalankan perintah berikut:

npx expo customize metro.config.js
   

12. Sesuaikan file "metro.config.js" seperti berikut:

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

const config = getDefaultConfig(__dirname);

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

13. Cara menggunakan NativeWind pada project tambahkan script berikut pada file _layout.jsx:

// Import your global CSS file
import "../global.css";
   

Sekian sharing ilmu dari saya, jika blog ini berguna bisa kalian share sebanyak-banyaknya.

Sebaik baik blog adalah blog yang bermanfaat bagi pembacanya