Some problem about setSelectedDate() and updateWeekView()

[jessehsiao]

Hello I'm a rookie in react native, I tried to use the TouchableOpacity to navigate to Calendar List.js in calendarStrip.js:

` <TouchableOpacity onPress={()=>{navigation.navigate('Calendar List',{onGoBack: this.returnData,})}} style={styles.button1Style}>

          </TouchableOpacity>  `

It will navigate to CalendarList.js and then i wish to select the date to change the calendar strip

CalendarList.js: onDayPress={(months) => { const selectedDate = months.dateString; this.props.route.params.onGoBack(selectedDate); this.props.navigation.navigate('calendarStrip'); }}

it is able to pass the date back to calendarStrip.js:

returnData=(date)=>{ //console.log('back: ',date) this.calendarRef.updateWeekView(date); this.calendarRef.setSelectedDate(date); }

However there is a problem:

I open the calendar List and selected June 3th, but the week view in calendar strip didn't change before I press right icon and press left icon back, I'm wondering what happen@@?

[peacechen]

This is difficult to debug without your code. Please create a Snack that recreates the behavior.

[jessehsiao]

Here is my code: https://snack.expo.io/@jessehsiao/react-calendar

[peacechen]

I fixed some errors in your snack. react-native-calendar-strip needed to be added to package.json. NewAppScreen was undefined and not used, so I removed it.

It runs now and I can see the CalendarStrip. Clicking on a date doesn't show the full calendar.

Edit: Clicking on the month header navigates to the full calendar. Is that how it's designed?

You set selectedDate={moment()}//初始時標註今日日期 on line 76 which sets the week to today. Since you're navigating between screens, the component reinitializes to those props. Instead of using the ref to call setSelectedDate, set state variable selectedDate in the returnData() call and pass that to CalendarStrip via prop selectedDate={this.state.selectedDate}.

There's a warning in the console that isn't directly related, but will cause problems in the future:

Deprecation warning: value provided is not in a recognized RFC2822 or ISO format. moment construction falls back to js Date(), which is not reliable across all browsers and versions. Non RFC2822/ISO date formats are discouraged and will be removed in an upcoming major release. Please refer to http://momentjs.com/guides/#/warnings/js-date/ for more info.

This forum is for reporting bugs or feature requests for CalendarStrip. Your question is about how to use React Native in general, and forums such as StackOverflow are more suited for that.

[jessehsiao]

I finally solved it! I followed your instruction and fixed my code like this: https://snack.expo.io/@jessehsiao/react-calendar

Thanks for your advice, I will keep working hard!

[peacechen]

Glad that you got it working. You should be able to remove the imperative calls to updateWeekView and setSelectedDate by also setting the startingDate prop to the same date as selectedDate state.