expo-linear-gradient dan react-native-linear-gradient di RN

Pilihan cepat: di Expo, gunakan expo-linear-gradient. Di React Native murni, gunakan react-native-linear-gradient. Instal yang cocok dengan stack Anda, lalu render sebuah LinearGradient dengan colors dan sebuah style (biasanya flex: 1 berukuran untuk background).

Expo

bunx expo install expo-linear-gradient

React Native Murni

bun add react-native-linear-gradient

Penggunaan minimal (ide yang sama di kedua library: named export dari Expo, default import dari bare).

import { LinearGradient } from 'expo-linear-gradient';
// Bare: import LinearGradient from 'react-native-linear-gradient';

<LinearGradient colors={['#0f172a', '#2563eb']} style={{ flex: 1 }} />;

Jika Anda memilih antara native stack dan shell web-first, React Native vs Capacitor membahas tradeoff yang diperhatikan tim Capgo. Sisa artikel ini membahas background, tombol, mask, motion, dan troubleshooting.

Table of Contents

• Mengapa App React Native Anda Butuh Gradient
  • Kelebihan penggunaan gradient
• Memilih Jalur: Setup Expo vs Bare React Native
  • Setup Expo
  • Setup Bare React Native
  • Di mana proyek bare biasanya bermasalah
• Teknik Gradient Inti untuk Elemen UI
  • Background gradient layar penuh
  • Tombol gradient yang tetap berfungsi seperti tombol
  • Teks gradient dengan mask
• Menghidupkan Gradient dengan Animasi
  • Shimmer loader yang terasa native
  • Komponen animasi
• Performa, Aksesibilitas, dan Karakteristik Platform
  • Checklist performa
  • Checklist aksesibilitas
  • Checklist quirk platform
• Troubleshooting dan Best Practices Terakhir
  • Gradient tidak muncul
  • Build iOS rusak setelah instalasi
  • Tes gagal dengan error modul native

Mengapa App React Native Anda Butuh Gradient

Banyak UI mobile gagal karena alasan yang sama. Layout-nya rapi, spacing-nya pas, tipografinya oke, tapi layarnya tetap terasa kaku. Warna solid membuat semuanya terlihat seperti placeholder kecuali sistem visual lainnya bekerja keras.

Sebuah linear gradient React Native komponen ini memperbaikinya dengan sangat sedikit code. Menambah kedalaman, menciptakan pemisahan antar bagian, dan memberikan bobot visual yang jelas pada elemen prioritas tinggi. Latar belakang gradien yang baik bisa membuat layar login terasa lebih terencana. Tombol gradien yang baik bisa membuat aksi utama jelas tanpa perlu bayangan tebal atau border yang terlalu mencolok.

Oleh Pada 2019, expo-linear-gradient dan react-native-linear-gradient muncul di lebih dari 42% proyek React Native, yang merupakan sinyal kuat bahwa gradien bukan lagi efek niche. Ini adalah alat UI standar di aplikasi produksi, bukan dekorasi yang ditambahkan di akhir, seperti yang dicatat dalam artikel adopsi gradien React Native ini.

Kelebihan penggunaan gradient

• Buat kedalaman: Layar dengan satu latar belakang datar sering terlihat belum selesai. Perpaduan halus dari atas ke bawah membuat permukaan terasa berlapis.
• Arahkan perhatian: CTA utama, kartu onboarding, dan header hero menonjol tanpa menambah kebisingan visual.
• Ganti aset gambar: Dalam banyak kasus, gradient memberikan sentuhan akhir tanpa perlu mengirim gambar latar belakang tambahan.

Aturan praktis: Gunakan gradient di bagian yang butuh hierarki. Background, hero card, surface CTA, dan overlay media paling terbantu. Form field, list padat, dan container body copy biasanya tidak.

Ada juga aspek desain produk di sini. Tim yang bekerja lintas platform sudah menghabiskan waktu untuk menjaga interface tetap konsisten. Jika itu bagian dari stack Anda, maka praktik UI dan UX lintas platform untuk aplikasi mobile selaras dengan pemikiran yang sama: lebih sedikit aset, surface yang lebih reusable, dan sistem visual yang tetap solid di berbagai layar.

Memilih Jalur: Setup Expo vs Bare React Native

