Infra/ change _.invoke to optional chaining

demo/src/screens/componentScreens/WithScrollEnablerScreen/AutoLockFlatList.tsx

@@ -39,21 +39,16 @@ const WithScrollEnabler = (props: AutoLockScrollViewProps) => {
 
   const onContentSizeChange = useCallback(
     (contentWidth: number, contentHeight: number) => {
-      _.invoke(props, 'onContentSizeChange', contentWidth, contentHeight);
-      _.invoke(
-        props,
-        'scrollEnablerProps.onContentSizeChange',
-        contentWidth,
-        contentHeight
-      );
+      props.onContentSizeChange?.(contentWidth, contentHeight);
+      props.scrollEnablerProps.onContentSizeChange?.(contentWidth, contentHeight);
     },
     [props.onContentSizeChange, props.scrollEnablerProps.onContentSizeChange]
   );
 
   const onLayout = useCallback(
     (nativeEvent: LayoutChangeEvent) => {
-      _.invoke(props, 'onLayout', nativeEvent);
-      _.invoke(props, 'scrollEnablerProps.onLayout', nativeEvent);
+      props.onLayout?.(nativeEvent);
+      props.scrollEnablerProps.onLayout?.(nativeEvent);
     },
     [props.onLayout, props.scrollEnablerProps.onLayout]
   );

demo/src/screens/componentScreens/WithScrollEnablerScreen/AutoLockScrollView.tsx

@@ -30,21 +30,16 @@ const WithScrollEnabler = (props: AutoLockScrollViewProps) => {
 
   const onContentSizeChange = useCallback(
     (contentWidth: number, contentHeight: number) => {
-      _.invoke(props, 'onContentSizeChange', contentWidth, contentHeight);
-      _.invoke(
-        props,
-        'scrollEnablerProps.onContentSizeChange',
-        contentWidth,
-        contentHeight
-      );
+      props.onContentSizeChange?.(contentWidth, contentHeight);
+      props.scrollEnablerProps.onContentSizeChange?.(contentWidth, contentHeight);
     },
     [props.onContentSizeChange, props.scrollEnablerProps.onContentSizeChange]
   );
 
   const onLayout = useCallback(
     (nativeEvent: LayoutChangeEvent) => {
-      _.invoke(props, 'onLayout', nativeEvent);
-      _.invoke(props, 'scrollEnablerProps.onLayout', nativeEvent);
+      props.onLayout?.(nativeEvent);
+      props.scrollEnablerProps.onLayout?.(nativeEvent);
     },
     [props.onLayout, props.scrollEnablerProps.onLayout]
   );

generatedTypes/components/dialog/index.d.ts

@@ -12,7 +12,7 @@ export interface DialogProps extends AlignmentModifiers, RNPartialProps {
     /**
      * Dismiss callback for when clicking on the background
      */
-    onDismiss?: (props: any) => void;
+    onDismiss?: (props?: any) => void;
     /**
      * Whether or not to ignore background press
      */

generatedTypes/components/hint/index.d.ts

@@ -173,7 +173,6 @@ declare class Hint extends Component<HintProps, HintState> {
         }[];
     };
     getTipPosition(): Position;
-    shouldEnableShadow(): boolean | undefined;
     renderHintTip(): JSX.Element;
     renderContent(): JSX.Element;
     renderHint(): JSX.Element | undefined;

generatedTypes/components/radioGroup/index.d.ts

@@ -9,7 +9,7 @@ export declare type RadioGroupProps = ViewProps & {
     /**
      * Invoked once when value changes, by selecting one of the radio buttons in the group
      */
-    onValueChange?: ((value: string) => void) | ((value: number) => void) | ((value: boolean) => void) | ((value: any) => void);
+    onValueChange?: ((value?: string) => void) | ((value?: number) => void) | ((value?: boolean) => void) | ((value?: any) => void);
 };
 export declare type RadioGroupPropTypes = RadioGroupProps;
 interface RadioGroupState {
@@ -43,7 +43,7 @@ declare const _default: React.ComponentClass<ViewProps & {
     /**
      * Invoked once when value changes, by selecting one of the radio buttons in the group
      */
-    onValueChange?: ((value: string) => void) | ((value: number) => void) | ((value: boolean) => void) | ((value: any) => void) | undefined;
+    onValueChange?: ((value?: string | undefined) => void) | ((value?: number | undefined) => void) | ((value?: boolean | undefined) => void) | ((value?: any) => void) | undefined;
 } & {
     useCustomTheme?: boolean | undefined;
 }, any>;

src/components/actionSheet/index.tsx

@@ -139,8 +139,8 @@ class ActionSheet extends Component<ActionSheetProps> {
   }
 
   onOptionPress(optionIndex: number) {
-    _.invoke(this.props, `options[${optionIndex}].onPress`);
-    _.invoke(this.props, 'onDismiss');
+    this.props.options?.[optionIndex].onPress?.();
+    this.props.onDismiss?.();
   }
 
   handleRenderIcon = (option: ButtonProps) => {

src/components/carousel/index.tsx

@@ -251,14 +251,14 @@ class Carousel extends Component<CarouselProps, CarouselState> {
 
   onMomentumScrollEnd = () => {
     // finished full page scroll
-    const {currentStandingPage, currentPage} = this.state;
+    const {currentStandingPage = 0, currentPage} = this.state;
     const index = this.getCalcIndex(currentPage);
 
     const pagesCount = presenter.getChildrenLength(this.props);
     if (index < pagesCount) {
       this.setState({currentStandingPage: index});
       if (currentStandingPage !== index) {
-        _.invoke(this.props, 'onChangePage', index, currentStandingPage);
+        this.props.onChangePage?.(index, currentStandingPage);
       }
     }
   };
@@ -316,7 +316,7 @@ class Carousel extends Component<CarouselProps, CarouselState> {
       this.resetAutoPlay();
     }
 
-    _.invoke(this.props, 'onScroll', event);
+    this.props.onScroll?.(event);
   };
 
   // @ts-ignore

src/components/checkbox/index.tsx

@@ -1,4 +1,3 @@
-import _ from 'lodash';
 import React, {Component} from 'react';
 import {
   Animated,
@@ -173,7 +172,7 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
     const {disabled} = this.props;
 
     if (!disabled) {
-      _.invoke(this.props, 'onValueChange', !this.props.value);
+      this.props.onValueChange?.(!this.props.value);
     }
   };
 

src/components/colorPicker/ColorPalette.tsx

@@ -247,7 +247,7 @@ class ColorPalette extends PureComponent<Props, State> {
   };
 
   onValueChange = (value: string, options: object) => {
-    _.invoke(this.props, 'onValueChange', value, options);
+    this.props.onValueChange?.(value, options);
   };
 
   onLayout = () => {

src/components/colorPicker/ColorPickerDialog.tsx

@@ -212,14 +212,14 @@ class ColorPickerDialog extends PureComponent<Props, State> {
     const {hex} = this.getValidColorString(text);
 
     if (hex) {
-      _.invoke(this.props, 'onSubmit', hex, this.getTextColor(hex));
+      this.props.onSubmit?.(hex, this.getTextColor(hex));
       this.onDismiss();
     }
   };
 
   onDismiss = () => {
     this.resetValues();
-    _.invoke(this.props, 'onDismiss');
+    this.props.onDismiss?.();
   };
 
   renderHeader() {

src/components/colorPicker/ColorSwatch.tsx

@@ -1,4 +1,3 @@
-import _ from 'lodash';
 import React, {PureComponent} from 'react';
 import {StyleSheet, Animated, Easing, LayoutChangeEvent, StyleProp, ViewStyle} from 'react-native';
 import Assets from '../../assets';
@@ -104,9 +103,9 @@ class ColorSwatch extends PureComponent<Props> {
   }
 
   onPress = () => {
-    const {color, value, index} = this.props;
+    const {color = '', value, index} = this.props;
     const tintColor = this.getTintColor(value);
-    _.invoke(this.props, 'onPress', value || color, {tintColor, index});
+    this.props.onPress?.(value || color, {tintColor, index});
   };
 
   getTintColor(color?: string) {

src/components/colorPicker/index.tsx

@@ -1,4 +1,3 @@
-import _ from 'lodash';
 import React, {PureComponent} from 'react';
 import {StyleSheet, StyleProp, ViewStyle} from 'react-native';
 import ColorPalette from './ColorPalette';
@@ -133,7 +132,7 @@ class ColorPicker extends PureComponent<Props> {
 
   // ColorPalette
   onValueChange = (value: string, options: object) => {
-    _.invoke(this.props, 'onValueChange', value, options);
+    this.props.onValueChange?.(value, options);
   };
 }
 

src/components/dialog/index.tsx

@@ -31,7 +31,7 @@ export interface DialogProps extends AlignmentModifiers, RNPartialProps {
     /**
      * Dismiss callback for when clicking on the background
      */
-    onDismiss?: (props: any) => void;
+    onDismiss?: (props?: any) => void;
     /**
      * Whether or not to ignore background press
      */
@@ -170,8 +170,8 @@ class Dialog extends Component<DialogProps, DialogState> {
   onFadeDone = () => {
     if (!this.state.modalVisibility) {
       setTimeout(() => { // unfortunately this is needed if a modal needs to open on iOS
-        _.invoke(this.props, 'onDialogDismissed', this.props);
-        _.invoke(this.props, 'onModalDismissed', this.props);
+        this.props.onDialogDismissed?.(this.props);
+        this.props.onModalDismissed?.(this.props);
       }, 100);
     }
   }
@@ -180,11 +180,11 @@ class Dialog extends Component<DialogProps, DialogState> {
     this.setState({modalVisibility: false, fadeOut: false}, () => {
       const props = this.props;
       if (props.visible) {
-        _.invoke(props, 'onDismiss', props);
+        props.onDismiss?.(props);
       }
       // Parity with iOS Modal's onDismiss
       if (Constants.isAndroid) {
-        _.invoke(props, 'onDialogDismissed', props);
+        props.onDialogDismissed?.(props);
       }
     });
   }
@@ -200,8 +200,8 @@ class Dialog extends Component<DialogProps, DialogState> {
   };
 
   onModalDismissed = () => {
-    _.invoke(this.props, 'onDialogDismissed', this.props);
-    _.invoke(this.props, 'onModalDismissed', this.props);
+    this.props.onDialogDismissed?.(this.props);
+    this.props.onModalDismissed?.(this.props);
   }
 
   hideDialogView = () => {

src/components/drawer/index.tsx

@@ -208,15 +208,15 @@ class Drawer extends PureComponent<Props> {
     if (!item.keepOpen) {
       this.closeDrawer();
     }
-    _.invoke(item, 'onPress', this.props);
+    item.onPress?.(this.props);
   };
 
   private onSwipeableWillOpen = () => {
-    _.invoke(this.props, 'onSwipeableWillOpen', this.props);
+    this.props.onSwipeableWillOpen?.(this.props);
   };
 
   private onSwipeableWillClose = () => {
-    _.invoke(this.props, 'onSwipeableWillClose', this.props);
+    this.props.onSwipeableWillClose?.(this.props);
   };
 
   private onToggleSwipeLeft = (options?: any) => {
@@ -240,7 +240,7 @@ class Drawer extends PureComponent<Props> {
         this.animateItem({released: false, resetItemPosition: true});
         this.closeDrawer();
         setTimeout(() => {
-          _.invoke(this.props, 'onToggleSwipeLeft', this.props);
+          this.props.onToggleSwipeLeft?.(this.props);
         }, 150);
       }
     });
@@ -280,7 +280,7 @@ class Drawer extends PureComponent<Props> {
       // return o.text === event.nativeEvent.action;
       return o.name === event.nativeEvent.actionName;
     });
-    _.invoke(action, 'onPress');
+    action.onPress?.();
   };
 
   /** Renders */

src/components/featureHighlight/index.tsx

@@ -1,4 +1,3 @@
-import _ from 'lodash';
 import React, {Component, ElementRef} from 'react';
 import {
   StyleSheet,
@@ -288,7 +287,7 @@ class FeatureHighlight extends Component<FeatureHighlightProps, State> {
     this.contentHeight = contentViewHeight;
     this.targetPosition = undefined;
     const {confirmButtonProps} = this.props;
-    _.invoke(confirmButtonProps, 'onPress');
+    confirmButtonProps?.onPress?.();
   };
 
   renderHighlightMessage() {

src/components/image/index.tsx

@@ -153,7 +153,7 @@ class Image extends PureComponent<Props, State> {
   onError = (event: NativeSyntheticEvent<ImageErrorEventData>) => {
     if (event.nativeEvent.error) {
       this.setState({error: true});
-      _.invoke(this.props, 'onError', event);
+      this.props.onError?.(event);
     }
   }
 

src/components/pageControl/index.tsx

@@ -185,7 +185,7 @@ class PageControl extends PureComponent<PageControlProps, State> {
 
   onPagePress = ({customValue: index}: TouchableOpacityProps) => {
     PageControl.animate(this.props);
-    _.invoke(this.props, 'onPagePress', index);
+    this.props.onPagePress?.(index);
   };
 
   renderIndicator(index: number, size: number, enlargeActive?: boolean) {

src/components/panningViews/panDismissibleView.tsx

@@ -381,7 +381,7 @@ class PanDismissibleView extends PureComponent<Props, State> {
 
   onDismissAnimationFinished = ({finished}: {finished: boolean}) => {
     if (finished) {
-      _.invoke(this.props, 'onDismiss');
+      this.props.onDismiss?.();
     }
   };
 

src/components/panningViews/panGestureView.tsx

@@ -1,4 +1,3 @@
-import _ from 'lodash';
 import React, {Component} from 'react';
 import {
   PanResponder,
@@ -161,7 +160,7 @@ class PanGestureView extends Component<PanGestureViewProps, State> {
 
   onDismiss = () => {
     this.initPositions();
-    _.invoke(this.props, 'onDismiss');
+    this.props.onDismiss?.();
   }
 
   initPositions() {

src/components/panningViews/panListenerView.tsx

@@ -147,8 +147,8 @@ class PanListenerView extends PureComponent<Props> {
   };
 
   handlePanStart = () => {
-    _.invoke(this.props, 'onPanStart');
-    _.invoke(this.props.context, 'onPanStart');
+    this.props.onPanStart?.();
+    this.props.context?.onPanStart?.();
   };
 
   getSwipeDirection = ({vx, vy}: ({vx: number, vy: number})): PanningResultProps => {
@@ -201,26 +201,29 @@ class PanListenerView extends PureComponent<Props> {
     if (this.panResultHasValue(panResult)) {
       // @ts-ignore
       const data = {directions: panResult.selectedDirections, velocities: panResult.selectedAmounts};
-      _.invoke(this.props, 'onSwipe', data);
-      _.invoke(context, 'onSwipe', data);
+      this.props.onSwipe?.(data);
+      context?.onSwipe?.(data);
     } else if (hasDrag || hasContext) {
       panResult = this.getDragDirection(gestureState);
       if (this.panResultHasValue(panResult)) {
         const data = {directions: panResult.selectedDirections, deltas: panResult.selectedAmounts};
-        _.invoke(this.props, 'onDrag', data);
-        _.invoke(context, 'onDrag', data);
+        this.props.onDrag?.(data);
+        context?.onDrag?.(data);
+
       }
     }
   };
 
   handlePanRelease = () => {
-    _.invoke(this.props, 'onPanRelease');
-    _.invoke(this.props.context, 'onPanRelease');
+    this.props.onPanRelease?.();
+    this.props.context?.onPanRelease?.();
+
   };
 
   handlePanTerminate = () => {
-    _.invoke(this.props, 'onPanTerminated');
-    _.invoke(this.props.context, 'onPanTerminated');
+    this.props.onPanTerminated?.();
+    this.props.context?.onPanTerminated?.();
+
   };
 
   render() {

src/components/panningViews/panResponderView.tsx

@@ -1,4 +1,3 @@
-import _ from 'lodash';
 import React, {PureComponent} from 'react';
 import View, {ViewProps} from '../view';
 import asPanViewConsumer from './asPanViewConsumer';
@@ -77,8 +76,9 @@ class PanResponderView extends PureComponent<Props> {
     const location: PanLocationProps = {left: this.left, top: this.top};
     this.initialLeft = this.left || this.initialLeft;
     this.initialTop = this.top || this.initialTop;
-    _.invoke(this.props, 'onPanLocationChanged', location);
-    _.invoke(this.props.context, 'onPanLocationChanged', location);
+    this.props.onPanLocationChanged?.(location);
+    //@ts-expect-error
+    this.props.context.onPanLocationChanged?.(location);
   }
 
   onDrag(deltas: PanAmountsProps) {