Text Component adalah sebuah komponen react native yang digunakan untuk membuat text di dalam tampilan. Terdapat berbagai jenis text yang bisa dibuat, text ini mirip seperti yang ada di html konsepnya, yang membedakan hanyalah syntaxnya.
Jika anda ingin membuat text di dalam react native cukup masukkan
<Text>Hello World</Text>
Tulisannya haruslah diletakaan di dalam komponen text seperti di atas, selain itu kita juga bisa memberi warna text dengan cara menambahkan props style, misal anda ingin warna textnya berwarna merah maka syntaxnya sebagai berikut
<Text style={{color: 'red'}}>Hello World</Text>
Anda juga bisa menggunakan warna lain, selama di dalam tanda petik satu, misal warna hex seperti #FF00000 warna rgb dan rgba.
Berikut adalah berbagai syntax yang digunakan untuk styling react native
Cara Mengganti Warna Text
<Text style={{color: '#FFFFFF'}}>Hello World</Text>
Cara Membuat Text Tebal
<Text style={{fontWeight: 'bold'}}>Hello World</Text>
Cara Membuat Text Miring
<Text style={{fontStyles: 'italic'}}>Hello World</Text>
Cara Membuat Text Bergaris Bawah
<Text style={{textDecorationLines: 'underline'}}>Hello World</Text>
Cara Membuat Text di dalam Text (akan memunculkan Hello berwarna merah dan World berwarna biru)
<Text style={{color: 'red'}}>Hello <Text style={{color: 'blue'}}>World</Text></Text>
Cara Membuat Text di Tengah
<Text style={{textAlign: 'center'}}>Hello World</Text>
Cara Mengganti Ukuran Font
<Text style={{fontSize: 22}}>Hello World</Text>
Cara Mengganti Font
<Text style={{fontFamily: 'raleway'}}>Hello World</Text>
Membuat Text Bergaris Tengah
<Text style={{textDecorationLines: 'line-through'}}>Hello World</Text>
Sekian dari tutorial kali ini, jika anda ingin belajar lebih lanjut dan lebih lengkap anda bisa mengikuti kelas online di codeinsia React Native Mastery V2 dan React Native Starter.
React Native Mastery V2 adalah kelas online yang membantu anda untuk belajar react native dari pemula hingga menjadi mahir, saat saya menulis artikel ini telah dilengkapi dengan ratusan materi (200+ Video) dan juga akan di update di masa depan.
sedangkan React Native Starter adalah versi gratis dari React Native Mastery V2, berisikan 60+ video dan anda bisa akses dengan gratis, bagi anda yang ingin join kelasnya silakan klik di bawah ini:
