Mobile Application Development
React Native

React Native: Panduan Lengkap dari Instalasi hingga Hello World

React Native adalah framework open-source yang dikembangkan oleh Meta (Facebook) untuk membangun aplikasi mobile native menggunakan JavaScript dan React. Dengan React Native, kamu bisa membuat aplikasi yang berjalan di Android dan iOS menggunakan satu codebase, sambil tetap mendapatkan performa dan feel aplikasi native.

Apa itu React Native?

React Native memungkinkan developer web yang sudah familiar dengan React untuk membangun aplikasi mobile tanpa harus mempelajari bahasa native seperti Kotlin/Java atau Swift. Framework ini menggunakan komponen native sebenarnya, bukan WebView, sehingga aplikasi yang dihasilkan memiliki performa mendekati aplikasi native murni.

Keunggulan React Native:

  • Cross-platform: Satu codebase untuk Android dan iOS
  • Hot Reload: Lihat perubahan instantly tanpa rebuild
  • React Ecosystem: Gunakan library React yang sudah familiar
  • Native Performance: Menggunakan komponen native asli
  • Large Community: Dukungan komunitas yang sangat besar
  • Fast Development: Development cycle yang lebih cepat

Kapan Menggunakan React Native:

  • Ingin develop untuk Android dan iOS bersamaan
  • Team sudah familiar dengan JavaScript/React
  • Butuh time-to-market yang cepat
  • Budget terbatas untuk hire native developers
  • Aplikasi tidak terlalu bergantung pada fitur platform-specific

Persiapan Sistem

Sebelum memulai, pastikan sistem kamu memenuhi requirements:

Untuk Windows:

  • Windows 10 atau 11 (64-bit)
  • Minimum 8 GB RAM (16 GB direkomendasikan)
  • 20 GB ruang disk kosong
  • Node.js (LTS version)
  • Android Studio untuk Android development

Untuk macOS:

  • macOS 10.15 (Catalina) atau lebih baru
  • Minimum 8 GB RAM (16 GB direkomendasikan)
  • 30 GB ruang disk kosong
  • Node.js (LTS version)
  • Xcode untuk iOS development
  • CocoaPods (untuk iOS dependencies)
  • Android Studio untuk Android development (optional)

Untuk Linux:

  • Ubuntu 18.04 LTS atau distribusi equivalent
  • Minimum 8 GB RAM
  • 20 GB ruang disk kosong
  • Node.js (LTS version)
  • Android Studio untuk Android development

Bagian 1: Instalasi Node.js

React Native membutuhkan Node.js sebagai runtime environment.

Langkah 1: Download Node.js

Buka browser dan kunjungi https://nodejs.org (opens in a new tab).

Homepage Node.js menampilkan dua versi download

Kamu akan melihat dua versi:

  • LTS (Long Term Support): Recommended untuk production
  • Current: Latest features

Untuk React Native, download versi LTS (misalnya v20.x.x atau v18.x.x).

Langkah 2: Install Node.js

Windows: Jalankan installer .msi yang telah didownload.

Node.js Setup Wizard di Windows

  • Klik "Next" untuk melanjutkan
  • Accept license agreement
  • Pilih lokasi instalasi (gunakan default)
  • Pastikan "Add to PATH" tercentang
  • Klik "Install"

macOS: Jalankan installer .pkg yang telah didownload.

Node.js installer di macOS

  • Klik "Continue" dan "Install"
  • Masukkan password Mac jika diminta
  • Tunggu hingga instalasi selesai

Linux (Ubuntu/Debian):

# Update package index
sudo apt update
 
# Install Node.js dari NodeSource repository
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt-get install -y nodejs
 
# Verify installation
node --version
npm --version

Langkah 3: Verifikasi Instalasi

Buka Terminal (macOS/Linux) atau Command Prompt (Windows) dan jalankan:

node --version

Terminal menampilkan versi Node.js

Output seharusnya menampilkan versi Node.js, misalnya v20.10.0.

Cek juga npm (Node Package Manager):

