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 [email protected] 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