Ini adalah titik perbedaan yang paling bikin repot. Rendering API terasa hampir identik di kedua library, tapi setup-nya tidak.

Jika Anda menggunakan Expo-managed app, gunakan expo-linear-gradient. Jika Anda menggunakan bare React Native app, gunakan react-native-linear-gradient. Jangan mencoba mengaburkan batasan tersebut kecuali Anda tahu persis alasan di baliknya.

Setup Expo

Expo adalah jalur yang lebih lancar. Instalasi sangat mudah, pencocokan versi sudah diatur otomatis, dan Anda tidak perlu memikirkan native linking.

Instal seperti ini:

bunx expo install expo-linear-gradient

Gunakan seperti ini:

import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';

export default function App() {
  return (
    <LinearGradient
      colors={['#0f172a', '#1d4ed8']}
      style={styles.container}
    >
      <Text style={styles.text}>Hello gradient</Text>
    </LinearGradient>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    color: '#fff',
    fontSize: 24,
    fontWeight: '700',
  },
});

Expo adalah pilihan tepat jika Anda ingin setup cepat, default yang masuk akal, dan minim kendala native. Itulah alasan mengapa tim yang mengeksplorasi workflow Expo tingkat lanjut sering membandingkan Capgo dan Expo EAS untuk live updates saat pendekatan managed tidak lagi mencukupi kebutuhan aplikasi.

Setup Bare React Native

Bare React Native memberi Anda akses langsung ke native module, tapi Anda harus menangani kerumitannya sendiri.

Instal package-nya:

bun add react-native-linear-gradient

Untuk iOS, instal pods:

cd ios && pod install

Penggunaan dasar:

import React from 'react';
import { StyleSheet, Text } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';

export default function App() {
  return (
    <LinearGradient
      colors={['#111827', '#7c3aed']}
      style={styles.container}
    >
      <Text style={styles.text}>Hello gradient</Text>
    </LinearGradient>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    color: '#fff',
    fontSize: 24,
    fontWeight: '700',
  },
});

Di mana proyek bare biasanya bermasalah

Bagian yang sering terlewat di kebanyakan tutorial adalah testing dan native setup. Menurut ringkasan diskusi Stack Overflow ini, 68% thread Stack Overflow mengenai topik ini pada 2024 hingga 2025 melibatkan kegagalan native module pada setup bare React Native, dan sumber yang sama mencatat masalah berulang pada Jest mocking dan konflik iOS CocoaPods.

Jika Anda menggunakan Jest di bare app, tambahkan mock secara eksplisit:

// jest.setup.js
import mockRNLinearGradient from 'react-native-linear-gradient/jest/linear-gradient-mock';

jest.mock('react-native-linear-gradient', () => mockRNLinearGradient);

Dan referensikan file setup tersebut di Jest config Anda:

module.exports = {
  preset: 'react-native',
  setupFiles: ['<rootDir>/jest.setup.js'],
};

Bare React Native bekerja dengan baik untuk gradient. Hanya saja, ia tidak memaafkan setup yang tidak lengkap. Kebanyakan kegagalan bukan bug visual, melainkan masalah linking, pods, atau test environment.

Berikut adalah tabel keputusan praktisnya:

Teknik Gradient Inti untuk Elemen UI

Pendekatan umum adalah menggunakan set kecil pola gradient yang sama berulang kali. Latar belakang. Tombol. Judul. Jika ketiganya solid, Anda bisa memakainya ulang di banyak layar.

Model mental yang berguna adalah ini:

• colors mengontrol palet
• start dan end mengontrol arah
• locations mengontrol di mana transisi terjadi

Jika layar splash atau onboarding Anda menggunakan gradient, ia berpasangan alami dengan pola urutan startup yang lebih luas yang dijelaskan dalam panduan layar splash React Native.

Background gradient layar penuh

Ini adalah pola yang paling sederhana dan mudah digunakan kembali.

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
// For bare RN, switch to:
// import LinearGradient from 'react-native-linear-gradient';

