Adding a profiler and adding playgroundscreen for examples

Author: Inbal-Tish

example/src/screens/menuScreen.tsx

@@ -69,7 +69,7 @@ const MenuScreen = (props: Props) => {
         {renderEntry(testIDs.menu.EXPANDABLE_CALENDAR, 'Expandable Calendar', 'ExpandableCalendarScreen')}
         {renderEntry(testIDs.menu.TIMELINE_CALENDAR, 'Timeline Calendar', 'TimelineCalendarScreen')}
         {renderEntry(testIDs.menu.WEEK_CALENDAR, 'Week Calendar', 'ExpandableCalendarScreen', {weekView: true})}
-        {/* {renderEntry(testIDs.menu.PLAYGROUND, 'Playground', 'Playground')} */}
+        {renderEntry(testIDs.menu.PLAYGROUND, 'Playground', 'Playground')}
         <View style={styles.switchContainer}>
           <Text>Force RTL</Text>
           <Switch value={forceRTL} onValueChange={toggleRTL}/>

example/src/screens/playgroundScreen.tsx

@@ -1,19 +1,44 @@
 import React, {useState, useCallback} from 'react';
-import {Text, View, StyleSheet} from 'react-native';
-import {ExpandableCalendar, CalendarProvider} from 'react-native-calendars';
+import {View, Text, Button, StyleSheet} from 'react-native';
+import {Profiler, Calendar, CalendarList, ExpandableCalendar, CalendarProvider} from 'react-native-calendars';
 
-const INITIAL_DATE = '2019-04-01';
+const INITIAL_DATE = '2022-07-07';
+const enum elements {
+  CALENDAR = 'Calendar',
+  LIST = 'CalendarList',
+  EXPANDABLE = 'Expandable',
+}
+const BLUE = '#00BBF2';
 
 export default function PlaygroundScreen() {
   const [selectedDate, setSelectedDate] = useState(INITIAL_DATE);
+  const [element, setElement] = useState('Calendar');
+
 
   const onDayPress = useCallback((day) => {
     setSelectedDate(day.dateString);
   }, [selectedDate]);
 
-  return (
-    <View style={styles.container}>
-      <Text style={styles.text}>Selected Date: {selectedDate}</Text>
+  const renderCalendar = () => {
+    return (
+      <Calendar
+        current={INITIAL_DATE}
+        style={styles.calendar}
+      />
+    );
+  };
+
+  const renderCalendarList = () => {
+    return (
+      <CalendarList
+        current={INITIAL_DATE}
+        style={styles.calendar}
+      />
+    );
+  };
+
+  const renderExpendableCalendar = () => {
+    return (
       <CalendarProvider date={INITIAL_DATE}>
         <ExpandableCalendar
             pastScrollRange={3}
@@ -23,22 +48,50 @@ export default function PlaygroundScreen() {
             style={styles.calendar}
         />
       </CalendarProvider>
-    </View>
+    );
+  };
+
+  const renderElement = () => {
+    switch (element) {
+      case elements.CALENDAR:
+        return renderCalendar();
+      case elements.LIST:
+        return renderCalendarList();
+      case elements.EXPANDABLE:
+        return renderExpendableCalendar();
+      default:
+        return renderCalendar(); 
+    }
+  };
+
+  return (
+    <>
+      <View style={styles.buttonsContainer}>
+        <Button color={BLUE} title='Calendar' onPress={() => setElement(elements.CALENDAR)}/>
+        <Button color={BLUE} title='Calendar List' onPress={() => setElement(elements.LIST)}/>
+        <Button color={BLUE} title='Expandable' onPress={() => setElement(elements.EXPANDABLE)}/>
+      </View>
+      <Text style={styles.text}>Selected Date: {selectedDate}</Text>
+      <Profiler id={element}>
+        {renderElement()}
+      </Profiler>
+    </>
   );
 }
 
 const styles = StyleSheet.create({
-  container : {
-    flex : 1
+  buttonsContainer: {
+    padding: 5,
+    flexDirection: 'row',
+    justifyContent: 'space-between'
   },
   calendar: {
     borderWidth: 1,
     borderColor: '#b6c1cd'
   },
   text : {
-    marginLeft: 10,
+    alignSelf: 'center',
     padding : 20,
-    color : '#00BBF2',
     fontSize: 16
   }
 });

src/Profiler.tsx

@@ -0,0 +1,64 @@
+// @ts-nocheck
+
+// Taken from
+// https://medium.com/life-at-paperless/how-to-use-the-react-profiler-component-to-measure-performance-improvements-from-hooks-d43b7092d7a8
+
+// Profiler callback
+// https://reactjs.org/docs/profiler.html#onrender-callback
+
+import React, {Profiler as RProfiler, ProfilerProps as RProfilerProps, PropsWithChildren} from 'react';
+
+export type ProfilerProps = Pick<RProfilerProps, 'id'>;
+
+// The entire render time since execution of this file (likely on page load)
+const cumulativeDuration: {[key: string]: string} = {};
+
+export default class Profiler extends React.Component<PropsWithChildren<ProfilerProps>> {
+  onRender = (...profileData) => {
+    logProfileData(getProfileData(profileData));
+  };
+
+  render() {
+    const {children, id} = this.props;
+    return (
+      <RProfiler id={id} onRender={this.onRender}>
+        {children}
+      </RProfiler>
+    );
+  }
+}
+
+// TODO: fix typescript...
+export const getProfileData = ([
+  id, // the "id" prop of the Profiler tree that has just committed
+  phase, // either "mount" (if the tree just mounted) or "update" (if it re-rendered)
+  actualDuration, // time spent rendering the committed update
+  baseDuration, // estimated time to render the entire subtree without memoization
+  startTime, // when React began rendering this update
+  commitTime, // when React committed this update
+  interactions // the Set of interactions belonging to this update
+]) => {
+  cumulativeDuration[id] = Number(((cumulativeDuration[id] ?? 0) + actualDuration).toFixed(2));
+  return {
+    id,
+    interactions,
+    phase,
+    actualDuration: Number(actualDuration.toFixed(2)),
+    baseDuration: Number(baseDuration.toFixed(2)),
+    commitTime: Number(commitTime.toFixed(2)),
+    cumulativeDuration: cumulativeDuration[id],
+    startTime: Number(startTime.toFixed(2))
+  };
+};
+
+export const logProfileData = ({id, actualDuration, cumulativeDuration, phase}) => {
+  console.group(phase);
+  // table did not work for me so I used log instead
+  console.log(id, ':', actualDuration, cumulativeDuration);
+  // console.table({
+  //   actualDuration,
+  //   baseDuration,
+  //   cumulativeDuration
+  // });
+  console.groupEnd();
+};

src/index.ts

@@ -22,3 +22,4 @@ export type {TimelineListProps, TimelineListRenderItemInfo} from './timeline-lis
 export {default as CalendarUtils} from './services';
 export type {DateData, AgendaEntry, AgendaSchedule} from './types';
 export {default as LocaleConfig} from 'xdate';
+export {default as Profiler} from './Profiler';