Menggunakan Component NativeBase untuk React Native

NativeBase adalah komponen user interface untuk React Native  yang dapat digunakan pada platform Android maupun iOS.

Komponen-komponen yang tersedia adalah:

• Anatomy
• Accordion
• ActionSheet
• Badge
• Button
• Card
• Check Box
• Date Picker
• Deck Swiper
• FABs
• Footer Tabs
• Form
• Header
• Icon
• Layout
• List
• Picker
• Radio Button
• Search Bar
• Segment
• Spinner
• Swipable List
• Tabs
• Thumbnail
• Toast
• Typography
• Drawer
• Ref

Bagaimana cara menggunakannya?

npm install native-base --save

react-native link

npm start

Lalu, import component sesuai yang dibutuhkan. Misalnya component Container, Header dan Title.

import { Container, Header, Title } from 'native-base';

Pada component tersebut, terdapat konfigurasi yang dapat diatur sesuai kebutuhan.

Misal, pada component Radio terdapat konfigurasi seperti berikut:

Property	Default	Option	Description
selected	false	boolean (true/false)	nilai dari pilihan

 

Contoh dari pemakaiannya seperti berikut:

<Content>
     <ListItem>
         <Left>
             <Text>Female</Text>
          </Left>
          <Right>
              <Radio selected={false} />
          </Right>
     </ListItem>

     <ListItem>
         <Left>
             <Text>Male</Text>
          </Left>
          <Right>
              <Radio selected={true} />
          </Right>
     </ListItem>
</Content>

Dari code diatas, menghasilkan list dengan radio button yang memilih text “Male“.

Selamat mencoba!

 

Referensi:

NativeBase