Master Gradient Linear React Native: UI yang Indah pada 2026

Anda mungkin telah mengalami salah satu situasi.

Atau layar Anda terlihat datar dan belum selesai, dan Anda ingin latar belakang atau tombol yang terasa seperti produk nyata bukanlah kerangka. Atau Anda sudah mencoba menambahkan gradient React Native, dan sekarang Anda terjebak dalam keadaan limbo pengaturan karena setengah contoh menggunakan Expo dan setengahnya mengasumsikan proyek native yang tidak berpakaian.

That split is where most tutorials stop being useful. The component API is simple. The environment choice isn’t. A clean linear gradient React Native setup depends less on the colors prop dan lebih lanjutnya tergantung apakah Anda berada di workflow Expo yang diatur atau menghadapi native linking, pods, dan mock tes sendiri.

Isi Kandungan

• Apa yang dapat dilakukan gradien dengan baik
  • Apa yang membuat gradasi ini efektif
• Mengambil Pilihan Anda Expo vs Pengaturan React Native Tanpa Framework
  • Pengaturan Expo
  • Di mana proyek berpakaian biasanya gagal
  • Teknik Gradien Utama untuk Komponen UI
• Teknik Gradien Utama untuk Komponen UI
  • Gradien Latar Layar Penuh
  • Button Gradien yang Masih Berperilaku Seperti Button
  • Teks Gradien dengan Masker
• Membawa Gradien ke Hidup dengan Animasi
  • Loader yang Berkilau dengan Rasa Asli
  • Komponen yang Dibuat Animasi
• Kinerja, Aksesibilitas, dan Kekacauan Platform
  • Daftar Periksa Kinerja
  • Daftar Periksa Aksesibilitas
  • Daftar Periksa Kekacauan Platform
• Pengaturan dan Praktik Terbaik Terakhir
  • Gradien Tidak Muncul
  • iOS build gagal setelah instalasi
  • Uji coba gagal dengan kesalahan modul native

Mengapa Aplikasi React Native Anda Membutuhkan Gradien

Banyak UI mobile gagal karena alasan yang sama. Tata letaknya baik, jaraknya baik, tipografiannya dapat diterima, tapi layar masih terasa mati. Warna solid membuat segalanya terlihat seperti tempat sampah kecuali sistem visual lainnya melakukan banyak pekerjaan.

A Komponen Gradien React Native Komponen ini memperbaiki masalah itu dengan sangat sedikit code. Ia menambahkan kedalaman, membuat pemisahan antara bagian, dan memberikan elemen prioritas tinggi berat visual yang jelas. Latar belakang gradien yang baik dapat membuat layar login terasa sengaja. Tombol gradien yang baik dapat membuat aksi utama jelas tanpa harus bergantung pada bayangan berat atau batas yang terlalu keras.

Dengan 2019, expo-linear-gradient dan react-native-linear-gradient muncul di lebih dari 42% proyek React Native, yang merupakan signal kuat bahwa gradien bukanlah efek khusus lagi. Mereka adalah alat UI standar dalam aplikasi produksi, bukan dekorasi yang dipasang di akhir, seperti yang disebutkan dalam tulisan tentang pengadopsian gradien React Native.

Apa yang dapat dilakukan gradien dengan baik

• Membuat kedalaman: Tampilan layar dengan latar belakang datar sering terkesan tidak selesai. Campuran halus dari atas ke bawah membuat permukaan terlihat berlapis.
• Mengarahkan perhatian: Elemen CTAs utama, kartu onboarding, dan judul hero menonjol tanpa menambahkan kebisingan visual.
• Mengganti aset gambar: Dalam banyak kasus, gradasi memberikan kesan yang lebih baik tanpa mengirimkan gambar latar belakang tambahan.

Aturan praktis: Pakai gradasi di mana hierarki penting. Latar belakang, kartu hero, permukaan CTAs, dan overlay media yang paling menguntungkan. Bidang formulir, daftar padat, dan kontainer teks biasanya tidak.

