startingDate prop does not center the date.

According to the documentation, the startingDate prop should center the assigned date; however, my implementation is not working. I thought the view container which it is called in might be inadvertently passing on styles. I test this out by passing in different values to alignItems, alignContents, and justifyContent, but this does not seem to be the culprit.

Here is my implementation:

import React from 'react'
import CalendarStrip from 'react-native-calendar-strip'
import { StyleSheet } from 'react-native'

const HorizontalCalendar = () => {
  return (
    <CalendarStrip
        scrollable
        style={styles.calendarStyle}
        calendarColor={'transparent'}
        iconContainer={{flex: 0.002,}}
        startingDate={new Date()}
        selectedDate={new Date()}
        rightSelector={[]}
        leftSelector={[]}
        dayContainerStyle={{}}
        dateNumberStyle={styles.calendarDateNumber}
        highlightDateNumberStyle={styles.calendarHighlightDateNumber}
        dateNameStyle={styles.calendarDateName}
        highlightDateNameStyle={styles.calendarHighlightDateName}
        highlightDateContainerStyle={styles.calendarHighlightDateContainer}
        calendarHeaderStyle={styles.calendarHeader}
        calendarHeaderPosition='below'
        calendarHeaderFormat='MMMM'
    />
  )
}

export default HorizontalCalendar

const styles = StyleSheet.create({
calendarStyle: {
        height: '20%',  
        paddingBottom: 10,
    },
    calendarDateNumber: {
        color: '#4B4046',
        fontSize: 18,
        fontWeight: '400',
    },
    calendarHighlightDateNumber: {
        color: '#FDFCFD',
        fontSize: 18,
        fontWeight: '700',
    },
    calendarDateName: {
        color: '#8E7C87',
        fontSize: 12,
        fontWeight: '400',
    },
    calendarHighlightDateName: {
        color: '#FDFCFD',
        fontSize: 12,
        fontWeight: '400',
    },
    calendarHighlightDateContainer: {
        backgroundColor: '#C11277',
        borderRadius: 8,
    },
    calendarHeader: {
        color: '#8E7C87',
        fontSize: 16,
        fontWeight: '700',
    },
})

This is the rendered view:

[peacechen]

Centering the selected date isn’t a feature. The documentation that mentions “centering” is for the week, not a specific day. Please submit a PR if you’d like to add a prop for that.

One way to implement this in your app is to set useIsoWeekday={false}, then set the startingDate prop offset to the date needed to center selectedDate. In your example with selectedDate set to Wed, the startingDate should be Sun.

[peacechen]

Yes the documentation could use improvement. PRs are welcome for anything including documentation 😄

Hope you were able to get the centering working.