all days not rendred sometimes

[iamhaaamed]

Hi, somtimes all days not rendered:

[hadimostafapour]

@h4m3d66 please provide steps to reproduce this case.

[iamhaaamed]

This is my Agenda code and it sometimes not rendering all days without any change:

<Agenda
          jalali
          firstDay={6}

          items={this.props.userPrograms}

          // callback that fires when the calendar is opened or closed
          onCalendarToggled={calendarOpened => {
            console.log(calendarOpened);
          }}
          // callback that gets called on day press
          onDayPress={day => {
            const selectedDate = moment(day.dateString).format("YYYY-MM-DD");
            this.setState({
              selectedDate,
              selectedMonth: moment(selectedDate).format("jMMMM"),
              selectedWeek: Math.ceil(moment(selectedDate).format("jDD") / 7)
            });
          }}
          // callback that gets called when day changes while scrolling agenda list
          onDayChange={day => {
            console.log("day changed");
          }}

          // Max amount of months allowed to scroll to the past. Default = 50
          pastScrollRange={50}
          // Max amount of months allowed to scroll to the future. Default = 50
          futureScrollRange={50}
          // specify how each item should be rendered in agenda
          renderItem={(item, firstItemInDay) => {
            return (
              <View style={[styles.item, { height: 120 }]}>
                <View
                  style={{
                    flexDirection: "row",
                    justifyContent: "space-between"
                  }}
                >
                  <View>
                    <Text style={{ color: "gray", fontSize: 10 }}>
                      از
                      {item.StartTime &&
                        moment(item.StartTime).format(" HH:mm A")}
                    </Text>
                    <Text style={{ color: "gray", fontSize: 10 }}>
                      تا
                      {item.EndTime && moment(item.EndTime).format(" HH:mm A")}
                    </Text>
                  </View>
                  <Text style={{ flex: 1, textAlign: "right" }}>
                    {item.Description.length > 30
                      ? item.Description.substr(0, 30) + "..."
                      : item.Description}
                  </Text>

                  <View
                    style={{
                      width: 30,
                      height: 30,
                      marginLeft: 5,
                      backgroundColor: "#" + item.ColorCode,
                      alignItems: "center",
                      justifyContent: "center"
                    }}
                  >
                    <Image
                      style={{
                        width: 20,
                        height: 20
                      }}
                      source={{
                        uri: "http://www.parsehadmin.ir" + item.Icon
                      }}
                    />
                  </View>
                </View>
                <Text style={{ color: "gray", fontSize: 12 }}>
                  {item.Address}
                </Text>
                <View
                  style={{
                    flexDirection: "row",
                    marginHorizontal: 10,
                    marginTop: 10
                  }}
                >
                  <TouchableOpacity
                    style={{ flex: 1, alignItems: "center" }}
                    onPress={() =>
                      this.setState({ alarmEnabled: !alarmEnabled })
                    }
                  >
                    <Image
                      resizeMode="contain"
                      style={styles.programIcon}
                      source={
                        alarmEnabled
                          ? require("../assets/images/icons/logo-blue-forward.png")
                          : require("../assets/images/icons/logo-blue-forward.png")
                      }
                    />
                  </TouchableOpacity>
                  <TouchableOpacity style={{ flex: 1, alignItems: "center" }}>
                    <Image
                      resizeMode="contain"
                      style={styles.programIcon}
                      source={
                        alarmEnabled
                          ? require("../assets/images/icons/bell-yellow.png")
                          : require("../assets/images/icons/bell-gray.png")
                      }
                    />
                  </TouchableOpacity>
                  <TouchableOpacity style={{ flex: 1, alignItems: "center" }}>
                    <Image
                      resizeMode="contain"
                      style={styles.programIcon}
                      source={
                        alarmEnabled
                          ? require("../assets/images/icons/pin-red.png")
                          : require("../assets/images/icons/pin-red.png")
                      }
                    />
                  </TouchableOpacity>
                  <TouchableOpacity style={{ flex: 1, alignItems: "center" }}>
                    <Image
                      resizeMode="contain"
                      style={styles.programIcon}
                      source={
                        alarmEnabled
                          ? require("../assets/images/icons/alarm-clock.png")
                          : require("../assets/images/icons/alarm-clock.png")
                      }
                    />
                  </TouchableOpacity>
                </View>
              </View>
            );
          }}

          renderEmptyDate={() => {
            return <View />;
          }}
          // specify how agenda knob should look like
          renderKnob={() => {
            return <Text>...</Text>;
          }}
          // specify what should be rendered instead of ActivityIndicator
          renderEmptyData={() => {
            return <View />;
          }}
          // specify your item comparison function for increased performance
          rowHasChanged={(r1, r2) => {
            return r1.text !== r2.text;
          }}
          // Hide knob button. Default = false
          hideKnob={false}

          onRefresh={() => console.log("refreshing...")}
          // Set this true while waiting for new data from a refresh
          refreshing={false}

          refreshControl={null}
          // agenda theme
          theme={{
            agendaDayTextColor: "yellow",
            agendaDayNumColor: "green",
            agendaTodayColor: "red",
            agendaKnobColor: "blue",
            selectedDayBackgroundColor: "#940347"
          }}
          // agenda container style
          style={{}}
        />

[hadimostafapour]

@h4m3d66 which platform? ios/android/both?

[hadimostafapour]

@h4m3d66 also try new published version ;)

[iamhaaamed]

I have tested only on android. somestimes also I get this error without any change on previous version:

thank you for new version. I will test it :)

[hadimostafapour]

Fine, I think the problem was persian-date package, I've been used the new package weeks ago in production and personally don't face with any problems.

[iamhaaamed]

1.20.3 is the version that I used...

[iamhaaamed]

In the new version, selected day can not be changed and I get this warning: VirtualizedList: You have a large list that is slow to update - make sure your renderItem function renders components that follow React performance best practices like PureComponent, shouldComponentUpdate, etc.

[hadimostafapour]

@h4m3d66 Warning is normal, but I can't figure out the selected day issue, could you provide more details?

Is your main issue resolved?

all days not rendred sometimes

[iamhaaamed]

my code is the same as the above code, but after I press knob button, the warning appears and nothing working, I can not change selected day, the calendar not closed,...

[hadimostafapour]

Um, I don't know exactly, I tested it on both android and iOS (RN 0.56), everything goes fine. Decrease pastScroll and featureScroll values, maybe helpful.