There’s also a product design angle here. Teams working across platforms already spend time trying to keep interfaces consistent. If that’s part of your stack, these Pilih Jalur Anda Expo vs React Native Tanpa Bungkus Menggunakan aset yang lebih sedikit, permukaan yang dapat digunakan kembali lebih banyak, dan sistem visual yang dapat dipertahankan di berbagai layar.

Pilih Jalur Anda Expo vs React Native Tanpa Bungkus

Ini adalah cabang yang menyebabkan sebagian besar kesulitan. Rendering API terasa hampir identik di kedua library, tetapi pengaturan tidak.

Jika Anda berada di aplikasi Expo yang diatur, gunakan expo-linear-gradientJika Anda berada di aplikasi React Native dasar, gunakan react-native-linear-gradientJangan mencoba membingungkan garis-garis tersebut kecuali Anda tahu dengan pasti mengapa Anda melakukannya.

Pengaturan Expo

Expo adalah jalur yang lebih halus. Instalasi mudah, versi yang sesuai diatur untuk Anda, dan Anda tidak perlu berpikir tentang penghubungan native.

Instalasikan seperti ini:

npx 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 is the right choice when you want fast setup, sane defaults, and fewer native edges. That’s also why teams exploring advanced Expo workflows often end up using an hanya ketika jalur yang diatur tidak lagi mencakup kebutuhan aplikasi. Hanya ketika jalur yang diatur tidak lagi memenuhi kebutuhan aplikasi.

Konfigurasi React Native Dasar

Konfigurasi React Native Dasar memberikan akses langsung ke modul native, tetapi Anda harus menghadapi sisi kasar.

Install the package:

npm install 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',
  },
});

Dimana proyek dasar biasanya gagal

Bahwa bagian yang hilang dalam tutorial kebanyakan adalah pengujian dan pengaturan native. Menurut Ringkasan diskusi Stack Overflow ini, 68% dari topik diskusi Stack Overflow pada tahun 2024 hingga 2025 melibatkan gagalnya modul native dalam konfigurasi React Native dasardan sumber yang sama mencatat masalah yang berulang dengan mocking Jest dan konflik CocoaPods iOS.

Pasang mock secara eksplisit jika Anda menggunakan Jest di aplikasi dasar:

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

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

Dan rujuk file pengaturan tersebut dalam konfigurasi Jest Anda:

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

Reaksi Native yang sederhana bekerja dengan baik untuk gradient. Namun, tidak memaafkan setup yang tidak lengkap. Banyak kegagalan bukanlah bug visual. Mereka adalah masalah penghubung, pods, atau lingkungan uji.

Berikut adalah tabel keputusan yang praktis:

Teknik Gradien Utama untuk Komponen UI

Saat ini, pendekatan umum adalah menggunakan setelan kecil gradient yang sama secara berulang-ulang. Latar belakang, tombol, dan judul. Jika ketiga hal tersebut solid, Anda dapat menggunakannya kembali di banyak layar.

Model mental yang berguna adalah ini:

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

Jika layar splash atau layar masuk Anda menggunakan gradasi, maka hal ini akan berpadu dengan pola startup yang lebih luas seperti yang dijelaskan di sini Layar latar belakang penuh dengan gradien.

Latar Belakang Penuh dengan Gradien

Pola ini adalah yang paling sederhana dan dapat 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,
  },
});

A diagonal blend biasanya terasa lebih dinamis daripada yang vertikal secara default. Itu karena start={{ x: 0, y: 0 }} dan end={{ x: 1, y: 1 }} adalah pilihan default yang baik ketika layar hampir saja dekoratif.

Tidak pilih warna secara isolasi. Uji mereka di balik teks nyata, ikon, dan gaya status bar. Sebuah palet yang terlihat bagus di Figma bisa gagal secara instan ketika konten ditempatkan di atasnya.

Botton gradient yang masih berperilaku seperti tombol

