Membuat Dark Mode di React Native dengan Mudah

Membuat Dark Mode di React Native dengan Mudah
Membuat Dark Mode di React Native dengan Mudah


Dark mode telah menjadi fitur penting dalam aplikasi modern. Fitur ini tidak hanya membuat aplikasi terlihat lebih menarik, tetapi juga membantu menghemat daya baterai dan membuat tampilan lebih nyaman di mata pengguna saat digunakan di tempat gelap. Kali ini, KonsepKoding.com akan membahas langkah-langkah mudah untuk menambahkan dark mode ke aplikasi React Native Anda.

Mengapa Dark Mode Penting?

Dark mode memberikan pengalaman pengguna yang lebih baik, terutama di malam hari atau dalam kondisi minim cahaya. Selain itu, dengan adanya dukungan bawaan dari sistem operasi seperti Android dan iOS, dark mode menjadi fitur wajib bagi aplikasi modern.

Langkah-Langkah Implementasi Dark Mode

1. Persiapkan Proyek Anda

Pastikan Anda memiliki proyek React Native yang sudah berjalan. Jika belum, Anda bisa memulai dengan membuat proyek baru:


npx react-native init DarkModeExample

2. Instalasi Dependensi

Untuk mengelola tema, kita akan menggunakan react-native-appearance atau react-native Context API. Namun, opsi terbaik saat ini adalah menggunakan Context API bawaan React Native untuk fleksibilitas.

Instal library tambahan seperti react-native-async-storage untuk menyimpan preferensi tema pengguna:


npm install @react-native-async-storage/async-storage

3. Buat Konteks untuk Tema

Buat folder bernama contexts dan tambahkan file baru ThemeContext.js. File ini akan digunakan untuk mengatur tema global.

contexts/ThemeContext.js

import React, { createContext, useState, useEffect } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';

export const ThemeContext = createContext();

export const ThemeProvider = ({ children }) => {
  const [isDarkMode, setIsDarkMode] = useState(false);

  useEffect(() => {
    const loadTheme = async () => {
      const savedTheme = await AsyncStorage.getItem('theme');
      setIsDarkMode(savedTheme === 'dark');
    };
    loadTheme();
  }, []);

  const toggleTheme = async () => {
    const newTheme = !isDarkMode ? 'dark' : 'light';
    setIsDarkMode(!isDarkMode);
    await AsyncStorage.setItem('theme', newTheme);
  };

  return (
    <ThemeContext.Provider value={{ isDarkMode, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

4. Tambahkan Tema di Aplikasi

Buat dua tema, yaitu darkTheme dan lightTheme, yang berisi pengaturan warna: 

themes.js

export const lightTheme = {
  background: '#FFFFFF',
  text: '#000000',
  buttonBackground: '#007AFF',
  buttonText: '#FFFFFF',
};

export const darkTheme = {
  background: '#000000',
  text: '#FFFFFF',
  buttonBackground: '#1E1E1E',
  buttonText: '#FFFFFF',
};

5. Gunakan Tema dalam Komponen

Di file App.js, gunakan ThemeContext untuk mengubah tampilan berdasarkan tema yang dipilih.

App.js


import React, { useContext } from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
import { ThemeContext, ThemeProvider } from './contexts/ThemeContext';
import { lightTheme, darkTheme } from './themes';

const AppContent = () => {
  const { isDarkMode, toggleTheme } = useContext(ThemeContext);
  const theme = isDarkMode ? darkTheme : lightTheme;

  return (
    <View style={[styles.container, { backgroundColor: theme.background }]}>
      <Text style={[styles.text, { color: theme.text }]}>
        Selamat Datang di KonsepKoding.com
      </Text>
      <Button
        title={isDarkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
        onPress={toggleTheme}
        color={theme.buttonBackground}
      />
    </View>
  );
};

const App = () => {
  return (
    <ThemeProvider>
      <AppContent />
    </ThemeProvider>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 20,
    marginBottom: 20,
  },
});

export default App;

6. Uji Aplikasi

Jalankan aplikasi Anda dengan perintah berikut:


npx react-native run-android
npx react-native run-ios

Coba tekan tombol untuk mengganti tema antara light mode dan dark mode. Tema akan berubah sesuai dengan preferensi pengguna.

Kesimpulan

Membuat dark mode di React Native sangatlah mudah, terutama dengan memanfaatkan Context API dan AsyncStorage. Dengan dark mode, Anda dapat memberikan pengalaman pengguna yang lebih baik dan modern.

Ikuti terus KonsepKoding.com untuk mendapatkan lebih banyak tutorial menarik seputar pengembangan aplikasi React Native dan teknologi lainnya!


Baca Tutorial React Native KonsepKoding Lainnya :
#32 Tutorial Kalkulasi Latitude Longitude Dua Jarak React Native
#33 Tutorial React Native Handle OnSwipe Pada iOS
#34 Tutorial View Aspect Ratio Square React Native