React Native: Add an icon in header in React Native Calendars

Question

I am looking for a way to add an icon on the right side in the header and use that icon to toggle between month view and week view.

I am using CalendarList component for month view and Agenda component for weekly view.

I am using this library react-native-calendars

Answer 1

I got this one working by wrapping Icon inside TouchableHighlightand then add some css.

<TouchableHighlight underlayColor={'#EEE'} style={styles.calendarArrowWrapper} onPress={() => navigation.navigate('ScreenName')}>
                <Icon style={styles.calendarForwardArrow} type='MaterialIcons' name='view-week' />
            </TouchableHighlight>

calendarForwardArrow: {
            color: 'white',
            fontSize: 40,
        },
    calendarArrowWrapper: {
        position: 'absolute',
        top: -50,
        right: 10,
        zIndex: 2
    }