Upgrade example app to RN-72 (#324)

Followed https://react-native-community.github.io/upgrade-helper/?from=0.68.2&to=0.72.4

example/.eslintrc.js

@@ -1,4 +1,4 @@
 module.exports = {
   root: true,
-  extends: '@react-native-community',
+  extends: '@react-native',
 };

example/.gitignore

@@ -20,6 +20,7 @@ DerivedData
 *.hmap
 *.ipa
 *.xcuserstate
+ios/.xcode.env.local
 
 # Android/IntelliJ
 #
@@ -29,33 +30,36 @@ build/
 local.properties
 *.iml
 *.hprof
+.cxx/
+*.keystore
+!debug.keystore
 
 # node.js
 #
 node_modules/
 npm-debug.log
 yarn-error.log
 
-# BUCK
-buck-out/
-\.buckd/
-*.keystore
-!debug.keystore
-
 # fastlane
 #
 # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
 # screenshots whenever they are needed.
 # For more information about the recommended setup visit:
 # https://docs.fastlane.tools/best-practices/source-control/
 
-*/fastlane/report.xml
-*/fastlane/Preview.html
-*/fastlane/screenshots
+**/fastlane/report.xml
+**/fastlane/Preview.html
+**/fastlane/screenshots
+**/fastlane/test_output
 
 # Bundle artifact
 *.jsbundle
 
 # Ruby / CocoaPods
 /ios/Pods/
 /vendor/bundle/
+
+# Temporary files created by Metro to check the health of the file watcher
+.metro-health-check*
+# testing
+/coverage

example/App.js → example/App.tsx

@@ -7,9 +7,18 @@
  */
 
 import React, {useState, useReducer, useRef, useCallback} from 'react';
-import {SafeAreaView, StyleSheet, StatusBar, Alert, Text} from 'react-native';
-
+import {
+  SafeAreaView,
+  StyleSheet,
+  StatusBar,
+  Alert,
+  Text,
+  ViewStyle,
+} from 'react-native';
+
+// @ts-ignore (FIXME)
 import WeekView, {createFixedWeekDate} from 'react-native-week-view';
+import type {WeekViewEvent} from 'react-native-week-view/index';
 import {buildDateCycler, makeBuilder, eventsWithUpdate} from './debug-utils';
 
 const buildEvent = makeBuilder();
@@ -80,7 +89,7 @@ const sampleFixedEvents = [
 const showFixedComponent = false;
 const INITIAL_EVENTS = showFixedComponent ? sampleFixedEvents : sampleEvents;
 
-const MyRefreshComponent = ({style}) => (
+const MyRefreshComponent = ({style}: {style: ViewStyle}) => (
   // eslint-disable-next-line react-native/no-inline-styles
   <Text style={[style, {fontSize: 20, color: 'black'}]}>Loading...</Text>
 );
@@ -98,16 +107,18 @@ const PAGE_START_AT = {
   weekday: 1,
 };
 
-const onDayPress = (date, formattedDate) => {
+const onDayPress = (date: Date, formattedDate: string) => {
   console.log('Day: ', date, formattedDate);
 };
 
-const onSwipeNext = d => console.log('Swipe next', d.toDateString());
-const onSwipePrev = d => console.log('Swipe prev', d.toDateString());
-const onTimeScrolled = d => console.log('Time scrolled', d.toTimeString());
+const onSwipeNext = (d: Date) => console.log('Swipe next', d.toDateString());
+const onSwipePrev = (d: Date) => console.log('Swipe prev', d.toDateString());
+const onTimeScrolled = (d: Date) =>
+  console.log('Time scrolled', d.toTimeString());
 
 // Use this to manually debug navigate through dates
-// eslint-disable-next-line no-unused-vars
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const dateCycler = buildDateCycler([
   // // Example:
   // // selectedDate={new Date(2022, 7, 14)}
@@ -116,37 +127,37 @@ const dateCycler = buildDateCycler([
   // new Date(2022, 7, 2),
 ]);
 
-const App = ({}) => {
+function App(): JSX.Element {
   const componentRef = useRef(null);
 
   const [events, updateEvent] = useReducer(eventsWithUpdate, INITIAL_EVENTS);
 
   const onDragEvent = useCallback(
-    (event, newStartDate, newEndDate) => {
+    (event: WeekViewEvent, newStartDate: Date, newEndDate: Date) => {
       updateEvent({event, newStartDate, newEndDate});
     },
     [updateEvent],
   );
 
   const onEditEvent = useCallback(
-    (event, newStartDate, newEndDate) => {
+    (event: WeekViewEvent, newStartDate: Date, newEndDate: Date) => {
       console.log('Editing: ', event.id, newStartDate, newEndDate);
       updateEvent({event, newStartDate, newEndDate});
     },
     [updateEvent],
   );
 
-  const [editingEvent, setEditEvent] = useState(null);
+  const [editingEvent, setEditEvent] = useState<number | null>(null);
 
-  const handleLongPressEvent = event => {
+  const handleLongPressEvent = (event: WeekViewEvent) => {
     if (editingEvent == null) {
       setEditEvent(event.id);
     } else {
       setEditEvent(null);
     }
   };
 
-  const handlePressEvent = event => {
+  const handlePressEvent = (event: WeekViewEvent) => {
     if (editingEvent != null) {
       setEditEvent(null);
       return;
@@ -159,7 +170,11 @@ const App = ({}) => {
     );
   };
 
-  const handlePressGrid = (event, startHour, date) => {
+  const handlePressGrid = (
+    event: WeekViewEvent,
+    startHour: number,
+    date: Date,
+  ) => {
     if (editingEvent != null) {
       setEditEvent(null);
       return;
@@ -175,7 +190,7 @@ const App = ({}) => {
     Alert.alert(`${year}-${month}-${day} ${hour}:${minutes}:${seconds}`);
   };
 
-  const onMonthPress = useCallback((date, formattedDate) => {
+  const onMonthPress = useCallback((date: Date, formattedDate: string) => {
     // // Debug navigating through dates:
     // if (componentRef && componentRef.current) {
     //   componentRef.current.goToDate(dateCycler.next());
@@ -229,7 +244,7 @@ const App = ({}) => {
       </SafeAreaView>
     </>
   );
-};
+}
 
 const styles = StyleSheet.create({
   container: {

example/Gemfile

@@ -1,6 +1,6 @@
 source 'https://rubygems.org'
 
 # You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
-ruby '2.7.4'
+ruby ">= 2.6.10"
 
-gem 'cocoapods', '~> 1.11', '>= 1.11.2'
+gem 'cocoapods', '~> 1.12'

example/__tests__/App.test.js → example/__tests__/App.test.tsx

@@ -6,6 +6,9 @@ import 'react-native';
 import React from 'react';
 import App from '../App';
 
+// Note: import explicitly to use the types shiped with jest.
+import {it} from '@jest/globals';
+
 // Note: test renderer must be required after react-native.
 import renderer from 'react-test-renderer';
 

example/__tests__/config.js → example/__tests__/config.ts

@@ -1,3 +1,6 @@
+// Note: import explicitly to use the types shiped with jest.
+import {jest} from '@jest/globals';
+
 // For now, mocks copied from root dir:
 jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');
 jest.useFakeTimers();