AgendaList performent

Author: Inbal-Tish

example/src/screens/expandableCalendar.js

@@ -28,10 +28,10 @@ function getFutureDates(days) {
 }
 
 function getPastDate(days) {
-  return new Date(Date.now() - (864e5 * days)).toISOString().split('T')[0]; // 864e5 == 86400000 == 24*60*60*1000
+  return new Date(Date.now() - (864e5 * days)).toISOString().split('T')[0];
 }
 
-const items = [
+const ITEMS = [
   {title: dates[0], data: [{hour: '12am', duration: '1h', title: 'Ashtanga Yoga'}]},
   {title: dates[1], data: [{hour: '4pm', duration: '1h', title: 'Pilates ABC'}, {hour: '5pm', duration: '1h', title: 'Vinyasa Yoga'}]},
   {title: dates[2], data: [{hour: '1pm', duration: '1h', title: 'Ashtanga Yoga'}, {hour: '2pm', duration: '1h', title: 'Deep Streches'}, {hour: '3pm', duration: '1h', title: 'Private Yoga'}]},
@@ -46,11 +46,19 @@ const items = [
 ];
 
 export default class ExpandableCalendarScreen extends Component {
-  
+
   onDateChanged = (/**date, updateSource*/) => {
     // console.warn('ExpandableCalendarScreen onDateChanged: ', date, updateSource);
     // fetch and set data for date + week ahead
   }
+  
+  buttonPressed() {
+    Alert.alert('show more');
+  }
+
+  itemPressed(id) {
+    Alert.alert(id);
+  }
 
   renderEmptyItem() {
     return (
@@ -64,36 +72,27 @@ export default class ExpandableCalendarScreen extends Component {
     if (_.isEmpty(item)) {
       return this.renderEmptyItem();
     }
-
-    const id = item.title;
-    const props = {
-      hour: item.hour,
-      duration: item.duration,
-      title: item.title,
-      button: {label: 'info', onPress: () => Alert.alert('show more')},
-      onPress: () => Alert.alert(id)
-    };
-
+    
     return (
       <TouchableOpacity 
-        onPress={props.onPress} 
+        onPress={() => this.itemPressed(item.title)} 
         style={styles.item}
       >
         <View>
-          <Text style={styles.itemHourText}>{props.hour}</Text>
-          <Text style={styles.itemDurationText}>{props.duration}</Text>
+          <Text style={styles.itemHourText}>{item.hour}</Text>
+          <Text style={styles.itemDurationText}>{item.duration}</Text>
         </View>
-        <Text style={styles.itemTitleText}>{props.title}</Text>
+        <Text style={styles.itemTitleText}>{item.title}</Text>
         <View style={styles.itemButtonContainer}>
-          <Button title={props.button.label} onPress={props.button.onPress}/>
+          <Button title={'Info'} onPress={this.buttonPressed}/>
         </View>
       </TouchableOpacity>
     );
   }
 
   getMarkedDates = () => {
     const marked = {};
-    items.forEach(item => {
+    ITEMS.forEach(item => {
       // only mark dates with data
       if (item.data && item.data.length > 0 && !_.isEmpty(item.data[0])) {
         marked[item.title] = {marked: true};
@@ -146,10 +145,8 @@ export default class ExpandableCalendarScreen extends Component {
   }
 
   render() {    
-    const style = {paddingLeft: 20, paddingRight: 20};
-
     return (
-      <CalendarProvider date={items[0].title} onDateChanged={this.onDateChanged} theme={{todayButtonTextColor: '#0059ff'}} showTodayButton>
+      <CalendarProvider date={ITEMS[0].title} onDateChanged={this.onDateChanged} theme={{todayButtonTextColor: '#0059ff'}} showTodayButton>
         <ExpandableCalendar 
           // horizontal={false}
           // hideArrows
@@ -158,24 +155,33 @@ export default class ExpandableCalendarScreen extends Component {
           // initialPosition={'open'} // ExpandableCalendar.positions.OPEN - can't find static positions
           firstDay={1}
           markedDates={this.getMarkedDates()} // {'2019-06-01': {marked: true}, '2019-06-02': {marked: true}, '2019-06-03': {marked: true}};
-          calendarStyle={style}
+          calendarStyle={styles.calendar}
           theme={this.getTheme()}
           leftArrowImageSource={require('../img/previous.png')}
           rightArrowImageSource={require('../img/next.png')}
-          headerStyle={style}
+          headerStyle={styles.calendar}
         />
         <AgendaList
-          data={items}
-          sections={items}
+          data={ITEMS}
+          sections={ITEMS}
+          extraData={this.state}
           renderItem={this.renderItem}
-          // sectionStyle={{backgroundColor: '#f0f4f7', color: '#79838a'}}
+          // sectionStyle={styles.section}
         />
       </CalendarProvider>
     );
   }
 }
 
 const styles = StyleSheet.create({
+  calendar: {
+    paddingLeft: 20, 
+    paddingRight: 20
+  },
+  section: {
+    backgroundColor: '#f0f4f7', 
+    color: '#79838a'
+  },
   item: {
     padding: 20, 
     backgroundColor: 'white', 

src/expandableCalendar/agendaList.js

@@ -31,6 +31,11 @@ class AgendaList extends Component {
     this._topSection = _.get(props, 'sections[0].title');
     this.didScroll = false;
     this.sectionScroll = false;
+
+    this.viewabilityConfig = {
+      itemVisiblePercentThreshold: 20 // 50 means if 50% of the item is visible
+    };
+    this.list = React.createRef();
   }
 
   getSectionIndex(date) {
@@ -57,11 +62,11 @@ class AgendaList extends Component {
   }
 
   scrollToSection(sectionIndex) {
-    if (this.list && sectionIndex !== undefined) {
+    if (this.list.current && sectionIndex !== undefined) {
       this.sectionScroll = true; // to avoid setDate() in onViewableItemsChanged
       this._topSection = this.props.sections[sectionIndex].title;
 
-      this.list.scrollToLocation({
+      this.list.current.scrollToLocation({
         animated: true,
         sectionIndex: sectionIndex,
         itemIndex: 0,
@@ -118,18 +123,18 @@ class AgendaList extends Component {
     );
   }
 
+  keyExtractor = (item, index) => String(index);
+
   render() {
     return (
       <SectionList
         {...this.props}
-        ref={r => this.list = r}
-        keyExtractor={(item, index) => String(index)}
+        ref={this.list}
+        keyExtractor={this.keyExtractor}
         showsVerticalScrollIndicator={false}
         stickySectionHeadersEnabled
         onViewableItemsChanged={this.onViewableItemsChanged}
-        viewabilityConfig={{
-          itemVisiblePercentThreshold: 20 // 50 means if 50% of the item is visible
-        }}
+        viewabilityConfig={this.viewabilityConfig}
         renderSectionHeader={this.renderSectionHeader}
         onScroll={this.onScroll}
         onMomentumScrollBegin={this.onMomentumScrollBegin}