npm --version

Output akan menampilkan versi npm, misalnya 10.2.3.

Bagian 2: Setup React Native Development Environment

Langkah 4: Install React Native CLI

React Native menyediakan dua cara untuk create project:

  1. Expo Go (Managed workflow) - Easier, tapi terbatas
  2. React Native CLI (Bare workflow) - Full control

Kita akan menggunakan React Native CLI untuk pembelajaran yang lebih mendalam.

Install React Native CLI globally:

npm install -g react-native-cli

Terminal menampilkan instalasi React Native CLI

Note: Dengan React Native terbaru, kamu bisa langsung menggunakan npx react-native tanpa install CLI global.

Langkah 5: Install Watchman (macOS/Linux)

Watchman adalah tool dari Facebook untuk watching file changes. Sangat direkomendasikan untuk React Native.

macOS (menggunakan Homebrew):

Jika belum punya Homebrew, install dulu:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Install Watchman:

brew install watchman

Terminal menampilkan instalasi Watchman

Linux:

# Install dependencies
sudo apt-get install -y autoconf automake build-essential python3-dev libtool pkg-config
 
# Clone dan build Watchman
cd /tmp
git clone https://github.com/facebook/watchman.git
cd watchman
git checkout v2023.11.20.00
./autogen.sh
./configure
make
sudo make install

Verifikasi:

watchman --version

Langkah 6: Setup Android Development Environment

Bahkan jika kamu develop di macOS, kamu tetap perlu Android Studio untuk build aplikasi Android.

Install Java Development Kit (JDK)

React Native membutuhkan JDK 17 atau 11.

Windows/macOS: Download dari Adoptium (opens in a new tab) (formerly AdoptOpenJDK).

Adoptium website dengan download options

Pilih:

  • Version: JDK 17 (LTS)
  • Operating System: Sesuai OS kamu

Install sesuai instruksi installer.

macOS (via Homebrew):

brew install openjdk@17

Linux:

sudo apt install openjdk-17-jdk

Verifikasi:

java --version

Terminal menampilkan versi Java

Install Android Studio

Download Android Studio dari developer.android.com/studio (opens in a new tab).

Android Studio download page

Install Android Studio mengikuti wizard seperti yang dijelaskan di tutorial Android Studio sebelumnya.

Configure Android SDK

Setelah Android Studio terinstall, buka SDK Manager:

  1. Buka Android Studio
  2. Klik "More Actions" > "SDK Manager"

Android Studio welcome screen dengan SDK Manager option

Di SDK Manager:

SDK Platforms Tab:

  • Centang Android 13.0 (Tiramisu) - API Level 33
  • Centang Show Package Details
  • Pastikan tercentang:
    • Android SDK Platform 33
    • Intel x86 Atom_64 System Image atau Google APIs Intel x86 Atom System Image

SDK Manager menampilkan SDK Platforms

SDK Tools Tab:

  • Centang Show Package Details
  • Expand Android SDK Build-Tools
  • Centang versi 33.0.0 atau 34.0.0

SDK Manager menampilkan SDK Tools

Klik "Apply" untuk download dan install SDK components.

Set Environment Variables

React Native perlu tahu lokasi Android SDK.

Windows:

  1. Buka "System Properties" > "Advanced" > "Environment Variables"
  2. Klik "New" untuk user variables
  3. Tambahkan:
    • Variable name: ANDROID_HOME
    • Variable value: %LOCALAPPDATA%\Android\Sdk

Environment Variables dialog di Windows

  1. Edit PATH variable, tambahkan:
    • %LOCALAPPDATA%\Android\Sdk\platform-tools
    • %LOCALAPPDATA%\Android\Sdk\tools
    • %LOCALAPPDATA%\Android\Sdk\tools\bin

macOS/Linux:

Edit file .zshrc (atau .bashrc jika menggunakan bash):

# Buka editor
nano ~/.zshrc
 
# Tambahkan di akhir file:
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
 
# Save (Ctrl+O, Enter, Ctrl+X)
 
