Dates bugging out and repeating

[Szendan]

I have copy pasted your code, changed the size of the strip to adjust to the enclosing box, left out blacklisted days and the first few dates are okay, but when I go to the next page numbers start to repeat rendering the strip useless.

I haven't seen other issues about this, so there's a high chance that I'm the dummy here

Here's my code:

import React from 'react';
import Screen from '../Screen';
import CalendarStrip from 'react-native-calendar-strip';
import { ScrollView } from 'react-native';
import moment from 'moment';

export default class TimesScreen extends React.Component {
    render() {
        return (
            <Screen>
                <CalendarStrip
                    calendarAnimation={{type: 'sequence', duration: 30}}
                    daySelectionAnimation={{type: 'border', duration: 200, borderWidth: 1, borderHighlightColor: 'white'}}
                    style={{height: 100, alignSelf: 'stretch', paddingTop: 20, paddingBottom: 10}}
                    calendarHeaderStyle={{color: 'white'}}
                    calendarColor={'#7743CE'}
                    dateNumberStyle={{color: 'white'}}
                    dateNameStyle={{color: 'white'}}
                    highlightDateNumberStyle={{color: 'yellow'}}
                    highlightDateNameStyle={{color: 'yellow'}}
                    disabledDateNameStyle={{color: 'grey'}}
                    disabledDateNumberStyle={{color: 'grey'}}
                    datesWhitelist={[{
                        start: moment(),
                        end: moment().add('20', 'days'),
                    }]}
                    iconContainer={{flex: 0.1}}
                />
                <ScrollView style={{ flex: 1, alignSelf: 'stretch' }}>
                </ScrollView>
            </Screen>
        )
    }
}

I have a video of the incident: https://user-images.githubusercontent.com/46580703/103929271-5bbdd100-511d-11eb-8275-e792d952c3a2.mp4

Also I have a OnePlus

This is not the first time I found this package and I would really like it if it wouldn't fall apart for me. Please help me figure out what is going on!

[peacechen]

What environment is your app running in? Expo, CRNA, or bare RN project? Is the debugger attached?

Please try the example app in this project: https://github.com/BugiDev/react-native-calendar-strip/tree/master/example

Example project instructions: https://github.com/BugiDev/react-native-calendar-strip#development-with-sample-application

[Szendan]

@peacechen I work in a bare RN project, debugger attached. I ran the example app on my phone. Same result: https://user-images.githubusercontent.com/46580703/103937493-1bfce680-5129-11eb-84b8-98f060107069.mp4

[peacechen]

I was very confused at first, but watching that more closely you can see that the selected date you clicked on logs as 1-22 below. The numbers are being truncated on the OnePlus due to its larger than average font. There is a note about this in the Readme: https://github.com/BugiDev/react-native-calendar-strip#device-specific-notes

Another option you could try is to adjust the responsive sizing values: https://github.com/BugiDev/react-native-calendar-strip#responsive-sizing

Also see https://github.com/BugiDev/react-native-calendar-strip/issues/86#issuecomment-635135359

[Szendan]

Thank you for your help and sorry for the time taken by my inattention. I had to change the font to something else than OnePlus' default. No it works.