Master Gradient Linear React Native: UI yang Indah pada 2026

Kamu mungkin pernah menghadapi dua situasi.

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

Situasi itu adalah titik di mana kebanyakan tutorial berhenti berguna. Komponen API sederhana. Pilihan lingkungan bukanlah. colors prop dan lebih lanjut tentang apakah Anda berada di alur kerja Expo yang diatur atau berurusan dengan penautan native, pods, dan mock tes sendiri.

Daftar Isi

• Mengapa Aplikasi React Native Anda Membutuhkan Gradien?
  • Apa yang Gradien Lakukan dengan Baik
• Pilih Jalur Anda Expo vs Pengaturan React Native Tunggal
  • Pengaturan Expo
  • Pengaturan React Native Tunggal
  • Dimana Projek Tunggal Biasanya Patah
• Teknik Gradien Utama untuk Komponen UI
  • Latar Belakang Gradien Penuh
  • Button Gradien yang Tetap Berperilaku seperti Button
  • Teks Gradien dengan Mask
• 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
• Memecahkan Masalah dan Praktik Terbaik Terakhir
  • Gradien tidak muncul
  • Build iOS gagal setelah instalasi
  • Uji coba gagal dengan kesalahan modul native

Mengapa Aplikasi React Native Anda Membutuhkan Gradien

Apa yang salah dengan banyak UI mobile. Tampilan layoutnya baik, jaraknya baik, tipografinya baik, tapi layar masih terasa mati. Warna solid membuat segalanya terlihat seperti tempat sampah kecuali sistem visual lainnya melakukan banyak pekerjaan.

A Komponen Gradien Linear React Native component fixes that with very little code. It adds depth, creates separation between sections, and gives high-priority elements a clear visual weight. A good gradient background can make a login screen feel intentional. A good gradient button can make the primary action obvious without resorting to heavy shadows or overly loud borders.

Dengan 2019, expo-linear-gradient dan react-native-linear-gradient muncul di lebih dari 42% proyek React Native, yang merupakan tanda kuat bahwa gradien 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 gradien React Native.

Apa yang baik dari gradien

• Membuat kedalaman: Layar dengan latar belakang datar sering terlihat tidak selesai. Blending top-to-bottom yang halus membuat permukaan terasa berlapis.
• Mengarahkan perhatian: Elemen utama, kartu onboarding, dan judul hero menonjol tanpa menambahkan kebisingan visual.
• Ganti aset gambar: Di banyak kasus, gradient memberikan kesan yang lebih baik tanpa mengirimkan latar belakang gambar tambahan.

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

Ada juga sudut desain produk di sini. Tim yang bekerja di berbagai platform sudah menghabiskan waktu untuk menjaga agar antarmuka konsisten. Jika itu bagian dari stack Anda, praktek 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. Pilih Jalur Anda Expo vs React Native Tidak Berpakaian

Ini adalah cabang yang menyebabkan sebagian besar rasa sakit. 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 yang tidak berpakaian, gunakan expo-linear-gradientPraktik 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. react-native-linear-gradient. Jangan mencoba memudahkan garis-garis tersebut kecuali Anda tahu persis mengapa Anda melakukannya.

Pengaturan Expo

Pengaturan Expo adalah jalur yang lebih halus. Instalasi menjadi lebih mudah, versi yang sesuai diatur untuk Anda, dan Anda tidak perlu memikirkan 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',
  },
});

Pengaturan Expo adalah pilihan yang tepat ketika Anda ingin setup yang cepat, pengaturan yang lebih baik, dan sedikit sisi native. Itulah juga mengapa tim yang menjelajahi pengaturan Expo yang lebih maju sering menggunakan klien pengembangan Expo untuk kemampuan native yang disesuaikan hanya ketika jalur yang diatur tidak lagi mencakup kebutuhan aplikasi. Pengaturan React Native yang tidak berpakaian

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

Instal paket seperti ini:

__CAPGO_KEEP_0__

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 sederhana biasanya gagal

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

Jika Anda menggunakan Jest di 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:

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

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

Berikut adalah tabel keputusan praktis:

Teknik Gradien Dasar untuk Komponen UI

Metode yang umum digunakan adalah menggunakan set yang kecil dari pola gradien yang sama secara berulang. Latar belakang. Tombol. Judul. Jika ketiga hal tersebut solid, Anda dapat menggunakannya di banyak layar.

Apa yang perlu diingat adalah ini:

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

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

Patron ini adalah yang paling sederhana dan 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 }} Panduan Layar Masuk React Native

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

Button gradient yang masih berperilaku seperti tombol

Kesalahan umum di sini adalah menempatkan perilaku sentuh langsung pada gradient dan melupakan tentang keadaan disabled, feedback tekan, atau konsistensi padding. Jaga semantik tombol 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. Ini menjaga label stabil dan menghindari membuat kontrol terlihat miring.

