How to customize view in selected date in react native UI Kitten kit

Question

Does Anyone know how too customize the view of selected Date or Range in React Native Ui Kitten kit? I have done a lot of googling and still haven't found any answer. i want to select a specific date or date range and marked that date or range when button is clicked.I am New to React native and please accept my apologies if this is a silly question. Thanks in advance.

Answer 1

The Calendar component is a "controlled component" which means that it expects the application to control its state, instead of it managing itself. (See this page from the React docs for more info.)

That means that to change the selected date, you need to:

1. listen for the "onSelect" event
2. store the selected date in state
3. pass the new date back into the component.

If you're using react hooks, then you can use a useState hook to hold the date. For a class component you need to write a handler method to update the state. Examples of both are below.

Using hooks:

import React, {useState} from 'react'

import Calendar from '@ui-kitten/components';

const MyCalendar = () => {

    const [date, setDate] = useState(new Date());

    return (
        <Calendar
            date={date}

            {/* other props */}

            onSelect={(d)=>setDate(d)}
        />
    )

};

export default MyCalendar;

Class component:

import React, {useState} from 'react'
import Calendar from '@ui-kitten/components';

class MyCalendar extends React.Component {

    constructor(props) {
        super(props)
        this.state = {date: new Date()};
    }

    handleDateChange(newDate) {
        this.setDate({
            date: newDate
        })
    }

    render() {
        return (
            <Calendar
                date={this.state.date}

                {/* other props */}

                onSelect={(date)=>this.handleDateChange(date)}
        />
    )
    }

}