export default function WelcomeScreen() {
  return (
    <LinearGradient
      colors={['#0f172a', '#1e293b', '#2563eb']}
      start={{ x: 0, y: 0 }}
      end={{ x: 1, y: 1 }}
      style={styles.container}
    >
      <View style={styles.content}>
        <Text style={styles.title}>Welcome back</Text>
        <Text style={styles.subtitle}>Your workspace is ready.</Text>
      </View>
    </LinearGradient>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  content: {
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: 24,
  },
  title: {
    color: '#fff',
    fontSize: 32,
    fontWeight: '800',
    marginBottom: 8,
  },
  subtitle: {
    color: 'rgba(255,255,255,0.8)',
    fontSize: 16,
  },
});

Campuran diagonal biasanya terasa lebih dinamis daripada yang vertikal default. Itulah mengapa start={{ x: 0, y: 0 }} dan end={{ x: 1, y: 1 }} adalah default yang baik ketika layar sebagian besar bersifat dekoratif.

Jangan memilih warna secara terisolasi. Uji di belakang teks, ikon, dan gaya status bar yang sebenarnya. Palet yang terlihat bagus di Figma bisa langsung gagal begitu konten diletakkan di atasnya.

Tombol gradient yang tetap berfungsi seperti tombol

Kesalahan umum di sini adalah menempatkan perilaku sentuh langsung pada gradien dan melupakan state nonaktif, umpan balik tekan, atau konsistensi padding. Jaga agar tombol tetap semantik dan biarkan gradien menjadi lapisan visual.

import React from 'react';
import {
  Pressable,
  StyleSheet,
  Text,
  ViewStyle,
  StyleProp,
} from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';

type Props = {
  title: string;
  onPress: () => void;
  disabled?: boolean;
  style?: StyleProp<ViewStyle>;
};

export function GradientButton({
  title,
  onPress,
  disabled = false,
  style,
}: Props) {
  return (
    <Pressable onPress={onPress} disabled={disabled} style={style}>
      {({ pressed }) => (
        <LinearGradient
          colors={
            disabled
              ? ['#94a3b8', '#94a3b8']
              : pressed
              ? ['#7c3aed', '#2563eb']
              : ['#8b5cf6', '#3b82f6']
          }
          start={{ x: 0, y: 0.5 }}
          end={{ x: 1, y: 0.5 }}
          style={styles.button}
        >
          <Text style={styles.label}>{title}</Text>
        </LinearGradient>
      )}
    </Pressable>
  );
}

const styles = StyleSheet.create({
  button: {
    minHeight: 52,
    borderRadius: 14,
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: 20,
  },
  label: {
    color: '#fff',
    fontSize: 16,
    fontWeight: '700',
  },
});

Untuk tombol, gradien horizontal sering kali lebih mudah dibaca daripada yang diagonal. Ini menjaga label tetap stabil dan menghindari kesan kontrol miring.

Teks gradient dengan mask

Ini adalah pola paling mencolok dalam set ini, dan berguna jika Anda menjaganya tetap terukur. Judul hero, banner upgrade, dan judul empty-state adalah kandidat yang baik. Teks paragraf tidak.

You’ll need @react-native-masked-view/masked-view.

bun add @react-native-masked-view/masked-view

Lalu buat mask teks:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import MaskedView from '@react-native-masked-view/masked-view';
import { LinearGradient } from 'expo-linear-gradient';

export default function GradientHeadline() {
  return (
    <View style={styles.container}>
      <MaskedView
        maskElement={
          <View style={styles.maskWrapper}>
            <Text style={styles.title}>Premium analytics</Text>
          </View>
        }
      >
        <LinearGradient
          colors={['#22c55e', '#06b6d4', '#3b82f6']}
          start={{ x: 0, y: 0 }}
          end={{ x: 1, y: 0 }}
          locations={[0, 0.5, 1]}
        >
          <Text style={[styles.title, styles.hiddenText]}>Premium analytics</Text>
        </LinearGradient>
      </MaskedView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 24,
  },
  maskWrapper: {
    backgroundColor: 'transparent',
  },
  title: {
    fontSize: 34,
    fontWeight: '800',
    letterSpacing: -1,
  },
  hiddenText: {
    opacity: 0,
  },
});

locations paling penting saat Anda ingin satu warna menempati lebih banyak ruang visual daripada warna lain. Jika transisi terasa kusam, kurangi jumlah warna terlebih dahulu. Itu biasanya memperbaiki desain lebih cepat daripada menyesuaikan setiap stop.