# Reload configuration
source ~/.zshrc

Terminal editor menampilkan konfigurasi ANDROID_HOME

Verifikasi:

echo $ANDROID_HOME
adb --version

Langkah 7: Setup iOS Development Environment (macOS Only)

Jika kamu menggunakan macOS, kamu bisa develop untuk iOS.

Install Xcode

Install Xcode dari App Store seperti dijelaskan di tutorial Xcode sebelumnya.

Setelah install, buka Xcode dan accept license agreement.

Install Xcode Command Line Tools

xcode-select --install

Dialog instalasi Xcode Command Line Tools

Klik "Install" dan tunggu hingga selesai.

Install CocoaPods

CocoaPods adalah dependency manager untuk iOS projects.

sudo gem install cocoapods

Terminal menampilkan instalasi CocoaPods

Verifikasi:

pod --version

Bagian 3: Membuat Project React Native

Langkah 8: Create New Project

Buka Terminal dan navigate ke folder tempat kamu ingin membuat project.

cd ~/Documents
npx react-native@latest init HelloWorld

Terminal menampilkan proses pembuatan project

Command ini akan:

  1. Download template React Native terbaru
  2. Create project dengan nama "HelloWorld"
  3. Install dependencies (npm/yarn)
  4. Setup iOS pods (jika di macOS)

Proses ini memakan waktu beberapa menit tergantung koneksi internet.

Output yang diharapkan:

✔ Downloading template
✔ Copying template
✔ Processing template
✔ Installing dependencies
✔ Installing CocoaPods dependencies (iOS only)

Run instructions for Android:
  • Have an Android emulator running or device connected
  • cd HelloWorld && npx react-native run-android

Run instructions for iOS:
  • cd HelloWorld && npx react-native run-ios

Langkah 9: Explore Project Structure

Navigate ke folder project:

cd HelloWorld

Buka project di VS Code atau editor favorit:

code .

VS Code menampilkan struktur project React Native

Struktur Project:

HelloWorld/
├── android/                 # Android native project
├── ios/                     # iOS native project
├── node_modules/            # Dependencies
├── .gitignore
├── App.tsx                  # Main App component
├── app.json                 # App configuration
├── babel.config.js          # Babel configuration
├── index.js                 # Entry point
├── metro.config.js          # Metro bundler config
├── package.json             # Dependencies list
├── tsconfig.json            # TypeScript config
└── README.md

File-file Penting:

  • App.tsx: Main component aplikasi
  • index.js: Entry point yang register app
  • package.json: Dependencies dan scripts
  • android/: Native Android code
  • ios/: Native iOS code

Langkah 10: Memahami App.tsx

Buka file App.tsx di editor.

VS Code editor menampilkan App.tsx

import React from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';
 
import {
  Colors,
  DebugInstructions,
  Header,
  LearnMoreLinks,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
 
function App(): React.JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';
 
  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };
 
  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar
        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
        backgroundColor={backgroundStyle.backgroundColor}
      />
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        style={backgroundStyle}>
        <Header />
        <View style={styles.body}>
          <View style={styles.sectionContainer}>
            <Text style={styles.sectionTitle}>Step One</Text>
            <Text style={styles.sectionDescription}>
              Edit <Text style={styles.highlight}>App.tsx</Text> to change this
              screen and then come back to see your edits.
            </Text>
          </View>
          <LearnMoreLinks />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}
 
const styles = StyleSheet.create({
  body: {
    backgroundColor: Colors.white,
  },
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
  },
  highlight: {
    fontWeight: '700',
  },
});
 
export default App;

Penjelasan Code:

  • SafeAreaView: Wrapper untuk handle notch/safe area di devices modern
  • ScrollView: Scrollable container
  • StatusBar: Mengatur status bar appearance
  • Text: Component untuk display text
  • View: Container component (seperti div di web)
  • StyleSheet: API untuk create styles
  • useColorScheme: Hook untuk detect dark/light mode

Langkah 11: Simplify App.tsx untuk Hello World

