Change Legacy basic example into the next basic example

callstack · Mar 31, 2024 · 13fa1cb · 13fa1cb
1 parent 9f0be55
commit 13fa1cb
Show file tree

Hide file tree

Showing 7 changed files with 21 additions and 16 deletions.
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -34,7 +34,7 @@ import CoverflowExample from './tabView/CoverflowExample';
 import ReanimatedOnPageScrollExample from './ReanimatedOnPageScrollExample';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
-import { LegacyBasicPagerViewExample } from './LegacyBasicPagerViewExample';
+import { NextBasicPagerViewExample } from './NextBasicPagerViewExample';
 
 const examples = [
   { component: BasicPagerViewExample, name: 'Basic Example' },
@@ -69,8 +69,8 @@ const examples = [
 
 if (Platform.OS === 'ios') {
   examples.unshift({
-    component: LegacyBasicPagerViewExample,
-    name: '❌ Legacy Basic Example',
+    component: NextBasicPagerViewExample,
+    name: '🔜 Next Basic Example',
   });
 }
 

diff --git a/example/src/LegacyBasicPagerViewExample.tsx → example/src/NextBasicPagerViewExample.tsx b/example/src/LegacyBasicPagerViewExample.tsx → example/src/NextBasicPagerViewExample.tsx
@@ -9,7 +9,7 @@ import { useNavigationPanel } from './hook/useNavigationPanel';
 
 const AnimatedPagerView = Animated.createAnimatedComponent(PagerView);
 
-export function LegacyBasicPagerViewExample() {
+export function NextBasicPagerViewExample() {
   const { ref, ...navigationPanel } = useNavigationPanel();
 
   return (
@@ -29,7 +29,7 @@ export function LegacyBasicPagerViewExample() {
         pageMargin={10}
         // Lib does not support dynamically orientation change
         orientation="horizontal"
-        useLegacy
+        useNext={true}
       >
         {useMemo(
           () =>

diff --git a/example/src/ScrollViewInsideExample.tsx b/example/src/ScrollViewInsideExample.tsx
@@ -14,12 +14,7 @@ export const ScrollViewInsideExample = (): JSX.Element => {
   );
 
   return (
-    <AnimatedPagerView
-      // todo fix this case
-      useLegacy
-      testID="pager-view"
-      style={styles.flex}
-    >
+    <AnimatedPagerView testID="pager-view" style={styles.flex}>
       {pages.map((page) => (
         <ScrollView key={page.key} style={styles.content}>
           {Array(20)

diff --git a/src/LEGACY_PagerViewNativeComponent/LEGACY_PagerViewNativeComponent.ts b/src/LEGACY_PagerViewNativeComponent/LEGACY_PagerViewNativeComponent.ts
@@ -47,7 +47,7 @@ interface NativeProps extends ViewProps {
   onPageScroll?: DirectEventHandler<OnPageScrollEventData>;
   onPageSelected?: DirectEventHandler<OnPageSelectedEventData>;
   onPageScrollStateChanged?: DirectEventHandler<OnPageScrollStateChangedEventData>;
-  useLegacy?: WithDefault<boolean, false>;
+  useLegacy?: WithDefault<boolean, true>;
 }
 
 type PagerViewViewType = HostComponent<NativeProps>;

diff --git a/src/PagerView.tsx b/src/PagerView.tsx
@@ -13,7 +13,7 @@ import PagerViewNativeComponent, {
   OnPageScrollEventData,
   OnPageScrollStateChangedEventData,
   OnPageSelectedEventData,
-  NativeProps as PagerViewProps,
+  NativeProps,
 } from './PagerViewNativeComponent/PagerViewNativeComponent';
 
 import LEGACY_PagerViewNativeComponent, {
@@ -72,7 +72,8 @@ if (Platform.OS === 'ios') {
  * }
  * ```
  */
-export class PagerView extends React.Component<PagerViewProps> {
+
+class PagerViewInternal extends React.Component<NativeProps> {
   private isScrolling = false;
   pagerView: React.ElementRef<typeof PagerViewNativeComponent> | null = null;
 
@@ -222,3 +223,13 @@ export class PagerView extends React.Component<PagerViewProps> {
     );
   }
 }
+
+// Temporary solution. It should be removed once all things get fixed
+type PagerViewProps = Omit<NativeProps, 'useLegacy'> & { useNext: boolean };
+
+export const PagerView = React.forwardRef<PagerViewInternal, PagerViewProps>(
+  (props, ref) => {
+    const { useNext, ...rest } = props;
+    return <PagerViewInternal {...rest} useLegacy={!useNext} ref={ref} />;
+  }
+);
diff --git a/src/PagerViewNativeComponent/PagerViewNativeComponent.ts b/src/PagerViewNativeComponent/PagerViewNativeComponent.ts
@@ -36,7 +36,7 @@ export interface NativeProps extends ViewProps {
   onPageScroll?: DirectEventHandler<OnPageScrollEventData>;
   onPageSelected?: DirectEventHandler<OnPageSelectedEventData>;
   onPageScrollStateChanged?: DirectEventHandler<OnPageScrollStateChangedEventData>;
-  useLegacy?: WithDefault<boolean, false>;
+  useLegacy?: WithDefault<boolean, true>;
 }
 
 type PagerViewViewType = HostComponent<NativeProps>;

diff --git a/tsconfig.json b/tsconfig.json
@@ -7,7 +7,6 @@
     "allowUnreachableCode": false,
     "allowUnusedLabels": false,
     "esModuleInterop": true,
-    "importsNotUsedAsValues": "error",
     "forceConsistentCasingInFileNames": true,
     "jsx": "react",
     "lib": ["esnext"],