chore(ts): setup codegen spec & fix types (#601)

* feat: add codegenConfig

* feat: update native spec & types

* fix: add missing native props

* fix: change codegenConfig format

* fix: fix types for codegen

Co-authored-by: krozniata <[email protected]>
Co-authored-by: okwasniewski <[email protected]>

Author: okwasniewski

example/src/App.tsx

@@ -29,7 +29,7 @@ type State = {
   dotsVisible: boolean;
 };
 export default class App extends React.Component<{}, State> {
-  viewPager: React.Ref<typeof ViewPager>;
+  viewPager: { current: React.ElementRef<typeof ViewPager> | null };
 
   constructor(props: any) {
     super(props);
@@ -84,11 +84,9 @@ export default class App extends React.Component<{}, State> {
 
   go = (page: number) => {
     if (this.state.animationsAreEnabled) {
-      /* @ts-ignore */
-      this.viewPager.current.setPage(page);
+      this.viewPager?.current?.setPage(page);
     } else {
-      /* @ts-ignore */
-      this.viewPager.current.setPageWithoutAnimation(page);
+      this.viewPager?.current?.setPageWithoutAnimation(page);
     }
   };
 
@@ -120,7 +118,6 @@ export default class App extends React.Component<{}, State> {
           // Lib does not support dynamically orientation change
           orientation="horizontal"
           showPageIndicator={dotsVisible}
-          /* @ts-ignore */
           ref={this.viewPager}
         >
           {pages.map((p) => this.renderPage(p))}

package.json

@@ -134,6 +134,11 @@
     "trailingComma": "es5",
     "useTabs": false
   },
+  "codegenConfig": {
+    "name": "PagerViewView",
+    "type": "components",
+    "jsSrcsDir": "src"
+  },
   "react-native-builder-bob": {
     "source": "src",
     "output": "lib",

src/PagerView.tsx

@@ -1,6 +1,6 @@
-import React, { ReactElement } from 'react';
-import { Platform, UIManager, Keyboard } from 'react-native';
-import ReactNative, { I18nManager } from 'react-native';
+import React from 'react';
+import { Platform, Keyboard } from 'react-native';
+import { I18nManager } from 'react-native';
 import type {
   PagerViewOnPageScrollEvent,
   PagerViewOnPageSelectedEvent,
@@ -9,7 +9,9 @@ import type {
 } from './types';
 
 import { childrenWithOverriddenStyle } from './utils';
-import PagerViewView, { NativeCommands } from './PagerViewViewNativeComponent';
+import PagerViewView, {
+  Commands as PagerViewCommands,
+} from './PagerViewViewNativeComponent';
 
 /**
  * Container that allows to flip left and right between child views. Each
@@ -55,7 +57,7 @@ import PagerViewView, { NativeCommands } from './PagerViewViewNativeComponent';
 
 export class PagerView extends React.Component<PagerViewProps> {
   private isScrolling = false;
-  private PagerView = React.createRef<NativeCommands>();
+  pagerView: React.ElementRef<typeof PagerViewView> | null = null;
 
   private _onPageScroll = (e: PagerViewOnPageScrollEvent) => {
     if (this.props.onPageScroll) {
@@ -90,20 +92,19 @@ export class PagerView extends React.Component<PagerViewProps> {
    * The transition between pages will be animated.
    */
   public setPage = (selectedPage: number) => {
-    //@ts-ignore FIX IT
-    this.PagerView.current?.setPage(this.PagerView.current, selectedPage);
+    if (this.pagerView) {
+      PagerViewCommands.setPage(this.pagerView, selectedPage);
+    }
   };
 
   /**
    * A helper function to scroll to a specific page in the PagerView.
    * The transition between pages will *not* be animated.
    */
   public setPageWithoutAnimation = (selectedPage: number) => {
-    //@ts-ignore FIX IT
-    this.PagerView.current?.setPageWithoutAnimation(
-      this.PagerView.current,
-      selectedPage
-    );
+    if (this.pagerView) {
+      PagerViewCommands.setPageWithoutAnimation(this.pagerView, selectedPage);
+    }
   };
 
   /**
@@ -112,11 +113,9 @@ export class PagerView extends React.Component<PagerViewProps> {
    * imperative solution is more useful (e.g. for not blocking an animation)
    */
   public setScrollEnabled = (scrollEnabled: boolean) => {
-    //@ts-ignore FIX IT
-    this.PagerView.current?.setScrollEnabled(
-      this.PagerView.current,
-      scrollEnabled
-    );
+    if (this.pagerView) {
+      PagerViewCommands.setScrollEnabled(this.pagerView, scrollEnabled);
+    }
   };
 
   private _onMoveShouldSetResponderCapture = () => {
@@ -138,7 +137,9 @@ export class PagerView extends React.Component<PagerViewProps> {
     return (
       <PagerViewView
         {...this.props}
-        ref={this.PagerView as any /** TODO: Fix ref type */}
+        ref={(ref) => {
+          this.pagerView = ref;
+        }}
         style={this.props.style}
         layoutDirection={this.deducedLayoutDirection}
         onPageScroll={this._onPageScroll}

src/PagerViewViewNativeComponent.ts

@@ -1,22 +1,55 @@
-import codegenNativeComponent, {
-  NativeComponentType,
-} from 'react-native/Libraries/Utilities/codegenNativeComponent';
-import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';
 import type * as React from 'react';
-import type { PagerViewProps } from './types';
+import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type { HostComponent, ViewProps } from 'react-native';
+import type {
+  BubblingEventHandler,
+  DirectEventHandler,
+  Double,
+  Int32,
+  WithDefault,
+} from 'react-native/Libraries/Types/CodegenTypes';
+
+type OnPageScrollEventData = Readonly<{
+  position: Double;
+  offset: Double;
+}>;
+
+type OnPageSelectedEventData = Readonly<{
+  position: Double;
+}>;
 
-const VIEW_MANAGER_NAME = 'PagerViewView';
+type OnPageScrollStateChangedEventData = Readonly<{
+  pageScrollState: 'idle' | 'dragging' | 'settling';
+}>;
+
+export type PagerViewOnPageScrollEventData = OnPageScrollEventData;
+export type PagerViewOnPageSelectedEventData = OnPageSelectedEventData;
+export type PageScrollStateChangedEvent = OnPageScrollStateChangedEventData;
+
+interface NativeProps extends ViewProps {
+  scrollEnabled?: WithDefault<boolean, true>;
+  layoutDirection?: WithDefault<'rtl' | 'ltr' | 'locale', 'rtl'>;
+  initialPage?: Int32;
+  orientation?: WithDefault<'horizontal' | 'vertical', 'horizontal'>;
+  offscreenPageLimit?: Int32;
+  pageMargin?: Int32;
+  overScrollMode?: WithDefault<'auto' | 'always' | 'never', 'auto'>;
+  onPageScroll: BubblingEventHandler<OnPageScrollEventData>;
+  onPageSelected: DirectEventHandler<OnPageSelectedEventData>;
+  onPageScrollStateChanged: DirectEventHandler<OnPageScrollStateChangedEventData>;
+}
 
-export type PagerViewViewType = NativeComponentType<PagerViewProps>;
+type PagerViewViewType = HostComponent<NativeProps>;
 
 export interface NativeCommands {
   setPage: (
     viewRef: React.ElementRef<PagerViewViewType>,
-    selectedPage: number
+    selectedPage: Int32
   ) => void;
   setPageWithoutAnimation: (
     viewRef: React.ElementRef<PagerViewViewType>,
-    selectedPage: number
+    selectedPage: Int32
   ) => void;
   setScrollEnabled: (
     viewRef: React.ElementRef<PagerViewViewType>,
@@ -28,4 +61,6 @@ export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
   supportedCommands: ['setPage', 'setPageWithoutAnimation', 'setScrollEnabled'],
 });
 
-export default codegenNativeComponent<PagerViewProps>(VIEW_MANAGER_NAME);
+export default codegenNativeComponent<NativeProps>(
+  'PagerViewView'
+) as HostComponent<NativeProps>;

src/types.ts

@@ -1,29 +1,24 @@
 import type * as ReactNative from 'react-native';
+import type {
+  PagerViewOnPageScrollEventData,
+  PagerViewOnPageSelectedEventData,
+  PageScrollStateChangedEvent,
+} from './PagerViewViewNativeComponent';
 
 export type Orientation = 'horizontal' | 'vertical';
 export type OverScrollMode = 'auto' | 'always' | 'never';
 export type PageScrollState = 'idle' | 'dragging' | 'settling';
 
 export type PagerViewOnPageScrollEvent =
   ReactNative.NativeSyntheticEvent<PagerViewOnPageScrollEventData>;
-export interface PagerViewOnPageScrollEventData {
-  position: number;
-  offset: number;
-}
 
 export type PagerViewOnPageSelectedEvent =
   ReactNative.NativeSyntheticEvent<PagerViewOnPageSelectedEventData>;
-export interface PagerViewOnPageSelectedEventData {
-  position: number;
-}
 
 export type PageScrollStateChangedNativeEvent =
   ReactNative.NativeSyntheticEvent<PageScrollStateChangedEvent>;
-export interface PageScrollStateChangedEvent {
-  pageScrollState: PageScrollState;
-}
 
-export interface PagerViewProps extends ReactNative.ViewProps {
+export interface PagerViewProps {
   /**
    * Index of initial page that should be selected. Use `setPage` method to
    * update the page, and `onPageSelected` to monitor page changes
@@ -87,6 +82,7 @@ export interface PagerViewProps extends ReactNative.ViewProps {
    */
   pageMargin?: number;
 
+  style?: ReactNative.StyleProp<ReactNative.ViewStyle>;
   /**
    * Set the number of pages that should be retained to either side
    * of the currently visible page(s). Pages beyond this limit will