Add override keyword to TypeScript part of codebase (#3667)

## Description

This PR adds `override` keyword to part of our codebase that is written in `TypeScript`. I think it will improve readability and some cases will be easier to understand.

It also enables `noImplicitOverride` flag in ts compiler, which means that `override` keyword is mandatory when overriding a method. 

## Test plan

Run example app

Author: m-bert

apps/common-app/tsconfig.json

@@ -3,6 +3,7 @@
   "compilerOptions": {
     "noEmit": true,
     "baseUrl": ".",
+    "noImplicitOverride": false,
     "paths": {
       "@/*": ["./*"],
       "react-native-gesture-handler": [

packages/react-native-gesture-handler/src/components/DrawerLayout.tsx

@@ -263,7 +263,10 @@ export default class DrawerLayout extends Component<
     this.updateAnimatedEvent(props, this.state);
   }
 
-  shouldComponentUpdate(props: DrawerLayoutProps, state: DrawerLayoutState) {
+  override shouldComponentUpdate(
+    props: DrawerLayoutProps,
+    state: DrawerLayoutState
+  ) {
     if (
       this.props.drawerPosition !== props.drawerPosition ||
       this.props.drawerWidth !== props.drawerWidth ||
@@ -719,7 +722,7 @@ export default class DrawerLayout extends Component<
     this.props.onGestureRef?.(ref);
   };
 
-  render() {
+  override render() {
     const { drawerPosition, drawerLockMode, edgeWidth, minSwipeDistance } =
       this.props;
 

packages/react-native-gesture-handler/src/components/GestureButtons.tsx

@@ -122,7 +122,7 @@ class InnerBaseButton extends React.Component<BaseButtonWithRefProps> {
     ); // TODO: maybe it is not correct
   };
 
-  render() {
+  override render() {
     const { rippleColor: unprocessedRippleColor, style, ...rest } = this.props;
 
     if (IS_FABRIC === null) {
@@ -190,7 +190,7 @@ class InnerRectButton extends React.Component<RectButtonWithRefProps> {
     this.props.onActiveStateChange?.(active);
   };
 
-  render() {
+  override render() {
     const { children, style, ...rest } = this.props;
 
     const resolvedStyle = StyleSheet.flatten(style) ?? {};
@@ -247,7 +247,7 @@ class InnerBorderlessButton extends React.Component<BorderlessButtonWithRefProps
     this.props.onActiveStateChange?.(active);
   };
 
-  render() {
+  override render() {
     const { children, style, innerRef, ...rest } = this.props;
 
     return (

packages/react-native-gesture-handler/src/components/Swipeable.tsx

@@ -257,7 +257,7 @@ export default class Swipeable extends Component<
     );
   }
 
-  shouldComponentUpdate(props: SwipeableProps, state: SwipeableState) {
+  override shouldComponentUpdate(props: SwipeableProps, state: SwipeableState) {
     if (
       this.props.friction !== props.friction ||
       this.props.overshootLeft !== props.overshootLeft ||
@@ -504,7 +504,7 @@ export default class Swipeable extends Component<
     this.setState({ rowState: 0 });
   };
 
-  render() {
+  override render() {
     const { rowState } = this.state;
     const {
       children,

packages/react-native-gesture-handler/src/components/touchables/GenericTouchable.tsx

@@ -115,7 +115,7 @@ export default class GenericTouchable extends Component<
     }
   }
 
-  componentDidMount() {
+  override componentDidMount() {
     this.reset();
   }
   // Reset timeout to prevent memory leaks.
@@ -204,7 +204,7 @@ export default class GenericTouchable extends Component<
     this.props.onLongPress?.();
   };
 
-  componentWillUnmount() {
+  override componentWillUnmount() {
     // To prevent memory leaks
     this.reset();
   }
@@ -225,7 +225,7 @@ export default class GenericTouchable extends Component<
     }
   }
 
-  render() {
+  override render() {
     const hitSlop =
       (typeof this.props.hitSlop === 'number'
         ? {

packages/react-native-gesture-handler/src/components/touchables/TouchableHighlight.tsx

@@ -103,7 +103,7 @@ export default class TouchableHighlight extends Component<
     }
   };
 
-  render() {
+  override render() {
     const { style = {}, ...rest } = this.props;
     const { extraUnderlayStyle } = this.state;
     return (

packages/react-native-gesture-handler/src/components/touchables/TouchableNativeFeedback.android.tsx

@@ -70,7 +70,7 @@ export default class TouchableNativeFeedback extends Component<TouchableNativeFe
     extraProps['foreground'] = this.props.useForeground;
     return extraProps;
   }
-  render() {
+  override render() {
     const { style = {}, ...rest } = this.props;
     return (
       <GenericTouchable

packages/react-native-gesture-handler/src/components/touchables/TouchableOpacity.tsx

@@ -59,7 +59,7 @@ export default class TouchableOpacity extends Component<TouchableOpacityProps> {
     }
   };
 
-  render() {
+  override render() {
     const { style = {}, ...rest } = this.props;
     return (
       <GenericTouchable

packages/react-native-gesture-handler/src/handlers/ForceTouchGestureHandler.ts

@@ -17,14 +17,14 @@ export const forceTouchGestureHandlerProps = [
 // implicit `children` prop has been removed in @types/react^18.0.0
 class ForceTouchFallback extends React.Component<PropsWithChildren<unknown>> {
   static forceTouchAvailable = false;
-  componentDidMount() {
+  override componentDidMount() {
     console.warn(
       tagMessage(
         'ForceTouchGestureHandler is not available on this platform. Please use ForceTouchGestureHandler.forceTouchAvailable to conditionally render other components that would provide a fallback behavior specific to your usecase'
       )
     );
   }
-  render() {
+  override render() {
     return this.props.children;
   }
 }

packages/react-native-gesture-handler/src/handlers/createHandler.tsx

@@ -184,7 +184,7 @@ export default function createHandler<
     HandlerState
   > {
     static displayName = name;
-    static contextType = GestureHandlerRootViewContext;
+    static override contextType = GestureHandlerRootViewContext;
 
     private handlerTag = -1;
     private config: Record<string, unknown>;
@@ -208,7 +208,7 @@ export default function createHandler<
       }
     }
 
-    componentDidMount() {
+    override componentDidMount() {
       const props: HandlerProps<U> = this.props;
       this.isMountedRef.current = true;
 
@@ -250,15 +250,15 @@ export default function createHandler<
       this.attachGestureHandler(findNodeHandle(this.viewNode) as number); // TODO(TS) - check if this can be null
     }
 
-    componentDidUpdate() {
+    override componentDidUpdate() {
       const viewTag = findNodeHandle(this.viewNode);
       if (this.viewTag !== viewTag) {
         this.attachGestureHandler(viewTag as number); // TODO(TS) - check interaction between _viewTag & findNodeHandle
       }
       this.update(UNRESOLVED_REFS_RETRY_LIMIT);
     }
 
-    componentWillUnmount() {
+    override componentWillUnmount() {
       this.inspectorToggleListener?.remove();
       this.isMountedRef.current = false;
       if (Platform.OS !== 'web') {
@@ -442,7 +442,7 @@ export default function createHandler<
       this.updateGestureHandler(newConfig);
     }
 
-    render() {
+    override render() {
       if (__DEV__ && !this.context && !isTestEnv() && Platform.OS !== 'web') {
         throw new Error(
           name +