feat: rename Offscreen to Activity & support native Activity

src/Activity.tsx

@@ -0,0 +1,23 @@
+import React, { Suspense } from 'react';
+import { Repeater } from './Repeater';
+import type { FC, ExoticComponent } from 'react';
+import type { IProps } from './type';
+
+// @ts-ignore
+const NativeActivity = (React.Activity || React.unstable_Activity) as ExoticComponent<IProps> | undefined;
+
+export const Activity: FC<IProps> = (props) => {
+  const { mode, children } = props;
+
+  if(NativeActivity) {
+    return (
+      <Activity mode={mode}>{children}</Activity>
+    )
+  }
+
+  return (
+    <Suspense fallback={null}>
+      <Repeater mode={mode}>{children}</Repeater>
+    </Suspense>
+  );
+};

src/index.ts

@@ -1,3 +1,5 @@
-export { Offscreen } from './OffScreen';
+export { Activity } from './Activity';
+export { Activity as Offscreen } from './Activity';
 
-export type { OffscreenMode } from './type';
+export type { ActivityMode } from './type';
+export type { ActivityMode as OffscreenMode } from './type';

src/type.ts

@@ -1,8 +1,8 @@
 import type { ReactNode } from 'react';
 
-export type OffscreenMode = 'visible' | 'hidden';
+export type ActivityMode = 'visible' | 'hidden';
 
 export interface IProps {
-  mode: OffscreenMode;
+  mode: ActivityMode;
   children: ReactNode;
 }

test/blah.test.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { Thing } from '../src';
+import { Activity } from '../src';
 
 describe('it', () => {
   it('renders without crashing', () => {
     const div = document.createElement('div');
-    ReactDOM.render(<Thing />, div);
+    ReactDOM.render(<Activity mode="visible">children</Activity>, div);
     ReactDOM.unmountComponentAtNode(div);
   });
 });