Tekst dengan masker

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

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

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

Lalu bangun 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 menempati 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 Gradients ke Hidup dengan Animasi

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

Penggunaan yang paling praktis bukanlah latar belakang yang bercahaya. Ini adalah loader yang berkilau. Efek ini 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 adalah berguna untuk menentukan kapan shimmer gradient cukup dan kapan aset animasi yang lebih kaya lebih berarti.

A loader shimmer yang terasa native

Versi yang paling sederhana dan dapat diandalkan menggunakan react-native-reanimated untuk memindahkan bandar gradient ke atas tempat penampungan yang dipotong.

Instal Reanimated jika belum ada di aplikasi Anda, kemudian buat wrapper dengan overflow: 'hidden'. Di dalamnya, animasikan layer gradient 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 gradient itu sendiri. Anda menganimasikan layer gradient ke atas tempat penampungan statis. Itu lebih sederhana, lebih mudah dipahami, dan biasanya lebih stabil di berbagai perangkat.

Berikut adalah walkthrough visual efek dalam praktek:

Komponen animasi

Apa yang perlu diperhatikan dalam implementasi beberapa hal:

• Pakai clipping: Orang tua memerlukan overflow: 'hidden', atau shimmer akan keluar dari sudut yang melengkung.
• Tetapkan lebar band yang sempit: Lapisan animasi yang lebih kecil lebih mudah disesuaikan daripada menganimasi permukaan seluruhnya.
• Match warna dasar dengan layar: Pemuat skelton harus sesuai dengan tata letak sekitar, bukan terlihat seperti widget yang terpisah.

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

Kinerja, Aksesibilitas, dan Kekacauan Platform

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

Jika Anda memperketat responsivitas aplikasi secara lebih luas, hal ini Pedoman Optimasi 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 Pemeriksaan Kinerja

Gradien native biasanya efisien, tetapi Anda masih bisa menggunakannya dengan tidak tepat.

• Lebih baik menggunakan gradien daripada gambar dekoratif besar: Mereka sering lebih mudah dikirim dan lebih mudah disesuaikan dengan ukuran layar yang berbeda.
• Hindari menumpuk banyak layer penuh layar: Lapisan latar gradien satu saja sudah cukup. Banyak lapisan gradien transparan yang berlapis plus efek blur plus animasi berat bisa sangat mahal.
• Memois komponen yang dapat digunakan kembali: Jika kartu gradien digunakan dalam daftar, jaga agar props stabil dan hindari merender ulang kartu tersebut karena perubahan status induk yang tidak terkait.

Saran yang baik adalah menggunakan gradien untuk mendefinisikan permukaan, bukan setiap baris dalam feed yang padat.

Daftar Pemeriksaan Aksesibilitas

Kontras dapat berubah di permukaan sehingga dapat mengganggu ketajaman bacaan dengan cepat.

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

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

Daftar checklist kekacauan platform:

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

Juga perhatikan penanganan status bar dan area aman. Jika gradasi yang terlihat seimbang di simulator terasa berat di atas perangkat dengan notch, maka konten dan latar belakang harus mempertimbangkan ruang tambahan tersebut.

Pengaturan dan Praktik Terbaik Terakhir

Ini adalah versi singkat yang saya simpan di catatan proyek.

• Match the library to the workflow: expo-linear-gradient untuk aplikasi Expo yang diatur react-native-linear-gradient untuk React Native yang tidak diatur.
• Tetapkan tujuan gradasi yang bermakna: Latar belakang, tombol aksi, 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 yang tidak berpakaian sebagai setup native: Pods, penghubung, dan mock Jest tidak merupakan detail yang opsional.

Tiga kegagalan umum muncul secara berulang.

Gradasi tidak muncul

Penyebab: komponen tidak memiliki ukuran yang dapat dilihat.

Solusi: berikanlah flex: 1untuk komponen tersebut

atau

tinggi eksplisit, atau

ibu dengan dimensi. pod install Suatu gradient dengan box layout tidak akan menampilkan dalam cara yang bermakna. iosPembangunan iOS gagal setelah instalasi

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

Solusi: jalankan

dalam react-native-linear-gradient bersihkan folder pembangunan jika perlu, kemudian bangun kembali aplikasi. Dalam proyek tanpa bungkus, instal paket saja biasanya tidak cukup untuk memenuhi kebutuhan ini. react-native-linear-gradient/jest/linear-gradient-mock di dalam file pengaturan Jest Anda.

Jika Anda hanya mengambil satu gagasan dari panduan ini, jangan lupa: 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 prediktif.

Jika tim Anda mengembangkan aplikasi mobile hybrid dan ingin mengirimkan pembaruan JavaScript, CSS, salinan, konfigurasi, dan aset tanpa menunggu tinjauan toko, Capgo layak untuk 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.