Unable to get the example to work like the demo

[Louis345]

This seems really awesome and would love to try it, but I am having trouble getting it to render properly. I am literately copying the entire example in the example directory. What is rendered is just a month and year. Nothing like the example images show. I know I am probably missing something simple, but if you could kindly explain to me what I am doing wrong.

Currently, I am running the latest react-native version and my code is:

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
ListView
} from 'react-native';
import moment from 'moment';
import CalendarStrip from 'react-native-calendar-strip';
const width = Dimensions.get('window').width;
export class Profile extends Component {
render() {
return (

<CalendarStrip
calendarAnimation={{ type: 'sequence', duration: 30 }}
selection={'background'}
selectionAnimation={{ duration: 300, borderWidth: 2 }}
style={{ paddingTop: 20, paddingBottom: 10 }}
calendarHeaderStyle={{ color: 'white' }}
calendarColor={'#7743CE'}
highlightColor={'#9265DC'}
dateNumberStyle={{ color: 'white' }}
dateNameStyle={{ color: 'white' }}
borderHighlightColor={'white'}
iconLeft={require('../img/left-arrow.png')}
iconRight={require('../img/right-arrow.png')}
iconContainer={{ flex: 0.1 }}
/>

);
}
}

export default Profile;

I wonder what I am doing wrong.

Thanks in Advance.

[peacechen]

The example that you posted looks out of date. Which version are you using?

It looks like there's a chance that your date label colors are blending into your background if it's white. Try selecting any blank spots where the dates should be. A screenshot might help troubleshoot.

[Louis345]

I tried to read the source code to see if i am missing a prop, but I am still unsure.

[Louis345]

In regards to the arrows, I did not see any indication that the arrows were rendering. I changed the calendar to different colors, but still no luck. Is there a current example that I can look at.

Thanks.

[peacechen]

It's been a while since I ran the example. It turns out that the height needs to be explicitly set. I pushed a commit updating the example in the Readme as well as the examples folder. Apologies for the oversight.

A better approach would be to make this component responsive (see #14). It should automatically set its height based on its width. The dates should scale in size based on its container. Any contributions are welcome.

[Louis345]

It worked. I really appreciate it. Think this is extremely helpful for my current project.

I am new to react-native and once I get a better understanding I would love to contribute this awesome project.