Kesalahan umum di sini adalah menempatkan perilaku sentuh langsung pada gradient dan melupakan tentang status disabled, feedback tekan, atau konsistensi padding. Jaga tombol semantik dan biarkan gradient 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, gradient horizontal seringkali lebih mudah dibaca daripada diagonal satu. Ini menjaga label stabil dan menghindari membuat kontrol terasa miring.

Tekst gradient dengan masker

Polanya ini yang paling bercahaya di set, dan itu berguna ketika Anda menjaganya. Judul hero, banner upgrade, dan teks headline kosong adalah kandidat yang baik. Teks paragraf tidak.

Anda perlu @react-native-masked-view/masked-view.

npm install @react-native-masked-view/masked-view

Membangun masker 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 Yang paling penting ketika Anda ingin warna satu mengisi ruang visual lebih banyak daripada warna lainnya. Jika campuran terasa kotor, kurangi jumlah warna terlebih dahulu. Biasanya itu memperbaiki desain lebih cepat daripada menyesuaikan setiap stop.

Memberi Gradien Hidup dengan Animasi

Gradien statis memberikan kesan profesional. Gradien animasi memberikan umpan balik.

Penggunaan yang paling berguna bukanlah latar belakang yang berkilau. Itu adalah loader yang berkilau. Efek itu memberitahu pengguna bahwa aplikasi aktif, data sedang datang, dan tata letak yang mereka lihat sengaja bukan rusak.

Komponen berkilau juga melengkapi pola gerakan lainnya. Jika aplikasi Anda sudah menggunakan ikon animasi atau loader, ini Petunjuk Lottie di React Native bermanfaat untuk menentukan kapan gradien berkilau cukup dan kapan aset animasi yang lebih kaya membuat lebih banyak arti.

Loader berkilau yang terasa asli

Versi yang paling sederhana dan dapat diandalkan react-native-reanimated untuk memindahkan band gradien di atas tempat penampungan yang dipotong.

Instal Reanimated jika belum ada di aplikasi Anda, kemudian 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,
  },
});

Apa yang membuat ini berfungsi adalah Anda tidak mencoba menganimasikan definisi gradasi itu sendiri. Anda menganimasikan lapisan gradasi di atas tempat penampungan statis. Itu lebih sederhana, lebih mudah dipahami, dan biasanya lebih stabil di berbagai perangkat.

Berikut adalah gambaran visual dari efek tersebut dalam prakteknya:

Komponen yang dianimasikan

Catatan implementasi yang beberapa hal penting:

• Gunakan clipping: Ayahanda memerlukan overflow: 'hidden', atau shimmer akan menyebar di luar sudut bulat.
• Tetapkan lebar band tipis: Lapisan animasi yang lebih kecil lebih mudah disesuaikan daripada menganimasikan seluruh permukaan.
• Sesuaikan warna dasar dengan layar: Loader yang dianimasikan harus sesuai dengan tata letak sekitar, bukan terlihat seperti widget yang terpisah.

Gradien yang dianimasikan bekerja paling baik ketika pengguna hampir tidak menyadarinya. Jika shimmer menjadi hal yang paling keras di layar, itu sudah terlalu banyak.

Kinerja Aksesibilitas dan Keterampilan Platform

Setelah gradasi bergerak dari layar demo ke produksi, kekhawatiran berubah. code masih terlihat sederhana, tapi perilaku rendering, ketepatan bacaan, dan konsistensi platform mulai lebih penting daripada efek awal.

Jika Anda memperketat responsivitas aplikasi secara lebih luas, ini Pedoman Optimasi Kinerja Aplikasi Mobile Mengurangi pekerjaan yang tidak perlu, mengukur pada perangkat nyata, dan memperbaiki tampilan yang paling sering dilihat pengguna.

Daftar Periksa Kinerja

Gradasi native biasanya efisien, tapi Anda masih bisa salah gunakan.

