React Native RadioButton nasıl yapılır?

Bildiğiniz gibi React Native‘de varsayılan olarak gelen bileşenlerin sayısı azdır. Bunun sebebi, React Native uygulamasını mümkün olduğunca düşük boyutlarda tutmaktır. Genellikle <View> <Text> <Image> ve <FlatList> gibi bileşenler kullanılarak uygulamalar geliştirilir. Eğer tasarım belirli bir kalıba sahipse (Örn: material tasarım) UI kit’leri kullanarak uygulama geliştirmek de mümkündür. Aksi takdirde kendi tasarım bileşenimizi kendimiz oluşturmamız gerekecektir. Bu yazımda da sizlere, özel bir RadioButton bileşeninin nasıl yapılacağına değineceğim.

Projenin oluşturulması

Öncelikle projeminizi oluşturalım, git’e ekleyelim, vscode ile açalım ve boş haliyle çalıştıralım:

npx react-native init SampleRNRadioButton --template react-native-template-typescript
cd SampleRNRadioButton
git init
git add .
git commit -m "First commit"
code .
npx react-native run-ios

Uygulamanın çalıştığını gördüysek artık oluşturmamız gereken bileşenlerimizi sıralayabiliriz:

• RadioButton: Bir metin ve radioButton’ı gösteren daire şeklinde bir View içerecektir.
• RadioGroup: RadioButton’ların yer aldığı listeyi görüntüleyecektir.
• App: RadioGroup ve liste başlığı gibi diğer elemanları görüntüleyecektir.

Şimdi App.tsx dosyasına geçelim ve ilgili değişiklikleri uygulayalım.

App.tsx dosyasında değişikliklerin yapılması

Şimdi listede görüntülememiz için kullanacağımız veri tipini ve veri setini oluşturalım:

type Item = {
  id: number;
  name: string;
};
const items: Item[] = [
  {id: 1, name: 'Apple'},
  {id: 2, name: 'Orange'},
  {id: 3, name: 'Strawberry'},
];

RadioButton’ın seçimi durumunda ilgili seçilen item bilgisinin tutulabilmesi için App bileşeni içerisinde selected değişkenini oluşturalım ve onSelected metodunu yazarak, seçim yapıldığında setSelected metodunu çağıralım:

const [selected, setSelected] = useState<Item>();
const onSelected = (item: Item) => {
  setSelected(item);
};

return edilecek kısımda ise bir <Text> başlığı ile birlikte, daha sonra oluşturacağımız bir RadioGroup bileşeninin return edilmesini sağlayalım:

return (
  <SafeAreaView style={styles.container}>
    <Text style={styles.header}>
      Please select an item: {selected ? selected.name : 'Nothing selected'}
    </Text>
    <RadioGroup selected={selected} onSelected={onSelected} items={items} />
  </SafeAreaView>
);

Burada hiç seçim yapılmadıysa “Nothing selected” yazacak, aksi takdirde seçilen meyvenin adını yazacaktır.

Ayrıca oluşturacağımız RadioGroup ve RadioGroup’un barındıracağı RadioButton bileşeni için aşağıdaki prop tiplerini oluşturalım:

export type RadioGroupProps = {
  items: Item[];
  selected?: Item;
  onSelected(item: Item): void;
};
export type RadioButtonProps = {
  item: Item;
  selected?: Item;
  onSelected(item: Item): void;
};

App.tsx’in son hali aşağıdaki gibi olacaktır:

import React, {useState} from 'react';
import {SafeAreaView, StyleSheet, Text} from 'react-native';
import RadioGroup from './RadioGroup';
export type Item = {
  id: number;
  name: string;
};
export type RadioGroupProps = {
  items: Item[];
  selected?: Item;
  onSelected(item: Item): void;
};
export type RadioButtonProps = {
  item: Item;
  selected?: Item;
  onSelected(item: Item): void;
};
const App = () => {
  const [selected, setSelected] = useState<Item>();
  const items: Item[] = [
    {id: 1, name: 'Apple'},
    {id: 2, name: 'Orange'},
    {id: 3, name: 'Strawberry'},
  ];
  const onSelected = (item: Item) => {
    setSelected(item);
  };
  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.header}>
        Please select an item: 
        {selected ? selected.name : 'Nothing selected'}
      </Text>
      <RadioGroup selected={selected} onSelected={onSelected} 
        items={items} />
    </SafeAreaView>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  header: {
    padding: 10,
  },
});
export default App;