Menghidupkan Gradient dengan Animasi

Gradien statis memberi Anda sentuhan akhir. Gradien animasi memberi Anda umpan balik.

Penggunaan paling praktis bukan latar belakang yang mencolok. Melainkan shimmer loader. Efek itu memberi tahu pengguna bahwa aplikasi aktif, data sedang dimuat, dan tata letak yang mereka lihat disengaja, bukan rusak.

Komponen shimmer juga melengkapi pola motion lainnya. Jika aplikasi Anda sudah menggunakan ikon atau loader animasi, ini panduan Lottie di React Native berguna untuk memutuskan kapan gradien shimmer sudah cukup dan kapan aset animasi yang lebih kaya lebih masuk akal.

Shimmer loader yang terasa native

Versi paling simpel yang andal menggunakan react-native-reanimated untuk menggerakkan pita gradien melewati placeholder yang di-clip.

Install Reanimated jika belum ada di app Anda, lalu buat wrapper dengan overflow: 'hidden'. Di dalamnya, animasikan layer gradien dari kiri ke kanan.

import React, { useEffect } from 'react';
import { StyleSheet, View, ViewStyle, StyleProp } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import Animated, {
  useAnimatedStyle,
  useSharedValue,
  withRepeat,
  withTiming,
  Easing,
} from 'react-native-reanimated';

const AnimatedView = Animated.createAnimatedComponent(View);

type Props = {
  width?: number | string;
  height?: number;
  borderRadius?: number;
  style?: StyleProp<ViewStyle>;
};

export function ShimmerPlaceholder({
  width = '100%',
  height = 16,
  borderRadius = 8,
  style,
}: Props) {
  const translateX = useSharedValue(-220);

  useEffect(() => {
    translateX.value = withRepeat(
      withTiming(220, {
        duration: 1200,
        easing: Easing.linear,
      }),
      -1,
      false
    );
  }, [translateX]);

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ translateX: translateX.value }],
  }));

  return (
    <View
      style={[
        styles.container,
        { width, height, borderRadius },
        style,
      ]}
    >
      <AnimatedView style={[styles.shimmer, animatedStyle]}>
        <LinearGradient
          colors={['rgba(255,255,255,0)', 'rgba(255,255,255,0.35)', 'rgba(255,255,255,0)']}
          start={{ x: 0, y: 0.5 }}
          end={{ x: 1, y: 0.5 }}
          style={styles.gradient}
        />
      </AnimatedView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    overflow: 'hidden',
    backgroundColor: '#e5e7eb',
  },
  shimmer: {
    ...StyleSheet.absoluteFillObject,
    width: 220,
  },
  gradient: {
    flex: 1,
  },
});

Kuncinya, Anda tidak mencoba menganimasikan definisi gradien itu sendiri. Anda menganimasikan layer gradien melintasi placeholder statis. Ini lebih simpel, lebih mudah dipahami, dan biasanya lebih stabil di berbagai perangkat.

Berikut adalah panduan visual penerapan efek tersebut secara langsung:

Komponen animasi

Beberapa catatan implementasi penting:

• Gunakan clipping: Parent perlu menggunakan overflow: 'hidden', agar shimmer tidak keluar dari sudut rounded.
• Jaga pita tetap sempit: Layer animasi yang lebih kecil lebih mudah diatur daripada menganimasi seluruh permukaan.
• Samakan warna dasar dengan layar: Skeleton loader harus menyatu dengan layout sekitar, bukan terlihat seperti widget terpisah.

Gradient animasi bekerja paling baik saat pengguna hampir tidak menyadarinya. Jika shimmer jadi hal paling mencolok di layar, itu sudah berlebihan.

Performa, Aksesibilitas, dan Karakteristik Platform

Saat gradient berpindah dari layar demo ke produksi, fokusnya berubah. code mungkin terlihat simpel, tapi perilaku rendering, keterbacaan, dan konsistensi platform menjadi lebih penting daripada efek awalnya.

Jika Anda sedang meningkatkan responsivitas aplikasi secara menyeluruh, ini panduan optimasi performa aplikasi mobile memiliki pola pikir yang sama: kurangi kerjaan yang tidak perlu, ukur di perangkat asli, dan optimalkan bagian yang paling sering dilihat pengguna.

Checklist performa

