Remove propTypes & defaultProps

src/App.tsx

@@ -89,7 +89,6 @@ LogBox.ignoreLogs([
   'Reduced motion setting is enabled on this device',
   'React Native Firebase namespaced API',
   'global process.env.EXPO_OS is not defined',
-  'Support for defaultProps will be removed',
   'A non-serializable value was detected in an action',
 ]);
 

src/components/AddressAutocomplete.tsx

@@ -11,7 +11,6 @@ import { Input, InputField } from '@/components/ui/input';
 import { Pressable } from '@/components/ui/pressable';
 import { Text } from '@/components/ui/text';
 import { Button, ButtonText, ButtonIcon } from '@/components/ui/button';
-import PropTypes from 'prop-types';
 import qs from 'qs';
 import React, { useMemo, useState } from 'react';
 import { withTranslation } from 'react-i18next';
@@ -49,6 +48,14 @@ const fuseOptions = {
   keys: ['contactName', 'streetAddress'],
 };
 
+interface AddressAutocompleteProps {
+  minChars?: number;
+  addresses?: unknown[];
+  renderRight?(...args: unknown[]): unknown;
+  onMapPickerPress?(...args: unknown[]): unknown;
+  mapPickerStyle?: "small" | "large";
+}
+
 function AddressAutocomplete({
   country,
   t,
@@ -67,7 +74,7 @@ function AddressAutocomplete({
   location,
   mapPickerStyle = 'small',
   ...otherProps
-}) {
+}: AddressAutocompleteProps) {
   const props = arguments[0];
 
   const [query, setQuery] = useState(
@@ -503,14 +510,6 @@ function AddressAutocomplete({
   );
 }
 
-AddressAutocomplete.propTypes = {
-  minChars: PropTypes.number,
-  addresses: PropTypes.array,
-  renderRight: PropTypes.func,
-  onMapPickerPress: PropTypes.func,
-  mapPickerStyle: PropTypes.oneOf(['small', 'large']),
-};
-
 const styles = StyleSheet.create({
   poweredContainer: {
     alignItems: 'flex-end',

src/components/DeliveryList.tsx

@@ -2,9 +2,7 @@ import _ from 'lodash';
 import moment from 'moment';
 import { Icon, ChevronRightIcon } from '@/components/ui/icon';
 import { Text } from '@/components/ui/text';
-import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { withTranslation } from 'react-i18next';
 import {
   ActivityIndicator,
   Platform,
@@ -65,137 +63,137 @@ const captionTextProps = {
   ellipsizeMode: 'tail',
 };
 
-class DeliveryList extends Component {
-  _onItemPress(item) {
-    if (this.props.loading || this.props.refreshing) {
-      return;
-    }
-
-    this.props.onItemPress(item);
-  }
-
-  renderItemCaption(item) {
-    const lines = this.props.itemCaptionLines
-      ? this.props.itemCaptionLines(item)
-      : [item.pickup.address.streetAddress, item.dropoff.address.streetAddress];
+interface DeliveryListProps {
+  data?: object[];
+  loading?: boolean;
+  onItemPress(...args: unknown[]): unknown;
+  onEndReached(...args: unknown[]): unknown;
+  itemCaptionLines?(...args: unknown[]): unknown;
+  onRefresh?(...args: unknown[]): unknown;
+  refreshing?: boolean;
+}
 
-    return (
-      <View>
-        {lines.map((line, index) => (
-          <Text
-            key={`${item['@id']}-caption-line-${index}`}
-            style={styles.textSmall}
-            {...captionTextProps}>
-            {line}
+const ListItem = ({ item, itemCaptionLines, onPress }) => {
+
+  return (
+    <TouchableOpacity
+      onPress={() => onPress(item)}
+      style={styles.item}>
+      <View style={styles.itemBody}>
+        <View style={{ flex: 1 }}>
+          <FontAwesome5
+            name="circle"
+            solid
+            style={{ color: stateColor(item.state), fontSize: 14 }}
+          />
+        </View>
+        <View style={{ flex: 1 }}>
+          <Text style={styles.textSmall}>{`#${
+            item.orderNumber ? item.orderNumber : item.id
+          }`}</Text>
+        </View>
+        <View style={[styles.details, { flex: 6 }]}>
+          <ListItemCaption item={item} itemCaptionLines={itemCaptionLines} />
+        </View>
+        {/* @see https://stackoverflow.com/questions/43143258/flex-vs-flexgrow-vs-flexshrink-vs-flexbasis-in-react-native */}
+        <View style={{ flex: 0, flexShrink: 1 }}>
+          <Text style={styles.textSmall} numberOfLines={1}>
+            {moment(item.dropoff.doneBefore).format('LT')}
           </Text>
-        ))}
+        </View>
       </View>
-    );
-  }
+      <View>
+        <Icon as={ChevronRightIcon} />
+      </View>
+    </TouchableOpacity>
+  );
+}
 
-  renderItem(item) {
-    return (
-      <TouchableOpacity
-        onPress={() => this._onItemPress(item)}
-        style={styles.item}>
-        <View style={styles.itemBody}>
-          <View style={{ flex: 1 }}>
-            <FontAwesome5
-              name="circle"
-              solid
-              style={{ color: stateColor(item.state), fontSize: 14 }}
-            />
-          </View>
-          <View style={{ flex: 1 }}>
-            <Text style={styles.textSmall}>{`#${
-              item.orderNumber ? item.orderNumber : item.id
-            }`}</Text>
-          </View>
-          <View style={[styles.details, { flex: 6 }]}>
-            {this.renderItemCaption(item)}
-          </View>
-          {/* @see https://stackoverflow.com/questions/43143258/flex-vs-flexgrow-vs-flexshrink-vs-flexbasis-in-react-native */}
-          <View style={{ flex: 0, flexShrink: 1 }}>
-            <Text style={styles.textSmall} numberOfLines={1}>
-              {moment(item.dropoff.doneBefore).format('LT')}
-            </Text>
-          </View>
-        </View>
-        <View>
-          <Icon as={ChevronRightIcon} />
-        </View>
-      </TouchableOpacity>
-    );
-  }
+const ListItemCaption = ({ item, itemCaptionLines }) => {
+  const lines = itemCaptionLines
+    ? itemCaptionLines(item)
+    : [item.pickup.address.streetAddress, item.dropoff.address.streetAddress];
+
+  return (
+    <View>
+      {lines.map((line, index) => (
+        <Text
+          key={`${item['@id']}-caption-line-${index}`}
+          style={styles.textSmall}
+          {...captionTextProps}>
+          {line}
+        </Text>
+      ))}
+    </View>
+  );
+}
 
-  renderFooter() {
-    if (!this.props.loading) {
-      return null;
-    }
-
-    return (
-      <View
-        style={{
-          position: 'relative',
-          paddingVertical: 20,
-          marginTop: 10,
-          marginBottom: 10,
-        }}>
-        <ActivityIndicator animating size="large" />
-      </View>
-    );
+const ListFooter = ({ loading }) => {
+
+  if (!loading) {
+    return null;
   }
 
-  render() {
-    if (this.props.data.length === 0) {
-      return <View />;
-    }
-
-    const groups = _.groupBy(this.props.data, item =>
-      moment(item.dropoff.doneBefore).format('LL'),
-    );
-    const sections = _.map(groups, (value, key) => ({
-      title: key,
-      data: value,
-    }));
-
-    return (
-      <SectionList
-        stickySectionHeadersEnabled={false}
-        initialNumToRender={17}
-        sections={sections}
-        // scrollEnabled={ !this.state.loadingMore }
-        onEndReached={this.props.onEndReached}
-        onEndReachedThreshold={Platform.OS === 'ios' ? 0 : 0.01}
-        onRefresh={this.props.onRefresh}
-        refreshing={this.props.refreshing}
-        keyExtractor={(item, index) => item['@id']}
-        renderItem={({ item }) => this.renderItem(item)}
-        ItemSeparatorComponent={ItemSeparator}
-        ListFooterComponent={this.renderFooter.bind(this)}
-        renderSectionHeader={({ section: { title } }) => (
-          <SectionHeaderComponent title={title} />
-        )}
-      />
-    );
+  return (
+    <View
+      style={{
+        position: 'relative',
+        paddingVertical: 20,
+        marginTop: 10,
+        marginBottom: 10,
+      }}>
+      <ActivityIndicator animating size="large" />
+    </View>
+  );
+}
+
+function _onItemPress(item, loading, refreshing, onItemPress) {
+  if (loading || refreshing) {
+    return;
   }
 
-  static defaultProps = {
-    data: [],
-    loading: false,
-    refreshing: false,
-    onRefresh: () => {},
-  };
+  onItemPress(item);
 }
 
-DeliveryList.propTypes = {
-  data: PropTypes.arrayOf(PropTypes.object),
-  loading: PropTypes.bool,
-  onItemPress: PropTypes.func.isRequired,
-  onEndReached: PropTypes.func.isRequired,
-  itemCaptionLines: PropTypes.func,
-  onRefresh: PropTypes.func,
-  refreshing: PropTypes.bool,
-};
+const DeliveryList = ({
+  onItemPress,
+  onEndReached,
+  itemCaptionLines,
+  onRefresh = () => {},
+  data = [],
+  loading = false,
+  refreshing = false }: DeliveryListProps) => {
+
+  if (data.length === 0) {
+    return <View />;
+  }
+
+  const groups = _.groupBy(data, item =>
+    moment(item.dropoff.doneBefore).format('LL'),
+  );
+  const sections = _.map(groups, (value, key) => ({
+    title: key,
+    data: value,
+  }));
+
+  return (
+    <SectionList
+      stickySectionHeadersEnabled={false}
+      initialNumToRender={17}
+      sections={sections}
+      onEndReached={onEndReached}
+      onEndReachedThreshold={Platform.OS === 'ios' ? 0 : 0.01}
+      onRefresh={onRefresh}
+      refreshing={refreshing}
+      keyExtractor={(item, index) => item['@id']}
+      renderItem={({ item }) => <ListItem item={item} itemCaptionLines={ itemCaptionLines } onPress={() => _onItemPress(item, loading, refreshing, onItemPress)} /> }
+      ItemSeparatorComponent={ItemSeparator}
+      ListFooterComponent={() => <ListFooter loading={loading} />}
+      renderSectionHeader={({ section: { title } }) => (
+        <SectionHeaderComponent title={title} />
+      )}
+    />
+  );
+}
 
-export default withTranslation()(DeliveryList);
+export default DeliveryList;