Introduction to React Native Style

Untuk menambahkan style pada react native cukup dengan memanggil props "style" yang terdapat pada component utama dari react native, props style akan berisi sebuah object dari style itu sendiri. 

const ViewRadius = () => {
    return ( <View style={styles.radiusOne}> );
}

nilai dari style dapat juga bernilai array ketika component tersebut ingin memiliki nilai style lain nya

const ViewRadius = () => {
    return ( <View style={[styles.styleOne,styles.styleTwo]}> );
}

 penggunaan style bisa juga digunakan dengan cara langsung memanggil style yang akan di terapkan pada sebuah component

const ViewRadius = () => {
    return ( <View style={{flex: 1,  padding: 20, margin: 10}}> );
}

Rounded Style

Membuat lengkungan pada component react native terutama pada component View dapat dilakukan dengan menambahkan borderRadius berikut merupakan penjelasan singkat mengenai style tersebut.

• borderRadius : digunakan untuk membuat lengkungan di semua sudut
• borderTopStartRadius  : untuk membuat lengkungan di sudut kiri bagian atas
• borderTopEndRadius  : untuk membuat lengkungan di sudut bagian kanan atas
• borderBottomStartRadius : untuk membuat lengkungan di sudut kiri bagian bawah
• borderBottomEndRadius : untuk membuat lengkungan di sudut kanan bagian bawah

 berikut adalah contoh penggunaan style pada component view