refactor: screen rewritten as functional component

src/components/Screen.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
 import React from 'react';
 import { Animated, View, Platform } from 'react-native';
 
@@ -17,7 +16,7 @@ import ScreenNativeComponent from '../fabric/ScreenNativeComponent';
 import ModalScreenNativeComponent from '../fabric/ModalScreenNativeComponent';
 
 export const NativeScreen: React.ComponentType<ScreenProps> =
-  ScreenNativeComponent as any;
+  ScreenNativeComponent as React.ComponentType<ScreenProps>;
 const AnimatedNativeScreen = Animated.createAnimatedComponent(NativeScreen);
 const AnimatedNativeModalScreen = Animated.createAnimatedComponent(
   ModalScreenNativeComponent as React.ComponentType<ScreenProps>
@@ -42,27 +41,25 @@ interface ViewConfig extends View {
   };
 }
 
-export class InnerScreen extends React.Component<ScreenProps> {
-  private ref: React.ElementRef<typeof View> | null = null;
-  private closing = new Animated.Value(0);
-  private progress = new Animated.Value(0);
-  private goingForward = new Animated.Value(0);
+export const InnerScreen = React.forwardRef<View, ScreenProps>(
+  function InnerScreen(props, ref) {
+    const innerRef = React.useRef<ViewConfig | null>(null);
+    React.useImperativeHandle(ref, () => innerRef.current!, []);
 
-  setNativeProps(props: ScreenProps): void {
-    this.ref?.setNativeProps(props);
-  }
+    const setRef = (ref: ViewConfig) => {
+      innerRef.current = ref;
+      props.onComponentRef?.(ref);
+    };
 
-  setRef = (ref: React.ElementRef<typeof View> | null): void => {
-    this.ref = ref;
-    this.props.onComponentRef?.(ref);
-  };
+    const closing = new Animated.Value(0);
+    const progress = new Animated.Value(0);
+    const goingForward = new Animated.Value(0);
 
-  render() {
     const {
       enabled = screensEnabled(),
       freezeOnBlur = freezeEnabled(),
       ...rest
-    } = this.props;
+    } = props;
 
     // To maintain default behavior of formSheet stack presentation style and to have reasonable
     // defaults for new medium-detent iOS API we need to set defaults here
@@ -112,13 +109,13 @@ export class InnerScreen extends React.Component<ScreenProps> {
             ...ref.viewConfig.validAttributes.style,
             display: false,
           };
-          this.setRef(ref);
+          setRef(ref);
         } else if (ref?._viewConfig?.validAttributes?.style) {
           ref._viewConfig.validAttributes.style = {
             ...ref._viewConfig.validAttributes.style,
             display: false,
           };
-          this.setRef(ref);
+          setRef(ref);
         }
       };
 
@@ -148,9 +145,9 @@ export class InnerScreen extends React.Component<ScreenProps> {
                     [
                       {
                         nativeEvent: {
-                          progress: this.progress,
-                          closing: this.closing,
-                          goingForward: this.goingForward,
+                          progress,
+                          closing,
+                          goingForward,
                         },
                       },
                     ],
@@ -168,9 +165,9 @@ export class InnerScreen extends React.Component<ScreenProps> {
             ) : (
               <TransitionProgressContext.Provider
                 value={{
-                  progress: this.progress,
-                  closing: this.closing,
-                  goingForward: this.goingForward,
+                  progress,
+                  closing,
+                  goingForward,
                 }}>
                 {children}
               </TransitionProgressContext.Provider>
@@ -195,25 +192,22 @@ export class InnerScreen extends React.Component<ScreenProps> {
       return (
         <Animated.View
           style={[style, { display: activityState !== 0 ? 'flex' : 'none' }]}
-          ref={this.setRef}
+          ref={setRef}
           {...props}
         />
       );
     }
   }
-}
+);
 
 // context to be used when the user wants to use enhanced implementation
 // e.g. to use `useReanimatedTransitionProgress` (see `reanimated` folder in repo)
 export const ScreenContext = React.createContext(InnerScreen);
 
-class Screen extends React.Component<ScreenProps> {
-  static contextType = ScreenContext;
+const Screen: React.FC<ScreenProps> = props => {
+  const ScreenWrapper = React.useContext(ScreenContext) || InnerScreen;
 
-  render() {
-    const ScreenWrapper = (this.context || InnerScreen) as React.ElementType;
-    return <ScreenWrapper {...this.props} />;
-  }
-}
+  return <ScreenWrapper {...props} />;
+};
 
 export default Screen;