Text: apa itu, menampilkan teks dan React Native

Apa itu Text di React Native

Text adalah komponen React Native untuk menampilkan konten teks. Berbeda dengan pengembangan web, di mana ada banyak tag semantik untuk teks, di React Native semua elemen teks dibuat melalui Text. Komponen ini dapat menampilkan teks sederhana maupun struktur kompleks dengan Text bersarang dan fragmen yang diberi gaya.

Text secara otomatis menangani pemutusan baris, mengatur jenis huruf, ukuran, warna, dan perataan. Komponen ini mendukung event sentuh (onPress), memungkinkan pembuatan tautan yang dapat diklik tanpa pembungkus tambahan. Batasan penting: Text tidak dapat ditempatkan langsung di View — hanya di komponen Text lain atau sebagai konten langsung.

Menurut React Native Nested Text, 2024, komponen Text bersarang mewarisi gaya dari induk. Ini memungkinkan pengaturan gaya dasar di tingkat atas dan penimpaan properti individual untuk fragmen tertentu — mirip dengan cara kerja span dengan CSS di web.

Properti dan API komponen Text

Komponen Text menyediakan serangkaian props untuk mengatur tampilan, perilaku, dan aksesibilitas. Kategori utama: props gaya (font, ukuran, warna, perataan), props tampilan (numberOfLines, lineBreakMode), dan interaktif (onPress, onLongPress).

Props tampilan teks

numberOfLines membatasi jumlah baris yang ditampilkan, menambahkan elipsis di akhir. ellipsizeMode mengatur posisi elipsis (head, middle, tail, clip). adjustsFontSizeToFit secara otomatis memperkecil ukuran font agar teks muat dalam batas yang ditentukan. lineBreakMode menentukan cara memotong teks di luar numberOfLines.

Props interaktif

Text mendukung onPress dan onLongPress untuk menangani sentuhan. Ini memungkinkan pembuatan tautan teks tanpa menggunakan TouchableOpacity. onTextLayout mengembalikan informasi tentang posisi teks setelah rendering — berguna untuk animasi dan penentuan posisi.

Props platform

Di iOS tersedia disabled (menonaktifkan teks), selectable (mengaktifkan pemilihan), dataDetectorTypes (pengenalan otomatis tautan, telepon, alamat). Di Android tersedia selectable (melalui textSelectable), includeFontPadding (menghapus spasi berlebih).

Perbedaan Text dengan elemen HTML p dan span

Meskipun Text secara visual mirip dengan tag HTML p dan span, perbedaan arsitekturnya signifikan. Di React Native tidak ada model DOM dengan elemen teks semantik — semua node teks ditangani melalui satu komponen Text dengan props yang berbeda.

Perbedaan utama — pewarisan gaya melalui nesting Text. Jika Text luar memiliki fontSize: 18 dan color: blue, semua Text bersarang mewarisi gaya ini. Properti apa pun dapat ditimpa di Text dalam dengan menetapkan nilai tertentu. Ini menghemat kode dan membuat struktur lebih bersih.

Styling teks dan font

Text mendukung sebagian besar properti CSS untuk tipografi: fontFamily, fontSize, fontWeight, fontStyle, color, letterSpacing, lineHeight, textAlign, textDecorationLine, textTransform. Di React Native, font dihubungkan di tingkat platform, bukan melalui @font-face.

Menghubungkan font kustom

Untuk menggunakan font kustom, font tersebut harus ditambahkan ke folder assets/fonts dan ditentukan di react-native.config.js. Setelah aplikasi dibangun ulang, font tersedia melalui fontFamily. React Native tidak mendukung font web (Google Fonts) secara langsung — diperlukan pengunduhan file .ttf atau .otf.

Pewarisan dan kaskade gaya

Mekanisme pewarisan di Text berbeda dari CSS. Gaya hanya ditransfer dari Text ke Text bersarang, tetapi tidak dari View ke Text. Jika perlu mengatur font untuk seluruh aplikasi, gunakan defaultProps dari komponen Text atau komponen pembungkus kustom.

<Text style={{ fontSize: 18, color: '#333' }}>
    This text is 18px and color #333
    <Text style={{ fontWeight: 'bold', color: '#007AFF' }}>
        bold and blue
    </Text>
    back to #333 color
</Text>

Dalam contoh ini, Text luar mengatur fontSize: 18 dan color: #333. Text dalam mewarisi fontSize (18), tetapi menimpa fontWeight menjadi bold dan color menjadi #007AFF. Text luar hanya mewarisi gayanya sendiri. Ini adalah analogi yang tepat dari cara kerja span bersarang di HTML.

Contoh praktis dengan Text

Mari kita lihat dua skenario umum penggunaan Text di React Native: memformat teks dengan nesting dan membuat komponen yang dapat diklik dengan batasan baris.

Contoh 1: kartu berita dengan format

Dalam contoh ini, Text digunakan untuk menampilkan teks multi-baris dengan elemen yang disorot: judul, tanggal, dan konten dengan tautan.

const NewsCard = ({ title, date, content }) => (
    <View style={styles.card}>
        <Text style={styles.title}>{title}</Text>
        <Text style={styles.date}>{date}</Text>
        <Text style={styles.content}>
            {content}
            {' ' }
            <Text
                style={styles.link}
                onPress={() => Linking.openURL(url)}
            >
                Read more
            </Text>
        </Text>
    </View>
);

Dalam struktur ini ada tiga komponen Text independen (judul, tanggal, konten), masing-masing dengan gayanya sendiri. Di dalam Text dengan konten, ada Text lain dengan onPress untuk tautan. Pola ini digunakan untuk feed berita, blog, dan komentar.

Contoh 2: teks dengan batasan baris

Untuk menampilkan pratinjau teks dengan elipsis, digunakan numberOfLines. Ini adalah pola standar untuk kartu produk dan artikel dalam daftar.

<Text
    numberOfLines={2}
    ellipsizeMode="tail"
    style={styles.preview}
>
    {longDescription}
</Text>

Properti numberOfLines = 2 membatasi teks menjadi dua baris. Jika teks lebih panjang, React Native secara otomatis menambahkan elipsis di akhir baris kedua. Parameter ellipsizeMode: 'tail' menunjukkan bahwa elipsis harus berada di akhir (head, middle, clip juga tersedia).