Membuat Aplikasi Counter + Timer Interaktif dengan React Native (Expo + TypeScript)


Belajar React Native tidak selalu harus dimulai dari aplikasi yang kompleks. Justru, membuat aplikasi sederhana seperti Counter dan Timer bisa menjadi latihan yang bagus untuk memahami konsep dasar React Native.

Pada proyek kali ini, kita akan membuat sebuah aplikasi Counter + Timer menggunakan React Native dengan Expo dan TypeScript.

Aplikasi ini memiliki dua fitur utama. Pertama, pengguna dapat menaikkan, mengurangi, dan mereset nilai counter. Kedua, aplikasi memiliki timer yang dapat dijalankan, dihentikan, dan direset.

Yang menarik, kedua fitur tersebut juga saling terhubung. Ketika counter memiliki nilai lebih dari 0, timer dapat berjalan secara otomatis. Ketika counter kembali menjadi 0, timer akan berhenti.

Proyek ini juga menjadi latihan untuk memahami beberapa konsep penting dalam React, seperti useState, useEffect, useRef, serta navigasi menggunakan Expo Router.

Teknologi yang Digunakan

Beberapa teknologi yang digunakan dalam proyek ini adalah:

  • React Native — framework untuk membangun aplikasi mobile.

  • Expo — mempermudah proses pengembangan aplikasi React Native.

  • TypeScript — memberikan type safety pada kode.

  • Expo Router — digunakan untuk navigasi berbasis file.

  • React Navigation — mendukung sistem navigasi aplikasi.

  • Expo Vector Icons — menyediakan berbagai icon untuk tampilan aplikasi.

Konsep utama yang akan digunakan adalah useState untuk menyimpan state dan useEffect untuk menangani side effect.

Persiapan Project

Sebelum mulai membuat aplikasinya, pastikan Node.js, npm atau yarn, Expo, serta editor seperti VS Code sudah tersedia di komputer.

Untuk membuat project Expo baru, jalankan:

npx create-expo-app CounterTimerApp --template

Setelah project dibuat, pilih template TypeScript.

Kemudian install dependency yang diperlukan:

npx expo install @react-navigation/native @react-navigation/bottom-tabs
npx expo install react-native-screens react-native-safe-area-context
npx expo install expo-router
npx expo install react-native-vector-icons

Struktur dasar project nantinya kurang lebih seperti berikut:

CounterTimerApp/
├── app/
│   ├── (tabs)/
│   │   ├── _layout.tsx
│   │   ├── counter.tsx
│   │   └── timer.tsx
│   ├── _layout.tsx
│   └── index.tsx
├── components/
├── assets/
├── constants/
├── hooks/
├── package.json
├── tsconfig.json
└── app.json

Struktur tersebut menggunakan pendekatan file-based routing dari Expo Router.

Membuat Navigasi Aplikasi

Aplikasi akan memiliki dua halaman utama, yaitu Counter dan Timer. Kedua halaman tersebut ditampilkan melalui bottom tab navigation.

Pada app/(tabs)/_layout.tsx, kita dapat membuat dua tab tersebut dan memberikan icon yang berbeda untuk masing-masing halaman.

Dengan cara ini, pengguna dapat berpindah antara halaman Counter dan Timer dengan mudah.

Konfigurasi navigasi menggunakan Tabs.Screen, sedangkan icon dapat diberikan menggunakan Ionicons.

Membuat Fitur Counter

Selanjutnya kita membuat halaman Counter.

Counter memiliki tiga tombol utama:

  • + untuk menambah angka.

  • − untuk mengurangi angka.

  • Reset untuk mengembalikan angka menjadi 0.

State counter dibuat menggunakan useState:

const [count, setCount] = useState<number>(0);

Ketika tombol plus ditekan, nilai counter bertambah:

const increment = (): void => {
  setCount(prev => prev + 1);
};

Sedangkan tombol minus hanya dapat digunakan ketika nilai counter lebih besar dari 0.

Selain menyimpan nilai counter, kita juga menyimpan status timer menggunakan state:

const [isTimerRunning, setIsTimerRunning] = useState<boolean>(false);

Dengan begitu, aplikasi dapat mengetahui apakah timer sedang berjalan atau tidak.

Membuat Timer

Setelah Counter selesai, kita masuk ke bagian Timer.

Timer menggunakan useState untuk menyimpan jumlah detik dan useRef untuk menyimpan reference dari setInterval.

const [seconds, setSeconds] = useState<number>(0);
const [isRunning, setIsRunning] = useState<boolean>(false);

const timerRef = useRef<NodeJS.Timeout | null>(null);

Ketika timer dijalankan, setInterval akan menambahkan nilai detik setiap satu detik:

