React Native (Multiplatform)

Cara Instal dan Menjalankan React Native Multi-Platform 

Sebelum mulai, pastikan kita sudah menginstall Node.js.

Expo CLI terbaru membutuhkan Node untuk menjalankan Metro Bundler dan server development.

Cek versi Node dengan:

node -v

Langkah-Langkah Instalasi

1. Coba Instal Expo CLI Metode Lama (Deprecated)

    Dulu Expo diinstal secara global:

         npm install -g expo-cli

    Namun pada Node ≥17, metode ini sudah tidak kompatibel. Biasanya muncul  banyak peringatan deprecated.

    Instalasi expo-cli lama (deprecated)

2. Peringatan Ketika Menjalankan Expo CLI Lama

    Saat menjalankan perintah:

        expo init learn

    Akan muncul pesan seperti:

       ⚠️ The global expo-cli package has been deprecated

        The legacy expo-cli does not support Node 17+

        Migrate to the new local Expo CLI

    Selain itu akan muncul error dependency dan project gagal dibuat.

    Error Expo CLI lama

3. Hapus Expo CLI Lama & Bersihkan Cache

    Agar tidak bentrok dengan versi terbaru, hapus dan clear cache:

        npm uninstall -g expo-cli

        npm cache clean --force

    Proses uninstall expo-cli lama

4. Instal Expo CLI Versi Baru

    Gunakan npx untuk membuat project Expo:

        npx create-expo-app learn

    Setelah selesai akan muncul pesan:

        "Your project is ready!"

    Instalasi Expo versi baru berhasil

5. Masuk ke Folder Project

        cd learn

    Struktur project di VS Code akan terlihat seperti ini:

        learn/

        ├── .expo/

        ├── .vscode/

        ├── app/

        │   ├── (tabs)/

        │   │   ├── index.tsx

        │   │   ├── explore.tsx

        │   │   └── _layout.tsx

        ├── assets/

        ├── components/

        ├── constants/

        ├── hooks/

        ├── node_modules/

        └── scrips/

    Tampilan struktur folder VS Code

6. Menjalankan Project Expo

    a) Jalankan Metro Bundler

                npx expo start

          Akan muncul QR Code dan opsi shortcut

    b) Jalankan di Browser

                npm run web

           Tampilan awal di browser

7. Edit Tampilan Awal

    Buka:

        learn/app/(tabs)/index.tsx

    Ganti isi menjadi:

        import React from 'react';

        import { Text, View, StyleSheet } from 'react-native';

        export default function App() {

          return (

            <View style={styles.container}>

              <Text style={styles.text}>Hello World!</Text>

            </View>

          );

        }

        const styles = StyleSheet.create({

          container: {

            flex: 1,

            justifyContent: 'center',

            alignItems: 'center',

            backgroundColor: '#f0f0f0',

          },

          text: {

            fontSize: 32,

            fontWeight: 'bold',

            color: '#333',

          },

        });

            Edit file index.tsx

            Hasil tampilan

8. Jalankan di Perangkat Android (Opsional)

1. Install Expo Go di Android
2. Jalankan npx expo start
3. Scan QR Code via Expo Go

Kesimpulan

   npx expo start

• expo-cli global sudah tidak didukung
• Gunakan:

    npx create-expo-app

• Bisa jalan di Web, Android, dan iOS
• Kalau error: uninstall CLI lama, clear cache, buat project baru

React Native multi-platform dengan Expo berhasil dijalankan!