CalendarYearView.js (screen navigating to)

import React, { Component } from "react";
import { View, Text, ScrollView } from "react-native";
import style from "./style";
import CalenderAppHeader from "./../../components/CalenderAppHeader";
import YearButton from "./YearButton";
import MonthCalendar from "./MonthCalendar";

class CalendarYearView extends Component {

    static SCREEN_KEY = "CalendarYearView";

    constructor (props) {
        super(props);
        this.state = {
            year: new Date().getFullYear(),
        };
        this.monthArray = this.getArrayOfMonths();
    }

    /**
     * This method is used to create a grid of arrays representing months in a year.
     * @return [[1, 2, 3], [4, 5, 6], [7, 8, 9], [10, 11, 12]].
     */
    getArrayOfMonths = () => {
        return Array.from(
            {length: 4},
            (v, i) => {
                return Array.from(
                    {length: 3},
                    (v, j) => this.zeroPad (i*3 + j+1));
            });
    };

    /**
     * This method is used to prefill zero if number is less than base
     * zeroPad(3, 10) = 03
     * zeroPad(12, 10) = 12
     * @param {Number} nr - any Number
     * @param {Number} base - 10, 100, 1000
     */
    zeroPad(nr,base = 10){
        var  len = (String(base).length - String(nr).length)+1;
        return len > 0? new Array(len).join('0')+nr : nr;
    }

    onYearPress = (year) => {
        this.setState(() => {
            return { year };
        });
    };

    render () {
        return (
            <View style={style.container}>
                <CalenderAppHeader onAddButton={() => {}} />
                <View style={style.content}>
                    <YearButton onPress={this.onYearPress} year={this.state.year} />
                    <ScrollView style={style.scroll}>
                        {this.monthArray.map(this.renderMonthsGrid)}
                    </ScrollView>
                </View>
            </View>
        );
    }

    renderMonthsGrid = (monthNumbers, index) => {
        return (
            <View key={index} style={style.threeMon}>
                {monthNumbers.map(monthNum => {
                    return (<MonthCalendar
                                events={{
                                    "2018-11-09": [{ dotColor: 'green'},
                                    {dotColor: 'blue'}],
                                    "2018-03-11": {}
                                }}
                                month={monthNum} year={this.state.year} key={monthNum} />);
                })}
            </View>
        );
    };
}

export default CalendarYearView;