timerRef.current = setInterval(() => {
  setSeconds(prev => prev + 1);
}, 1000);

Ketika timer dihentikan, interval harus dibersihkan menggunakan clearInterval() agar tidak terus berjalan di background.

if (timerRef.current) {
  clearInterval(timerRef.current);
  timerRef.current = null;
}

Penggunaan useRef seperti ini penting karena kita membutuhkan reference terhadap interval yang sedang berjalan.

Mengubah Detik Menjadi Format Menit

Angka detik akan lebih mudah dibaca jika ditampilkan dalam format MM:SS.

Kita dapat membuat helper sederhana:

const formatTime = (totalSeconds: number): string => {
  const mins = Math.floor(totalSeconds / 60);
  const secs = totalSeconds % 60;

  return `${mins.toString().padStart(2, '0')}:${secs
    .toString()
    .padStart(2, '0')}`;
};

Dengan fungsi tersebut, misalnya 65 detik akan ditampilkan sebagai:

01:05

Menghubungkan Counter dengan Timer

Bagian yang membuat project ini lebih menarik adalah hubungan antara Counter dan Timer.

Alurnya sederhana:

Counter bertambah → Timer berjalan

Kemudian:

Counter kembali menjadi 0 → Timer berhenti

Ketika Counter di-reset, timer juga akan dihentikan dan dikembalikan ke 00:00.

Komunikasi antara kedua screen dilakukan menggunakan navigation params seperti startTimer, stopTimer, dan resetTimer.

Konsep ini memberikan gambaran bagaimana sebuah screen dapat memberikan informasi kepada screen lainnya dalam aplikasi React Native.

Membuat Tampilan Minimalis

Untuk desain, aplikasi menggunakan konsep minimalis hitam putih.

Warna putih digunakan sebagai background, sedangkan hitam digunakan untuk teks dan tombol utama.

Contohnya:

container: {
  flex: 1,
  backgroundColor: '#FFFFFF',
},

title: {
  fontSize: 32,
  fontWeight: 'bold',
  color: '#000000',
},

Tombol dibuat berbentuk lingkaran sehingga tampilan aplikasi terlihat sederhana tetapi tetap jelas.

Konsep hitam putih juga membuat fokus pengguna tetap berada pada fungsi utama aplikasi.

Menjalankan Aplikasi

Setelah seluruh kode selesai, install dependency terlebih dahulu:

npm install

Kemudian jalankan development server:

npx expo start

Untuk langsung menjalankan aplikasi pada Android:

npx expo start --android

Sedangkan untuk web:

npx expo start --web

Jika menggunakan Expo Go, QR Code yang muncul di terminal dapat dipindai menggunakan perangkat untuk menjalankan aplikasi.

Pengujian

Setelah aplikasi berjalan, beberapa hal yang perlu diuji adalah:

Counter

Tekan tombol + untuk menaikkan angka.

Tekan − untuk mengurangi angka.

Tekan Reset untuk mengembalikan counter ke 0.

Timer

Tekan Start untuk menjalankan timer.

Tekan Stop untuk menghentikannya.

Tekan Reset untuk mengembalikan timer ke 00:00.

Integrasi

Terakhir, pastikan integrasi keduanya bekerja dengan benar.

Ketika counter menjadi lebih dari 0, timer dapat berjalan. Ketika counter mencapai 0, timer berhenti secara otomatis.

Beberapa Best Practice

Walaupun aplikasi ini sederhana, ada beberapa hal penting yang bisa dipelajari.

Pertama adalah penggunaan TypeScript untuk memberikan tipe yang jelas pada state dan parameter.

Kedua adalah melakukan cleanup pada effect, terutama untuk timer. Interval yang tidak dibersihkan dapat menyebabkan resource tetap digunakan ketika screen sudah tidak aktif.

Ketiga adalah memisahkan komponen berdasarkan fungsinya. Misalnya komponen display, controls, dan status dapat dibuat menjadi file yang berbeda agar project lebih mudah dirawat ketika aplikasi semakin besar.

Kesimpulan

Membuat aplikasi Counter + Timer mungkin terlihat sederhana, tetapi project ini memberikan banyak pelajaran penting dalam pengembangan React Native.

Dari project ini kita belajar bagaimana menggunakan:

  • useState untuk menyimpan state.

  • useEffect untuk menangani perubahan dan side effect.

  • useRef untuk menyimpan reference timer.

  • useFocusEffect untuk melakukan cleanup.

  • Expo Router untuk navigasi.

  • TypeScript untuk meningkatkan keamanan kode.

  • StyleSheet untuk membuat tampilan aplikasi.

Aplikasi yang dihasilkan sudah memiliki Counter dengan fitur plus, minus, dan reset, serta Timer dengan fitur start, stop, dan reset. Keduanya juga dapat terintegrasi satu sama lain.

