React native de tek kodla ham IOS hem de Android çalıştırmak gibi bizlere kolaylık sağlamaktadır. Tabi bazen platformlara native seviyede müdahale edilmesi gerekebilir. Bugün sizlere React Native de tarih seçiminde kullanmak için sizlere bir componenti anlatmak istiyorum. Componenti anlatırken faydalandığım kütüphanede kullandığım özelliklere de değinecem. İlk olarak kütüphaneyi projemize entegre etmek için aşağıdakini projemize dahil etmemiz gerekmektedir. İlgili kütüphanenin npm sayfasına buradan da ulaşabilirsiniz. Aynı isimde farklı kütüphanelerle karıştırılabilir.

npm i react-native-calendars

Aşağıdaki gibi projemize import edebiliriz.

import { Calendar, LocaleConfig } from "react-native-calendars";

İlgli kütüphaneyi projemize import ettikten sonra kullanımına geçebiliriz. Aşağıda kodun örnek kullanımı görülmektedir. Kullanımı gayet basit, aşağıdaki ağırlıklı olarak stillendirme ile ilgili kod parçacıkları bulunmaktadır. Theme properties kısmına vereceğimiz stillendirme sasyesinde tarihi istediğimiz gibi stillendirebilirsiz. 

<Calendar
    key={`${colors.primary_500}-${colors.neutrals_50}`}
    firstDay={1} // Haftanın ilk günü Pazartesi
    onDayPress={handleDayPress}
    markedDates={{
        [tempSelectedDate]: {
            selected: true,
            selectedColor: colors.primary_500,
        },
    }}
    style={styles.calendar}
    theme={{
        backgroundColor: colors.neutrals_50,
        calendarBackground: colors.neutrals_50,
        textSectionTitleColor: colors.neutrals_600,
        textSectionTitleDisabledColor: colors.neutrals_400,
        selectedDayBackgroundColor: colors.primary_500,
        selectedDayTextColor: colors.neutrals_50,
        todayTextColor: colors.primary_500,
        dayTextColor: colors.neutrals_950,
        textDisabledColor: colors.neutrals_400,
        dotColor: colors.primary_500,
        selectedDotColor: colors.neutrals_50,
        arrowColor: colors.primary_500,
        disabledArrowColor: colors.neutrals_400,
        monthTextColor: colors.neutrals_950,
        indicatorColor: colors.primary_500,
        textDayFontWeight: "400",
        textMonthFontWeight: "600",
        textDayHeaderFontWeight: "500",
        textDayFontSize: 16,
        textMonthFontSize: 18,
        textDayHeaderFontSize: 14,
    }}
/>

Kullanım default olarak ingilizce gelmektedir. Eğer türkçe gelmesini isterseniz  Dosyamızın üst kısmında aşağıdaki kod parçacığı eklenmesi gerekmektedir. Ben örnek olması amacıyla takvimi türkçe olarak ayarladım. ona göre aylar ve günlerin uzun ve kısa hallerini belirterek tasarımasl sorunların önüne geçilmesi sağlanıyor.

LocaleConfig.locales[`tr`] = {
    monthNames: [
        "Ocak", "Şubat", "Mart", "Nisan", "Mayıs", "Haziran",
        "Temmuz", "Ağustos", "Eylül", "Ekim", "Kasım", "Aralık"
    ],
    monthNamesShort: [
        "Oca", "Şub", "Mar", "Nis", "May", "Haz",
        "Tem", "Ağu", "Eyl", "Eki", "Kas", "Ara"
    ],
    dayNames: [
        "Pazar", "Pazartesi", "Salı", "Çarşamba",
        "Perşembe", "Cuma", "Cumartesi"
    ],
    dayNamesShort: ["Paz", "Pts", "Sal", "Çar", "Per", "Cum", "Cmt"],
    today: "Bugün"
};
LocaleConfig.defaultLocale = "tr";

Kütüphanenin kullanımı bu şekilde kendi uygulamanıza göre component haline getirip geliştirebilirsiniz. Anlatılmak istenen tarih componenti bu şekildedir. Ekran çıktısı aşağıda gösterilmiştir.