prop to change the size of the date number? On OnePlus5. The date text is being cut off.

[ZeerakHameem]

No description provided.

[peacechen]

See #64 for suggestions on controlling the sizing.

If that doesn't work, PR #87 might address it

[ZeerakHameem]

Tried #64, it didn't work. When are you planning to release the Pull request?

[ZeerakHameem]

It should show 10 after 9, when i remove all the styling for the DateNumberText in the CalendarStrip file. It shows the whole text. But when the default styles are applied the text is being cut off. Any help would be really appreciated.

[peacechen]

You can point directly to this repo to try the latest code which has the prop allowFontScaling.

It looks like the text is too wide to fit in the container and is getting truncated. Please post your <CalendarStrip ...> code.

[ZeerakHameem]

<CalendarStrip
ref={(ref) => this._calendar = ref}
calendarAnimation={{type: 'parallel', duration: 30}}
daySelectionAnimation={{
type: 'background',
duration: 200,
highlightColor: '#ff9800'
}}
style={{height: 100, paddingTop: 20, paddingBottom: 10}}
calendarHeaderStyle={{color: '#28318c'}}
calendarColor={'#ffffff'}
responsiveSizingOffset={-10}
dateNumberStyle={{color: '#28318c'}}
dateNameStyle={{color: '#28318c'}}
maxDayComponentSize={25}
showMonth={true}
onDateSelected={(date) => this.settingDateAndMakingNetworkCall(date.year(), date.month(), date.date())}
selectedDate={this.state.selectedDay}
highlightDateNumberStyle={{color: '#ffffff'}}
highlightDateNameStyle={{color: '#ffffff'}}
weekendDateNameStyle={{color: '#28318c'}}
weekendDateNumberStyle={{color: '#28318c'}}
disabledDateNameStyle={{color: 'green'}}
disabledDateNumberStyle={{color: 'green'}}
iconLeft={left_arrow}
iconRight={right_arrow}
iconContainer={{flex: 0.1}}

[ZeerakHameem]

I am already pointing to version 1.3.1. That doesn't have the allowFontScalling prop.

[peacechen]

Pointing to a version pulls from the npm registry. Use the repo url:

dependencies: {
  "react-native-calendar-strip": "https://github.com/BugiDev/react-native-calendar-strip"
} 

[ZeerakHameem]

Hi, the allowFontScalling prop didn't solve the issue. I dug a little deeper in the code and started doing some changes in the CalendarStrip locally on my machine.
If you go to CalendarStrip -> CalendarDay -> In the return method there is a top level View under TouchableOpacity. That View has some styles, the styles.dateContainerstyle has three properties. If I remove the alignItems:'center' property the complete date shows up but the text is slightly displaced (not in complete center).
I hope this will help you to resolve the issue.

[peacechen]

It appears that the calculated font size dateNameFontSize in CalendarDay.js is too big in your case. Would you try setting responsiveSizingOffset={-20} or a smaller number?

Another test would be to reduce the width of the CalendarStrip, either forced through its style or wrap it in a View container. That's just an experiment, not proposing it as a solution for you. If that works, a new prop may be needed to fine tune the responsive text sizing.

[peacechen]

@ZeerakHameem
It's tough to adjust this correctly for you since I don't have the device. Would you try tweaking the size values in calcSizes?
https://github.com/BugiDev/react-native-calendar-strip/blob/master/src/CalendarDay.js#L113

The easiest way for you to iterate on it is to edit the files under node_modules/react-native-calendar-strip/src/

I'm not thrilled with the magic numbers used to calculate the sizes. It may need to take into account PixelRatio or some other dynamically fetched value.

[asimkhan0]

@peacechen @ZeerakHameem I have a pull request for this issue
#106

[peacechen]

Thanks @asimkhan0 👍

I'll publish on npm after it's gotten more testing. For the time being you can use this by pointing the package.json directly to this repo:

  "dependencies": {
    "react-native-calendar-strip": "https://github.com/BugiDev/react-native-calendar-strip.git",
    // ...
  }

[rusticdeity]

The text cutoff issue on OnePlus devices is caused due to the OnePlus Slate font. Change the default font to Roboto and it should work. I have tested this on a OnePlus device. Also adding an extra space at the end of string literals will fix the issue. But the recommended approach is to load your font and use it throughout the App.

[peacechen]

Thanks @GIT-Sachin for reporting that. Would you mind creating a PR to add that information to the Readme? Create a new section towards the bottom titled Device Specific Notes.

Does reducing the fontSize passed to the dateNumberStyle prop fix the issue when using the OnePlus Slate font? If not, that sounds like OnePlus Slate is not properly respecting the fontSize attribute.

[rusticdeity]

@peacechen I have tested with fontSize for dateNumberStyle and it still does not work. Also I have created a pull request. I haven't mentioned the workaround of adding space at the end of string literals since it is not applicable in this case and also not recommended.

[peacechen]

See Readme for OnePlus work-around
https://github.com/BugiDev/react-native-calendar-strip#device-specific-notes

[ChristopherDcosta]

How to get only the month name like you're getting in your screen? I'm getting month name with year, I don't want that?