Master Linear Gradient React Native: Tampilan UI yang Indah pada 2026

Anda mungkin telah mengalami salah satu dua situasi.

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

Pemisahan itu adalah di mana kebanyakan tutorial berhenti bermanfaat. Komponen API sederhana. Pilihan lingkungan bukanlah. Pengaturan linear gradient React Native yang bersih bergantung kurang pada colors prop dan lebih banyak tentang apakah Anda berada di aliran kerja Expo yang diatur atau berurusan dengan penautan asli, pods, dan mock tes sendiri.

Daftar Isi

• Mengapa Aplikasi React Native Anda Membutuhkan Gradien
  • Apa yang dapat dilakukan gradien dengan baik
• Memilih Jalur Anda Expo vs Pengaturan React Native Asli
  • Pengaturan Expo
  • Pengaturan React Native Asli
  • Di mana proyek asli biasanya gagal
• Teknik Gradien Utama untuk Komponen UI
  • Gradien latar belakang layar penuh
  • Batu tombol yang masih berperilaku seperti tombol
  • Teks gradien dengan masker
• Membawa Gradien ke Hidup dengan Animasi
  • Loader yang berkilau seperti asli
  • Komponen yang di animasi
• Kinerja Aksesibilitas dan Kekacauan Platform
  • Daftar Kinerja
  • Daftar Aksesibilitas
  • Daftar Kekacauan Platform
• Mengatasi Masalah dan Praktik Terbaik Terakhir
  • Gradien tidak muncul
  • Pembangunan iOS gagal setelah instalasi
  • Uji coba gagal dengan kesalahan modul native

Mengapa Aplikasi React Native Anda Membutuhkan Gradien

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

A linear gradient React Native komponen 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 gradient yang baik dapat membuat layar masuk ke dalam merasa sengaja. Tombol gradient 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 tanda kuat bahwa gradient bukanlah efek khusus lagi. Mereka adalah alat tooling UI standar di aplikasi produksi, bukan dekorasi yang dipasang di akhir, seperti yang disebutkan dalam tulisan tentang pengadopsian gradient React Native.

Apa yang dilakukan gradient dengan baik

• Buat kedalaman: Layar dengan latar belakang datar sering terlihat tidak selesai. Blending halus dari atas ke bawah membuat permukaan terasa berlapis.
• Arahkan perhatian: Elemen CTAs utama, kartu onboarding, dan judul hero menonjol tanpa menambahkan kebisingan visual.
• Ganti aset gambar: Dalam banyak kasus, gradasi memberikan Anda kesan yang lebih rapi tanpa mengirimkan gambar latar belakang tambahan.

Aturan praktis: Gunakan gradasi di mana hierarki penting. Latar belakang, kartu hero, permukaan CTA, dan overlay media mendapat manfaat terbesar. Bidang formulir, daftar padat, dan kontainer teks tubuh biasanya tidak.

Terdapat juga sudut desain produk di sini. Tim yang bekerja di berbagai platform sudah menghabiskan waktu untuk mencoba menjaga antarmuka konsisten. Jika itu bagian dari stack Anda, praktik UI dan UX lintas platform untuk aplikasi seluler ini berbaris dengan pemikiran yang sama: aset yang lebih sedikit, permukaan yang lebih dapat digunakan kembali, dan sistem visual yang dapat bertahan di berbagai layar. Memilih Jalur Anda Expo vs React Native Tanpa Bungkus

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

This is the fork that causes most of the pain. The rendering API feels almost identical in both libraries, but setup isn’t.

. Jika Anda berada di aplikasi React Native tanpa bungkus, gunakan expo-linear-gradientPilih Jalur Anda Expo vs React Native Tanpa Bungkus react-native-linear-gradient. Jangan mencoba memudahkan garis-garis tersebut kecuali Anda tahu pasti mengapa Anda melakukannya.

Pengaturan Expo

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

Pasang 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 adalah pilihan yang tepat ketika Anda ingin setup yang cepat, default yang rasional, dan sedikit sisi native yang kasar. Itulah juga mengapa tim yang menjelajahi workflow Expo yang canggih seringnya menggunakan klien pengembangan Expo untuk kemampuan native yang disesuaikan hanya ketika jalur yang diatur tidak lagi memenuhi kebutuhan aplikasi.

Pengaturan React Native yang tidak berpakaian

React Native yang tidak berpakaian memberikan akses langsung ke modul native, tetapi Anda yang harus menghadapi sisi kasar.

Pasang paket:

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

Di mana proyek sederhana biasanya gagal

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

Jika Anda menggunakan Jest dalam aplikasi sederhana, 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 rujuk file pengaturan tersebut dalam konfigurasi Jest Anda:

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

React Native sederhana bekerja dengan baik untuk gradient. Namun, tidak mengampuni pengaturan yang tidak lengkap. Banyak gagal bukanlah bug visual. Mereka adalah masalah tautan, pods, atau lingkungan pengujian.

Tabel keputusan praktis:

Teknik Gradient Dasar untuk Komponen UI

Sangat umum untuk menggunakan set kecil gradient yang sama secara berulang-ulang. Latar belakang. Tombol. Judul. Jika ketiga hal tersebut solid, Anda dapat menggunakannya di banyak layar.

A mental model yang berguna adalah ini:

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

