enhance: Give RN components distinct names for debuggability

.changeset/lemon-pumpkins-invite.md

@@ -0,0 +1,5 @@
+---
+'@data-client/react': patch
+---
+
+React Native components have distinct name from non-native to help debuggability

packages/react/src/components/AsyncBoundary.tsx

@@ -13,8 +13,9 @@ function AsyncBoundary({
   fallback,
   ...errorProps
 }: Props): JSX.Element {
+  const susProps = fallback !== undefined ? { fallback } : {};
   return (
-    <Suspense fallback={fallback}>
+    <Suspense {...susProps}>
       <ErrorBoundary {...errorProps} fallbackComponent={errorComponent}>
         {children}
       </ErrorBoundary>

packages/react/src/components/BackupLoading.native.js

@@ -2,7 +2,7 @@
 import React, { useEffect } from 'react';
 import { Text, Linking, View } from 'react-native';
 
-export default function Loading() {
+export default function BackupLoadingNative() {
   let message = <Text>loading...</Text>;
   /* istanbul ignore else */
   if (process.env.NODE_ENV !== 'production') {

packages/react/src/components/BackupLoading.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 
-export default function Loading() {
+export default function BackupLoading() {
   let message: React.ReactNode = 'loading...';
   /* istanbul ignore else */
   if (process.env.NODE_ENV !== 'production') {

packages/react/src/components/DevToolsButton.native.tsx

@@ -1,5 +1,9 @@
 // this is not useful in react native
-export default function DevToolsButton({ pos }: { pos: DevToolsPosition }) {
+export default function DevToolsButtonNative({
+  pos,
+}: {
+  pos: DevToolsPosition;
+}) {
   return null;
 }
 

packages/react/src/components/ErrorFallback.native.tsx

@@ -1,11 +1,11 @@
 import { Text } from 'react-native';
 
-const ErrorFallback = ({
+const ErrorFallbackNative = ({
   error,
 }: {
   error: Error;
   resetErrorBoundary: () => void;
   className: string;
 }) => <Text role="alert">{error.message}</Text>;
 
-export default ErrorFallback;
+export default ErrorFallbackNative;