Mari kita simplify code untuk Hello World yang lebih clean.

Replace seluruh content App.tsx dengan:

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  Text,
  View,
  StatusBar,
} from 'react-native';
 
function App(): React.JSX.Element {
  return (
    <SafeAreaView style={styles.container}>
      <StatusBar barStyle="light-content" backgroundColor="#4A90E2" />
      <View style={styles.content}>
        <Text style={styles.title}>Hello World!</Text>
        <Text style={styles.subtitle}>
          Selamat datang di React Native Development
        </Text>
        <Text style={styles.description}>
          Build native apps dengan JavaScript & React
        </Text>
      </View>
    </SafeAreaView>
  );
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#4A90E2',
  },
  content: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  title: {
    fontSize: 48,
    fontWeight: 'bold',
    color: '#FFFFFF',
    marginBottom: 16,
  },
  subtitle: {
    fontSize: 20,
    color: '#FFFFFF',
    textAlign: 'center',
    marginBottom: 8,
  },
  description: {
    fontSize: 16,
    color: '#E8F4FD',
    textAlign: 'center',
  },
});
 
export default App;

VS Code menampilkan simplified App.tsx

Save file (Cmd/Ctrl + S).

Bagian 4: Running di Android

Langkah 12: Start Android Emulator

Buka Android Studio dan launch AVD yang sudah dibuat (lihat tutorial Android Studio).

Atau via command line:

# List available emulators
emulator -list-avds
 
# Start specific emulator
emulator -avd Pixel_6_API_33

Android emulator running di desktop

Tunggu hingga emulator fully booted.

Langkah 13: Start Metro Bundler

Metro adalah JavaScript bundler untuk React Native. Buka terminal di project directory:

npx react-native start

Terminal menampilkan Metro bundler running

Metro bundler akan:

  • Bundle JavaScript code
  • Watch for file changes
  • Enable hot reload

Jangan close terminal ini! Metro harus tetap running.

Langkah 14: Run di Android

Buka terminal baru (jangan close Metro bundler) dan run:

npx react-native run-android

Terminal menampilkan build process Android

Proses ini akan:

  1. Build Android app dengan Gradle
  2. Install APK ke emulator
  3. Launch aplikasi
  4. Connect ke Metro bundler

Build pertama memakan waktu 5-10 menit. Build berikutnya lebih cepat karena caching.

Langkah 15: App Running di Android

Setelah build selesai, aplikasi akan launch di emulator.

React Native app running di Android emulator

Selamat! Aplikasi React Native pertama kamu berjalan di Android. Kamu akan melihat:

  • Background biru
  • "Hello World!" dalam text besar
  • Subtitle dan description

Langkah 16: Test Hot Reload

Salah satu fitur powerful React Native adalah Fast Refresh (hot reload).

Di App.tsx, ubah text:

<Text style={styles.title}>Hello React Native!</Text>

Save file. Dalam beberapa detik, aplikasi di emulator akan otomatis update tanpa rebuild!

App di emulator dengan text yang diupdate

Shortcut Berguna di Emulator:

  • R key (double tap): Reload app manually
  • D key: Open developer menu
  • Cmd/Ctrl + M: Open developer menu (alternative)

Langkah 17: Developer Menu

Shake device atau press Cmd + M (macOS) / Ctrl + M (Windows/Linux) untuk open developer menu.

Developer menu di React Native

Options:

  • Reload: Reload app manually
  • Debug: Open Chrome DevTools
  • Enable Fast Refresh: Toggle hot reload
  • Show Inspector: Inspect elements
  • Show Perf Monitor: Performance metrics

Bagian 5: Running di iOS (macOS Only)

Langkah 18: Install iOS Dependencies

Navigate ke folder ios dan install CocoaPods dependencies:

cd ios
pod install
cd ..

Terminal menampilkan pod install process

Ini akan download dan install iOS dependencies yang diperlukan.

Langkah 19: Run di iOS Simulator

