Agenda items scrolling doesn't work in Android

Description

I use Agenda component and cannot scroll list of items in Android. Scrolling works well in iOS.

Expected Behavior

If I scroll down, I should see other items from the list, but scrolling doesn’t work.

Observed Behavior

I don’t see any error messages.

Environment

• npm ls react-native-calendars: 1.17.3
• npm ls react-native: 0.54.2

Also specify:

1. Phone/emulator/simulator & version: Google Nexus 5X - 8.0 - API 26 - 1080x1920/ Genymotion 2.12.0

Reproducible Demo

<View style={{ flex: 1 }}>
  <ScrollView>
    <RefreshControl refreshing={this.state.refreshing} onRefresh={this._onRefresh.bind(this)} />
    <View style={styles.container}>
      <Agenda
        ref={(component) => (this.agenda = component)}
        items={formatedCalendar}
        selected={currentDay}
        renderItem={this.renderItem.bind(this)}
        firstDay={1}
        pastScrollRange={3}
        futureScrollRange={3}
        onDayChange={(day) => {
          // Always future.
          const actualDate = moment(day.dateString, 'YYYY-MM-DD');
          const diff = moment.duration(actualDate.diff(this.state.currentDate));
          if (diff.asDays() > 7) {
            // Update currentDate to today.
            this.props.getCalendarDays(actualDate, 7, this.state.filter);
            this.setState({ currentDate: actualDate });
          }
        }}
        onCalendarToggled={(calendarOpened) => {
          this.setState({ calendarOpened });
        }}
        onDayPress={this._onDayPress.bind(this)}
        scrollEnabled
        markedDates={markedDates}
        renderDay={this.renderDay.bind(this)}
        renderEmptyData={this.renderEmptyData.bind(this)}
        rowHasChanged={this.rowHasChanged.bind(this)}
        monthFormat="MMMM"
      />
    </View>
  </ScrollView>
</View>;

[subodhpareek18]

I don’t think this issue should be closed. Please create a PR if you find the time but the feature seems important enough to keep this issue open.

[AndrejGajdos]

I wanted to achieve a functionality, where you can pull to refresh agenda component to refresh the view. RefreshControl needs to be inside ScrollView or ListView and Agenda already contains ScrollView, so my code snippet works for iOS, but in Android I cannot scroll the Agenda.

I created separated components for iOS and Android. Here you can see how it works (I removed parent ScrollView and RefreshControl for Android component to make Agenda scrollable)

If you want to achieve in Android what you see in iOS, you need to implement RefreshControl in two places.

1. RefreshControl in ScrollView in Agenda component, I guess somewhere here

2. RefreshControl for whole view (screen). I tried PullView component and it works.

<View style={{ flex: 1 }}>
        <PullView onPullRelease={this._onRefresh.bind(this)}>
          <View style={styles.container}>
            <Agenda
              ref={component => (this.agenda = component)}
              items={formatedCalendar}
              selected={currentDay}
              renderItem={this.renderItem.bind(this)}
              firstDay={1}
              pastScrollRange={3}
              futureScrollRange={3}
              onDayChange={(day) => {
                // Always future.
                const actualDate = moment(day.dateString, 'YYYY-MM-DD');
                const diff = moment.duration(actualDate.diff(this.state.currentDate));
                if (diff.asDays() > 7) {
                  // Update currentDate to today.
                  this.props.getCalendarDays(actualDate, 7, this.state.filter);
                  this.setState({ currentDate: actualDate });
                }
              }}
              onCalendarToggled={(calendarOpened) => {
                this.setState({ calendarOpened });
              }}
              onDayPress={this._onDayPress.bind(this)}
              scrollEnabled
              markedDates={markedDates}
              renderDay={this.renderDay.bind(this)}
              renderEmptyData={this.renderEmptyData.bind(this)}
              rowHasChanged={this.rowHasChanged.bind(this)}
              monthFormat="MMMM"
            />
          </View>
        </PullView>
      </View>

This is how it works if you implement only 2), so pull to refresh works only if you pull the calendar, but not if you pull the list items. My client is okay with this solution, because Android is not priority, but I am writing this here if someone will come across similar issue.