• Lebih baik gunakan gradasi daripada gambar dekoratif besar: Mereka sering lebih mudah dikirim dan lebih mudah disesuaikan dengan ukuran layar yang berbeda.
• Hindari menumpuk banyak layer transparan yang berlapis: Satu latar belakang gradasi sudah cukup. Banyak lapisan transparan yang berlapis dengan efek blur dan animasi berat bisa mahal.
• Memoisasi komponen yang dapat digunakan kembali: Jika kartu gradasi digunakan dalam daftar, jaga agar properti tetap stabil dan hindari merender ulang untuk keadaan induk yang tidak terkait.

Aturan yang baik adalah menjaga gradasi tetap struktural, bukan berlebihan. Gunakan mereka untuk mendefinisikan permukaan, bukan setiap baris dalam feed yang padat.

Daftar checklist aksesibilitas

Gradasi dapat merusak ketelitian cepat karena perubahan kontras di seluruh permukaan.

• Uji teks terhadap area terang paling ringan: Jika teks putih hanya berfungsi di sisi gelap dari campuran, maka tidak berfungsi.
• Tambahkan scrim jika diperlukan: Tutup gelap yang halus antara latar belakang dan teks seringkali lebih baik daripada mengubah seluruh palet.
• Simpan teks gradasi untuk kopi besar tampilan: Terlihat baik pada judul. Pilihan yang buruk untuk label kecil, teks bantuan, atau apa pun yang kritis untuk menyelesaikan tugas.

Periksa titik paling buruk pada gradasi, bukan yang paling cantik.

Daftar checklist kekurangan platform

iOS dan Android biasanya menampilkan gradasi yang sama dengan ketepatan yang cukup baik, tetapi tidak selalu sempurna.

Juga perhatikan pengaturan status bar dan area aman. Sebuah gradasi yang terlihat seimbang di simulator dapat terasa terlalu berat di perangkat dengan notch jika konten dan latar belakang tidak mempertimbangkan ruang tambahan tersebut.

Mengatasi Masalah dan Praktik Terbaik Terakhir

Berikut versi singkat yang saya simpan dalam catatan proyek.

• Match library dengan alur kerja: expo-linear-gradient untuk aplikasi Expo yang di-manajemen react-native-linear-gradient untuk React Native yang tidak berpakaian.
• Tetapkan gradasi dengan tujuan: Latar belakang, CTAs, overlay, dan teks hero adalah kasus penggunaan yang kuat.
• Kontrol arah secara sengaja: Horizontal untuk tombol, diagonal untuk latar belakang dekoratif, hanya tersembunyi untuk teks besar.
• Desain untuk konten, bukan keadaan kosong: Uji dengan salinan asli, ikon, dan penanganan status bar.
• Tangani setup dasar sebagai setup native: Pods, penghubung, dan mock Jest bukanlah detail yang opsional.

Tiga kegagalan umum muncul secara berulang.

Gradien tidak muncul.

Penyebab: komponen tidak memiliki ukuran yang terlihat.

Pembetulan: berikan flex: 1Sebuah gradasi dengan tidak memiliki box layout tidak akan menampilkan dalam cara yang bermakna.

iOS build gagal setelah instalasi.

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

Fix: jalankan pod install dalam iosbersihkan folder build jika perlu, kemudian bangun kembali aplikasi. Dalam proyek tanpa bungkus, instal paket sendiri biasanya tidak cukup.

Pengujian gagal dengan kesalahan modul native

Penyebab: Jest mencoba memuat modul native asli.

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

Jika Anda ingin mengingat satu ide dari panduan ini, ingatlah ini: gradient itu sendiri mudah. Konfigurasi produksi yang siap digunakan adalah upaya utama. Setelah Anda memilih library yang tepat untuk arsitektur aplikasi Anda, segalanya setelah itu menjadi lebih prediktif.

Jika tim Anda mengirimkan aplikasi mobile hybrid dan ingin memperbarui JavaScript, CSS, salinan, konfigurasi, dan aset tanpa menunggu tinjauan toko, Capgo perlu dilihat. Ini memberikan tim CapacitorJS dan Electron pembaruan hidup yang dikendalikan, saluran peluncuran, perlindungan rollback, dan visibilitas rilis tanpa mengubah proses pengiriman Anda menjadi kotak hitam.