Pastikan Metro bundler masih running (dari Langkah 13), kemudian di terminal baru:

npx react-native run-ios

Terminal menampilkan build process iOS

Proses ini akan:

  1. Build iOS app dengan Xcode
  2. Launch iOS Simulator
  3. Install app ke simulator
  4. Connect ke Metro bundler

Default simulator adalah iPhone 15. Untuk specify simulator lain:

# List available simulators
xcrun simctl list devices
 
# Run on specific simulator
npx react-native run-ios --simulator="iPhone 15 Pro"

Langkah 20: App Running di iOS

iOS Simulator akan launch dan menampilkan aplikasi.

React Native app running di iOS simulator

Aplikasi yang sama berjalan di iOS dengan styling dan behavior yang konsisten!

Langkah 21: Test Hot Reload di iOS

Ubah code di App.tsx dan save. Fast refresh juga bekerja di iOS simulator.

iOS Simulator Shortcuts:

  • Cmd + R: Reload app
  • Cmd + D: Developer menu
  • Cmd + T: Toggle slow animations
  • Cmd + K: Toggle soft keyboard

Bagian 6: Running di Physical Devices

Android Physical Device

Langkah 22: Enable USB Debugging

Di Android device:

  1. Enable Developer Options (tap Build Number 7x)
  2. Enable USB Debugging
  3. Connect device via USB
# Check if device is detected
adb devices

Terminal menampilkan connected Android device

Langkah 23: Run on Device

npx react-native run-android

React Native akan otomatis detect physical device dan install app ke device (bukan emulator).

App running di physical Android device

iOS Physical Device

Langkah 24: Open in Xcode

open ios/HelloWorld.xcworkspace

Xcode akan membuka project.

Langkah 25: Configure Signing

Di Xcode:

  1. Select project "HelloWorld" di navigator
  2. Select target "HelloWorld"
  3. Tab "Signing & Capabilities"
  4. Check "Automatically manage signing"
  5. Select your Team (Apple ID)

Xcode menampilkan signing configuration

Langkah 26: Select Device dan Run

  1. Connect iPhone via USB
  2. Select device dari device dropdown di Xcode toolbar
  3. Click Run button (▶)

App running di physical iPhone

Bagian 7: React Native Fundamentals

Components

React Native menggunakan native components yang di-wrap dalam JavaScript.

Core Components:

import {
  View,        // Container (seperti div)
  Text,        // Text display
  Image,       // Images
  ScrollView,  // Scrollable container
  TextInput,   // Input field
  Button,      // Button
  TouchableOpacity,  // Touchable wrapper
  FlatList,    // Optimized list
} from 'react-native';

Styling

React Native menggunakan JavaScript objects untuk styling, mirip CSS tapi dengan camelCase.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5F5F5',
    padding: 20,
  },
  text: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333',
    marginBottom: 10,
  },
});

Flexbox Layout:

React Native menggunakan Flexbox untuk layout (seperti CSS Flexbox).

<View style={{
  flexDirection: 'row',      // horizontal layout
  justifyContent: 'center',  // center horizontally
  alignItems: 'center',      // center vertically
}}>
  <Text>Item 1</Text>
  <Text>Item 2</Text>
</View>

State Management

import React, {useState} from 'react';
import {View, Text, Button} from 'react-native';
 
function Counter() {
  const [count, setCount] = useState(0);
 
  return (
    <View>
      <Text>Count: {count}</Text>
      <Button 
        title="Increment" 
        onPress={() => setCount(count + 1)} 
      />
    </View>
  );
}

User Input

import React, {useState} from 'react';
import {View, TextInput, Text, StyleSheet} from 'react-native';
 
function InputExample() {
  const [text, setText] = useState('');
 
  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="Enter your name"
        value={text}
        onChangeText={setText}
      />
      <Text>Hello, {text}!</Text>
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: {
    padding: 20,
  },
  input: {
    height: 40,
    borderColor: '#CCC',
    borderWidth: 1,
    borderRadius: 5,
    paddingHorizontal: 10,
    marginBottom: 10,
  },
});