Native gradient umumnya efisien, tapi Anda tetap bisa salah menggunakannya.

• Utamakan gradien daripada gambar dekoratif besar: Biasanya lebih bersih untuk di-ship dan lebih mudah diadaptasi ke berbagai ukuran layar.
• Hindari menumpuk banyak lapisan full-screen: Satu gradien latar belakang sudah cukup. Beberapa gradien transparan yang tumpang tindih ditambah blur dan animasi berat bisa jadi mahal.
• Memoize komponen yang dapat digunakan ulang: Jika kartu gradient digunakan dalam daftar, pertahankan props tetap dan hindari rerendering karena state parent yang tidak relevan.

Aturan yang baik adalah menjaga gradient tetap struktural, bukan berlebihan. Gunakan untuk mendefinisikan permukaan, bukan setiap baris di feed yang padat.

Checklist aksesibilitas

Gradient dapat merusak keterbacaan dengan cepat karena kontras berubah di seluruh permukaan.

• Uji teks terhadap area paling terang: Jika teks putih hanya berfungsi di sisi gelap blend, berarti tidak berfungsi.
• Tambahkan scrim jika diperlukan: Overlay gelap yang halus antara latar belakang dan teks sering kali lebih baik daripada mengubah seluruh palet.
• Sisihkan teks gradient untuk copy display besar: Tampil bagus di headline. Pilihan buruk untuk label kecil, teks bantuan, atau apa pun yang penting untuk menyelesaikan tugas.

Periksa titik terburuk pada gradient, bukan yang paling indah.

Checklist quirk platform

iOS dan Android biasanya merender gradient yang sama dengan hasil yang mirip, tapi tidak selalu sempurna.

Perhatikan juga penanganan status bar dan safe area. Gradient yang terlihat seimbang di simulator bisa terasa terlalu berat di bagian atas pada perangkat dengan notch jika konten dan background tidak memperhitungkan ruang ekstra tersebut.

Troubleshooting dan Best Practices Terakhir

Ini versi ringkas yang akan saya simpan di catatan proyek.

• Sesuaikan library dengan workflow: expo-linear-gradient untuk aplikasi Expo-managed, react-native-linear-gradient untuk bare React Native.
• Gunakan gradient dengan tujuan jelas: Background, CTA, overlay, dan hero text adalah use case yang kuat.
• Kendalikan arah secara sengaja: Horizontal untuk tombol, diagonal untuk latar dekoratif, dan masked hanya untuk teks besar.
• Desain untuk konten, bukan keadaan kosong: Uji dengan teks asli, ikon, dan penanganan status bar.
• Anggap bare setup sebagai native setup: Pods, linking, dan Jest mocks bukan detail opsional.

Tiga kegagalan umum sering muncul.

Gradient tidak muncul

Penyebab: komponen tidak punya ukuran yang terlihat.

Solusi: beri flex: 1tinggi eksplisit, atau parent dengan dimensi. Gradient tanpa layout box tidak akan ter-render dengan benar.

Build iOS gagal setelah install

Penyebab: pods tidak terinstal atau graph dependensi native tidak sinkron.

Solusi: jalankan pod install di ios, bersihkan folder build jika perlu, lalu build ulang aplikasi. Pada proyek bare, install package saja biasanya tidak cukup.

Tests gagal dengan error modul native

Penyebab: Jest mencoba memuat modul native yang sebenarnya.

Solusi: mock react-native-linear-gradient dengan react-native-linear-gradient/jest/linear-gradient-mock di file setup Jest Anda.

Jika Anda hanya mengingat satu hal dari panduan ini, ingat yang ini: gradient-nya sendiri itu mudah. Setup yang siap produksi adalah bagian yang paling memakan waktu. Begitu Anda memilih library yang tepat untuk arsitektur aplikasi Anda, semuanya setelah itu akan jauh lebih terprediksi.

Jika tim Anda merilis aplikasi mobile hybrid dan ingin mendorong pembaruan JavaScript, CSS, copy, config, dan aset tanpa menunggu review store, Capgo layak untuk dilihat. Ini memberi tim CapacitorJS dan Electron live update yang terkontrol, channel rollout, perlindungan rollback, dan visibilitas rilis tanpa membuat proses deployment Anda jadi black box.