Apa yang Bisa Dikembangkan Selanjutnya?

Project ini masih bisa dikembangkan menjadi aplikasi yang lebih menarik.

Beberapa ide yang bisa ditambahkan antara lain:

  1. AsyncStorage untuk menyimpan state.

  2. Notifikasi ketika timer mencapai waktu tertentu.

  3. Multiple Timer untuk menjalankan beberapa timer.

  4. Lap Time seperti stopwatch.

  5. Dark Mode dan Light Mode.

  6. Animasi pada tombol dan perpindahan halaman.

Dengan tambahan fitur tersebut, aplikasi sederhana ini dapat dikembangkan menjadi aplikasi produktivitas atau stopwatch yang jauh lebih lengkap.

Penutup

Dari sebuah Counter sederhana, kita bisa belajar banyak hal tentang bagaimana React Native bekerja.

Yang paling penting bukan seberapa kompleks aplikasinya, tetapi bagaimana kita memahami konsep di balik kode yang kita buat.

Kalau konsep seperti state, effect, navigation, dan component sudah dipahami, membuat aplikasi React Native yang lebih besar akan terasa jauh lebih mudah.

Happy Coding! 🚀

Komentar

Posting Komentar

Postingan populer dari blog ini

Membuat Aplikasi Dengan Fitur Kirim Pesan Via Whatsaap - Dart Flutter

Gambar
Tutorial Flutter Membuat aplikasi dengan fitur Kirim Pesan ke WhatsApp Pada tutorial ini, kita akan belajar membuat aplikasi berbasis Flutter Web yang memungkinkan pengguna mengirim pesan langsung ke WhatsApp. Tampilan dibuat modern dengan efek glassmorphism sehingga terlihat elegan dan profesional. 🎯 Tujuan Aplikasi Input pesan Tombol kirim ke WhatsApp Validasi pesan UI modern (gradient + glass effect) Notifikasi interaktif 🧱 Struktur Dasar Program 1. Main Function void main() { runApp(const MyApp()); } Ini adalah entry point aplikasi Flutter. 2. MaterialApp MaterialApp( title: 'CMessege', debugShowCheckedModeBanner: false, theme: ThemeData( useMaterial3: true, ), ); 3. Stateful Widget class AnonymousMessagePage...
Baca selengkapnya

INTRODUCTING

Halo, selamat datang di blog saya! Perkenalkan, nama saya Caca Ardiansyah , biasa dipanggil caca, aca, ian, hiro.  Saat ini saya adalah seorang pelajar kelas XI di SMKN 1 Banjar jurusan Rekayasa Perangkat Lunak. Dan saya  sedang berusaha mengembangkan diri di bidang akademik maupun kreativitas. Saya lahir di Kota Banjar pada tanggal 12 mei 2009, dan tempat tinggal saya di Desa karyamukti Dusun Cigadung Kecamatan patatuman. Saya memiliki beberapa hobi, di antaranya: 📸 Fotografi , karena saya suka mengabadikan momen indah. 💻 Programming , karena saya ingin membuat karya digital yang bermanfaat. 🎨Digital Desain, karena bisa   memberi ruang luas untuk mengekspresikan ide tanpa batas. Terima kasih sudah meluangkan waktu untuk membaca perkenalan singkat ini. Semoga melalui blog ini kita bisa saling berbagi dan belajar bersama. Jangan ragu untuk meninggalkan komentar atau berdiskusi, saya akan sangat senang!
Baca selengkapnya

Membuat Tampilan Sederhana - DART FLUTTER

Gambar
  Membuat Tampilan Sederhana Dart Flutter 🔥   Buat kamu yang baru mulai belajar Flutter, contoh kode ini cocok banget buat latihan bikin tampilan aplikasi yang rapi, modern, tapi nggak ribet. Di sini kita bakal bahas pelan-pelan gimana caranya bikin UI Flutter sederhana pakai Material 3 , lengkap dengan AppBar gradient dan card yang clean . Awal Mula Aplikasi Flutter Semua aplikasi Flutter pasti dimulai dari fungsi main() . void main() { runApp(const MyApp()); } Ibaratnya, ini tuh tombol “ON” buat aplikasi kamu. Dari sini Flutter mulai jalan dan nampilin widget utama. MyApp & MaterialApp, Pondasi Utama Di widget MyApp , kita pake MaterialApp buat ngatur keseluruhan aplikasi. MaterialApp( debugShowCheckedModeBanner: false, theme: ThemeData( useMaterial3: true, ), home: HomePage(), ); Yang penting di sini: Banner debug dimatiin biar keliatan clean useMaterial3: true biar desainnya lebih kekinian HomePage jadi halaman pertama pas aplikas...
Baca selengkapnya