Lists

import React from 'react';
import {FlatList, Text, View, StyleSheet} from 'react-native';
 
function ListExample() {
  const data = [
    {id: '1', title: 'Item 1'},
    {id: '2', title: 'Item 2'},
    {id: '3', title: 'Item 3'},
  ];
 
  return (
    <FlatList
      data={data}
      keyExtractor={item => item.id}
      renderItem={({item}) => (
        <View style={styles.item}>
          <Text>{item.title}</Text>
        </View>
      )}
    />
  );
}
 
const styles = StyleSheet.create({
  item: {
    padding: 20,
    borderBottomWidth: 1,
    borderBottomColor: '#CCC',
  },
});

Troubleshooting Common Issues

Issue 1: Metro Bundler Port Already in Use

Error: Port 8081 already in use

Solusi:

# Kill process on port 8081
# macOS/Linux:
lsof -ti:8081 | xargs kill
 
# Windows:
netstat -ano | findstr :8081
taskkill /PID <PID_NUMBER> /F
 
# Or use different port
npx react-native start --port 8088

Issue 2: Android Build Failed - SDK Not Found

Error: SDK location not found

Solusi:

  1. Pastikan ANDROID_HOME environment variable sudah set
  2. Create local.properties file di folder android/:
sdk.dir=/Users/USERNAME/Library/Android/sdk  # macOS
sdk.dir=C:\\Users\\USERNAME\\AppData\\Local\\Android\\Sdk  # Windows

Issue 3: iOS Build Failed - Command PhaseScriptExecution Failed

Solusi:

cd ios
pod deintegrate
pod install
cd ..
npx react-native run-ios

Issue 4: Red Screen - Unable to Load Script

Error: Metro bundler tidak bisa connect

Solusi:

  1. Pastikan Metro bundler running
  2. Reload app (double tap R di Android, Cmd+R di iOS)
  3. Check firewall - allow port 8081
  4. For device: ensure same WiFi network

Issue 5: White Screen on Launch

Solusi:

  1. Clear cache dan rebuild:
# Clear React Native cache
npx react-native start --reset-cache
 
# Android
cd android && ./gradlew clean && cd ..
 
# iOS
cd ios && rm -rf build && pod install && cd ..
  1. Delete node_modules dan reinstall:
rm -rf node_modules
npm install

Issue 6: Gradle Build Failed (Android)

Solusi:

  1. Clear Gradle cache:
cd android
./gradlew clean
cd ..
  1. Check android/gradle.properties - increase memory:
org.gradle.jvmargs=-Xmx4096m -XX:MaxPermSize=512m

Issue 7: CocoaPods Installation Failed (iOS)

Solusi:

# Update CocoaPods
sudo gem install cocoapods
 
# Clean pods cache
cd ios
pod cache clean --all
rm -rf Pods Podfile.lock
pod install
cd ..

Tips dan Best Practices

1. Development Shortcuts

Android Emulator:

  • Double tap R: Reload
  • Cmd/Ctrl + M: Developer menu

iOS Simulator:

  • Cmd + R: Reload
  • Cmd + D: Developer menu
  • Cmd + K: Toggle keyboard

2. Debugging

React Native Debugger:

Install standalone debugger:

brew install --cask react-native-debugger  # macOS
# Or download from https://github.com/jhen0409/react-native-debugger

Enable debugging:

  1. Open Developer Menu
  2. Select "Debug"
  3. React Native Debugger will connect automatically

Console Logs:

console.log('Debug message');
console.warn('Warning message');
console.error('Error message');

Logs muncul di Metro bundler terminal.

3. Performance Optimization

  • Use FlatList instead of ScrollView untuk long lists
  • Implement shouldComponentUpdate atau use React.memo
  • Avoid inline functions di render (use useCallback)
  • Optimize images - use appropriate sizes
  • Enable Hermes engine untuk better performance

Enable Hermes:

Di android/app/build.gradle:

project.ext.react = [
    enableHermes: true  // Change to true
]