Şimdi RadioButton’ları bünyesinde barındıracak olan RadioGroup bileşeninin oluşturulmasına geçebiliriz.

RadioGroup bileşeninin oluşturulması

Proje içerisinde RadioGroup.tsx adında bir dosya oluşturalım ve içerisine bir FlatList ekleyelim. FlatList bileşenini kullanmamızın nedeni, yüzlerce RadioButton olduğu durumda efektif bir şekilde listenin render edilebilmesi içindir. Ayrıca aldığımız prop’ları RadioButton bileşenine göndermek üzere verelim:

import React from 'react';
import {View, FlatList} from 'react-native';
import {RadioGroupProps} from './App';
import RadioButton from './RadioButton';
const RadioGroup = (props: RadioGroupProps) => {
  const {items, selected, onSelected} = props;
  return (
    <View>
      <FlatList
        data={items}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({item}) => (
          <RadioButton
            item={item}
            selected={selected}
            onSelected={onSelected}
          />
        )}
      />
    </View>
  );
};
export default RadioGroup;

Şimdi FlatList içerisinde render edilecek olan RadioButton bileşenini oluşturalım:

RadioButton bileşeninin oluşturulması

Proje içerisinde RadioButton.tsx adında bir dosya oluşturalım. RadioButton bileşeninde tüm satırın tıklanabilir olması için TouchableOpacity kullanalım ve yuvarlark radioButton görünümü için stil özelliklerini oluşturalım. Ayrıca seçim yapıldığı anda yuvarlak radio button içeriğinin dolu olması için aşağıdaki gibi selected?.id === item.id şartını ekleyelim. RadioButton.tsx’in son hali aşağıdaki gibi olacaktır:

import React from 'react';
import {StyleSheet, View, Text, TouchableOpacity} from 'react-native';
import {RadioButtonProps} from './App';
const RadioButton = (props: RadioButtonProps) => {
  const {item, selected, onSelected} = props;
return (
    <TouchableOpacity
      style={styles.radioButton}
      onPress={() => onSelected(item)}>
      <Text>{item.name}</Text>
      <View style={styles.button}>
        {selected?.id === item.id && <View style={styles.selectedButton} />}
      </View>
    </TouchableOpacity>
  );
};
const styles = StyleSheet.create({
  radioButton: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    backgroundColor: '#e5e5e5',
    padding: 12,
  },
  button: {
    height: 24,
    width: 24,
    borderRadius: 24,
    borderWidth: 2,
    borderColor: '#999',
    alignItems: 'center',
    justifyContent: 'center',
  },
  selectedButton: {
    width: 14,
    height: 14,
    borderRadius: 14,
    backgroundColor: '#1976d2',
  },
});
export default RadioButton;

Uygulamayı çalıştırdığınızda ekran görüntüsü aşağıdaki gibi olacaktır:

Sonuç olarak

Uygulama içerisine harici bir arayüz kütüphanesi eklemeden kendi RadioButton bileşenimizi oluşturarak kullandık. İstediğimiz takdirde bu bileşeni daha da özelleştirebiliriz. Örneğin, bir satın alım senaryosunda kredi kartı ve havale gibi ödeme tipleri için ikonlu bir seçim senaryosu oluşturabiliriz. Kendi bileşenimiz bize bu gibi özgürlükleri sunduğu için hazır bileşenlere göre daha özelleştirilebilir bir yapı kurmuş olduk. Siz de bu yazı içerisindeki yönergeleri takip ederek kendi bileşeninizi oluşturabilir, ilgili arayüz özelleştirmelerini yapabilirsiniz.

Projenin bitmiş halini react-native-radiobutton-sample reposunda bulabilirsiniz. Bu yazı hakkında soru ve görüşlerinizi aşağıdaki yorumlar kısmından yazabilirsiniz. Bana destek vermek için alkış simgesine tıklayabilirsiniz. Sonraki yazımda görüşmek üzere…