Home

React Native adalah framework yang dikembangkan oleh Facebook untuk membangun aplikasi mobile berbasis Android dan iOS menggunakan JavaScript dan React. Dengan React Native, pengembang dapat menulis satu kode yang dapat dijalankan di kedua platform tanpa harus membuat dua kode terpisah.

1. Persiapan Lingkungan Pengembangan

Sebelum mulai membuat aplikasi, pastikan Anda sudah menginstal beberapa perangkat lunak berikut:

• Node.js: Unduh dan instal dari nodejs.org

• Expo CLI (opsional, untuk pengembangan yang lebih cepat):

  npm install -g expo-cli

• React Native CLI (jika ingin menggunakan mode development tanpa Expo):

  npm install -g react-native-cli

• Android Studio (untuk emulator Android dan SDK Android)

• Xcode (untuk pengembangan iOS, hanya bisa di macOS)

2. Membuat Proyek React Native

Jika menggunakan Expo, jalankan perintah berikut untuk membuat proyek baru:

npx create-expo-app MyApp
cd MyApp
npm start

Jika menggunakan React Native CLI, jalankan perintah:

npx react-native init MyApp
cd MyApp
npx react-native start

3. Menjalankan Aplikasi di Emulator atau Perangkat Fisik

• Untuk menjalankan di emulator Android:

  npx react-native run-android

• Untuk menjalankan di emulator iOS (hanya di macOS):

  npx react-native run-ios

• Jika menggunakan Expo, cukup jalankan:

  npm start

  dan pindai QR Code dengan aplikasi Expo Go di perangkat Anda.

4. Membuat Komponen Sederhana

Buka file App.js dan ubah kode menjadi:

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

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Halo, React Native!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5f5f5',
  },
  text: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#333',
  },
});

export default App;

5. Menyusun Navigasi dengan React Navigation

Agar aplikasi memiliki navigasi antar halaman, kita bisa menggunakan react-navigation:

npm install @react-navigation/native
npm install react-native-screens react-native-safe-area-context react-native-gesture-handler react-native-reanimated react-native-vector-icons

Kemudian buat navigasi di App.js:

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { View, Text, Button } from 'react-native';

const HomeScreen = ({ navigation }) => (
  <View>
    <Text>Home Screen</Text>
    <Button title="Go to Details" onPress={() => navigation.navigate('Details')} />
  </View>
);

const DetailsScreen = () => (
  <View>
    <Text>Details Screen</Text>
  </View>
);

const Stack = createStackNavigator();

const App = () => (
  <NavigationContainer>
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Details" component={DetailsScreen} />
    </Stack.Navigator>
  </NavigationContainer>
);

export default App;

6. Membangun APK dan IPA

Untuk membangun APK Android:

cd android
./gradlew assembleRelease

Untuk membangun IPA iOS:

cd ios
xcodebuild -workspace MyApp.xcworkspace -scheme MyApp -sdk iphoneos -configuration Release

Kesimpulan

Dengan React Native, kita bisa membuat aplikasi Android dan iOS secara bersamaan dengan satu kode. Framework ini sangat cocok untuk pengembangan aplikasi mobile yang cepat dan efisien.