Jika layar masuk atau layar onboarding Anda menggunakan gradasi, maka hal ini akan berpasangan dengan pola startup yang lebih luas yang dijelaskan dalam panduan layar masuk React Native ini Latar belakang layar penuh dengan gradasi.

Patuan ini adalah yang paling sederhana dan paling dapat digunakan kembali.

Blend diagonal biasanya terasa lebih dinamis daripada gradasi vertikal default. Itulah mengapa

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

dan start={{ x: 0, y: 0 }} adalah pilihan default yang baik ketika layar sebagian besar dekoratif. end={{ x: 1, y: 1 }} __CAPGO_KEEP_0__

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

Batu tombol yang masih berperilaku seperti tombol

Kesalahan umum di sini adalah memasang perilaku sentuh langsung pada gradasi dan melupakan tentang keadaan tidak aktif, feedback tekan, atau konsistensi padding. Simpanlah perilaku tombol dan biarkan gradasi 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, gradasi horizontal seringkali lebih mudah dibaca daripada gradasi diagonal. Ini menjaga label stabil dan menghindari membuat kontrol terlihat miring.

Teks gradasi dengan masker

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

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

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

Kemudian bangunlah 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 Hal 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.

Membawa Gradien ke Hidup dengan Animasi

Gradien statis memberikan Anda kesan yang rapi. Gradien animasi memberikan Anda feedback.

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

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

Loader shimmer yang terasa native

Versi yang paling sederhana dan dapat diandalkan menggunakan react-native-reanimated untuk memindahkan band gradasi di atas tempat holder yang dipotong.

Pasang Reanimated jika belum ada di aplikasi Anda, kemudian buat wrapper dengan overflow: 'hidden'. Di dalamnya, animasikan layer gradasi 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,
  },
});

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

Berikut adalah walkthrough visual efek dalam prakteknya:

Komponen yang dianimasikan

Apa yang perlu diperhatikan dalam implementasi:

• Pakai clipping: Orang tua memerlukan overflow: 'hidden', atau efek shimmer akan keluar dari sudut-sudut yang melengkung.
• Tetapkan lebar band sempit: Lapisan animasi yang lebih kecil lebih mudah diatur daripada menganimasi permukaan seluruhnya.
• Warnai dasar sesuai dengan layar: Pemuatan kerangka tulang harus sesuai dengan tata letak sekitar, bukan terlihat seperti widget terpisah.

Gradien animasi bekerja terbaik ketika pengguna hampir tidak menyadarinya. Jika shimmer menjadi hal yang paling keras di layar, maka sudah terlalu banyak.

Kinerja, Aksesibilitas, dan Keterbatasan Platform

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

Jika Anda memperketat responsifitas aplikasi secara lebih luas, hal ini Pedoman Optimalisasi Kinerja Aplikasi Mobile Memiliki mindset yang sama: mengurangi pekerjaan yang tidak perlu, mengukur pada perangkat nyata, dan mengoptimalkan permukaan yang paling sering dilihat pengguna.

Daftar Periksa Kinerja

Gradien native secara umum efisien, tetapi Anda masih bisa salah menggunakannya.

• Lebih baik menggunakan gradien daripada gambar dekoratif besar: Mereka sering lebih bersih untuk dikirim dan lebih mudah untuk disesuaikan dengan ukuran layar yang berbeda.
• Hindari menumpuk banyak layer layar penuh: Satu gradien latar belakang cukup. Beberapa gradien transparan yang berlapis plus blur plus animasi berat bisa mahal.
• Memoisasi komponen yang dapat digunakan kembali: Jika kartu gradien digunakan dalam daftar, jaga props stabil dan hindari merender ulang untuk kondisi induk yang tidak terkait.

Satu aturan yang baik adalah menjaga gradien struktural, bukan berlebihan. Gunakan mereka untuk mendefinisikan permukaan, bukan setiap baris dalam feed yang padat.

Daftar Periksa Aksesibilitas

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

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

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

Daftar checklist kebiasaan platform

iOS dan Android biasanya menampilkan gradien yang sama dengan sangat dekat, tetapi tidak selalu sempurna.

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

Pengaturan dan Praktik Terbaik Terakhir

Berikut adalah versi singkat yang saya simpan dalam catatan proyek.

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

Tiga kegagalan umum muncul secara berulang-ulang.

Gradasi tidak muncul

Karena komponen ini tidak memiliki ukuran yang dapat dilihat.

Perbaiki: Berikanlah flex: 1, tinggi eksplisit, atau induk dengan dimensi. Gradien tanpa box layout tidak akan menampilkan dalam cara yang bermakna.

Pembangunan iOS gagal setelah instalasi

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

Perbaiki: Jalankan pod install dalam ios, bersihkan folder pembangunan jika perlu, kemudian bangun kembali aplikasi. Dalam proyek tanpa bungkus, instal paket saja biasanya tidak cukup.

Uji coba gagal dengan kesalahan modul native

Karena: Jest mencoba memuat modul native yang sebenarnya.

Perbaiki: Mock react-native-linear-gradient dengan react-native-linear-gradient/jest/linear-gradient-mock dalam file pengaturan Jest Anda.

Jika Anda hanya mengingat satu gagasan dari panduan ini, ingatlah ini: gradient itu sendiri mudah. Pengaturan siap produksi adalah upaya utama. Setelah Anda memilih library yang tepat untuk arsitektur aplikasi Anda, segalanya setelah itu menjadi lebih dapat diprediksi.

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