Doesnt display the calendar on entering the view ,

[PManager1]

But it does display the calendar when moving to next month back and forth.

import Calendar from 'react-native-calendar';
import moment from 'moment';

const customDayHeadings = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
const customMonthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May',
'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

class CalendarScreen extends Component {

constructor(props) {
super(props);
this.state = {
selectedDate: moment().format(),
};
}

// const ChatScreen = ({ label, value, onChangeText, placeholder, secureTextEntry }) => {
// const { inputStyle, labelStyle, containerStyle } = styles;

static navigationOptions = ({ navigation }) => ({
title: ${navigation.state.params.user},
});

render() {
  const { params } = this.props.navigation.state;
  console.log('23- ChatScreen  this.props =', this.props );
  return (
        <View style={styles.container}>
          <Calendar
            ref="calendar"
            eventDates={['2016-07-03', '2016-07-05', '2016-07-28', '2016-07-30']}
            events={[{date: '2016-07-04', hasEventCircle: {backgroundColor: 'powderblue'}}]}
            scrollEnabled
            showControls
            dayHeadings={customDayHeadings}
            monthNames={customMonthNames}
            titleFormat={'MMMM YYYY'}
            prevButtonText={'Prev'}
            nextButtonText={'Next'}
            onDateSelect={(date) =>
              {
                console.log( '39-  on Date Select :  date =', date );
              this.setState({ selectedDate: date })
              }
          }
            onTouchPrev={(e) => console.log('onTouchPrev: ', e)}
            onTouchNext={(e) => console.log('onTouchNext: ', e)}
            onSwipePrev={(e) => console.log('onSwipePrev: ', e)}
            onSwipeNext={(e) => console.log('onSwipeNext', e)}
          />
          <Text>Selected Date: {moment(this.state.selectedDate).format('MMMM DD YYYY')}</Text>
        </View>

  );
}

}

const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 20,
backgroundColor: '#f7f7f7',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});

const mapStateToProps = (state) => {
// bal bla bla
};

export default connect(mapStateToProps, { propertyUpdate, propertySave })(CalendarScreen);

// export default ChatScreen;

//

[pavsidhu]

I just found that changing the height of the calendar causes this issue

calendarContainer: {
  height: '100%'
}

[pavsidhu]

I've also noticed that the calendar doesn't show sometimes when you swipe between different months.

[PManager1]

No I didn't find the solution.

…

Sent from my iPhone

On Aug 24, 2017, at 12:33 PM, Pav Sidhu ***@***.***> wrote: I've also noticed that the calendar doesn't show sometimes when you swipe between different months. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

[SimerdeepSinghPopli]

Set removeClippedSubviews = { false } in your calendar component