Di ios/Podfile:

:hermes_enabled => true

4. Code Organization

src/
├── components/         # Reusable components
│   ├── Button.tsx
│   └── Card.tsx
├── screens/           # Screen components
│   ├── HomeScreen.tsx
│   └── ProfileScreen.tsx
├── navigation/        # Navigation configuration
│   └── AppNavigator.tsx
├── services/          # API services
│   └── api.ts
├── utils/            # Utility functions
│   └── helpers.ts
├── types/            # TypeScript types
│   └── index.ts
└── App.tsx

5. Navigation

Install React Navigation (most popular navigation library):

npm install @react-navigation/native
npm install react-native-screens react-native-safe-area-context
npm install @react-navigation/native-stack
 
# iOS only
cd ios && pod install && cd ..

Basic setup:

import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
 
const Stack = createNativeStackNavigator();
 
function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

6. State Management

Untuk app yang lebih complex, gunakan state management library:

Redux Toolkit (recommended):

npm install @reduxjs/toolkit react-redux

Zustand (lighter alternative):

npm install zustand

Recoil:

npm install recoil

7. TypeScript Best Practices

  • Define types untuk props dan state
  • Use interfaces untuk object shapes
  • Leverage type inference
  • Use strict mode
interface Props {
  title: string;
  onPress: () => void;
  disabled?: boolean;
}
 
const Button: React.FC<Props> = ({title, onPress, disabled = false}) => {
  return (
    <TouchableOpacity onPress={onPress} disabled={disabled}>
      <Text>{title}</Text>
    </TouchableOpacity>
  );
};

Next Steps

1. Master React Native Basics

  • All core components
  • Flexbox layout system
  • Handling user input
  • Lists dan ScrollViews
  • Images dan assets
  • Platform-specific code

2. Navigation

  • React Navigation library
  • Stack navigation
  • Tab navigation
  • Drawer navigation
  • Deep linking

3. Networking

  • Fetch API
  • Axios
  • REST API integration
  • GraphQL dengan Apollo Client
  • Handling authentication

4. State Management

  • Context API
  • Redux Toolkit
  • Zustand
  • Recoil
  • MobX

5. Native Modules

  • Using third-party native modules
  • Creating custom native modules
  • Bridging native code
  • Platform-specific APIs

6. Advanced Topics

  • Animations (Animated API, Reanimated)
  • Gestures (Gesture Handler)
  • Maps dan Location
  • Camera dan Media
  • Push notifications
  • Background tasks
  • In-app purchases

7. Testing

  • Jest untuk unit tests
  • React Native Testing Library
  • Detox untuk E2E tests
  • Component testing

8. Deployment

  • Building release APK/AAB (Android)
  • Building IPA (iOS)
  • App Store submission
  • Play Store submission
  • OTA updates dengan CodePush

Resources

Official Documentation

Learning Platforms

Communities

Popular Libraries

Tools

Penutup

Selamat! Kamu telah berhasil setup React Native development environment dan membuat aplikasi Hello World pertama yang berjalan di Android dan iOS. React Native membuka peluang untuk membuat aplikasi mobile cross-platform dengan menggunakan skill JavaScript dan React yang mungkin sudah kamu kuasai.

React Native memiliki ecosystem yang sangat besar dan aktif. Ada ribuan libraries dan tools yang bisa membantu development. Community-nya juga sangat helpful dan welcoming untuk beginners.

Kunci untuk master React Native:

  1. Pahami JavaScript dan React dengan baik
  2. Practice consistently dengan build real projects
  3. Learn native concepts - basic understanding tentang Android/iOS membantu
  4. Explore libraries - jangan reinvent the wheel
  5. Join community - banyak resources dan bantuan tersedia
  6. Stay updated - React Native terus berkembang

Yang terpenting, jangan takut bereksperimen dan membuat kesalahan. Setiap error adalah learning opportunity. Build projects yang kamu passionate about, dan enjoy the journey!

Happy Coding!

XCode dengan SwiftFlutter