appandflow / appandflow/react-native-safe-area-context

[RN 0.88] Replace deep RN imports with public API

Offen
#743 2 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
Vorherrschende Sprache
TypeScript
Sterne
2.8k
Forks
258
Ø Merge
3 T. 1 Std.
Gemergte PRs (30 T.)
2

Beschreibung

Sub-issue of
- https://github.com/AppAndFlow/react-native-safe-area-context/issues/741

the strict TS API breaks packages with deep imports into RN internals

https://github.com/search?q=repo%3AAppAndFlow%2Freact-native-safe-area-context%20%22react-native%2FLibraries%2FTypes%2FCodegenTypes%22&type=code

https://github.com/search?q=repo%3AAppAndFlow%2Freact-native-safe-area-context+%22react-native%2FLibraries%2FUtilities%2FcodegenNativeComponent%22&type=code

not resolvable by consumers (with `moduleResolution: "bundler"`) which fails type resolution

so they need to use public API exports since RN 0.88, e.g.

```ts
import type { CodegenTypes } from 'react-native'; // CodegenTypes.Double, CodegenTypes.DirectEventHandler
import { codegenNativeComponent } from 'react-native';
```

then also

`SafeArea.types.ts`
update `InstanceType` to `Component`

`SafeAreaContext.tsx`
add explicit type `(e: InsetChangedEvent)`

example patch

```diff
diff --git a/src/SafeArea.types.ts b/src/SafeArea.types.ts
index d3d23b6..a25d3b9 100644
--- a/src/SafeArea.types.ts
+++ b/src/SafeArea.types.ts
@@ -1,6 +1,6 @@
import type * as React from 'react';
+import type { Component } from 'react';
import type { NativeSyntheticEvent, ViewProps } from 'react-native';
-import NativeSafeAreaView from './specs/NativeSafeAreaView';

export type Edge = 'top' | 'right' | 'bottom' | 'left';
export type EdgeMode = 'off' | 'additive' | 'maximum';
@@ -42,6 +42,4 @@ export interface NativeSafeAreaViewProps extends ViewProps {
edges?: Edges;
}

-export type NativeSafeAreaViewInstance = InstanceType<
- typeof NativeSafeAreaView
->;
+export type NativeSafeAreaViewInstance = Component;
diff --git a/src/SafeAreaContext.tsx b/src/SafeAreaContext.tsx
index ed192d7..caed333 100644
--- a/src/SafeAreaContext.tsx
+++ b/src/SafeAreaContext.tsx
@@ -119,7 +119,7 @@ export function SafeAreaListener({
{
+ onInsetsChange={(e: InsetChangedEvent) => {
onChange({
insets: e.nativeEvent.insets,
frame: e.nativeEvent.frame,
diff --git a/src/specs/NativeSafeAreaProvider.ts b/src/specs/NativeSafeAreaProvider.ts
index 5e6974e..b106412 100644
--- a/src/specs/NativeSafeAreaProvider.ts
+++ b/src/specs/NativeSafeAreaProvider.ts
@@ -1,27 +1,23 @@
-import type {
- DirectEventHandler,
- Double,
-} from 'react-native/Libraries/Types/CodegenTypes';
-import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
-import type { ViewProps, HostComponent } from 'react-native';
+import type { CodegenTypes, ViewProps, HostComponent } from 'react-native';
+import { codegenNativeComponent } from 'react-native';

export type Event = Readonly<{
insets: Readonly<{
- top: Double;
- right: Double;
- bottom: Double;
- left: Double;
+ top: CodegenTypes.Double;
+ right: CodegenTypes.Double;
+ bottom: CodegenTypes.Double;
+ left: CodegenTypes.Double;
}>;
frame: Readonly<{
- x: Double;
- y: Double;
- width: Double;
- height: Double;
+ x: CodegenTypes.Double;
+ y: CodegenTypes.Double;
+ width: CodegenTypes.Double;
+ height: CodegenTypes.Double;
}>;
}>;

export interface NativeProps extends ViewProps {
- onInsetsChange?: DirectEventHandler;
+ onInsetsChange?: CodegenTypes.DirectEventHandler;
}

export default codegenNativeComponent(
diff --git a/src/specs/NativeSafeAreaView.ts b/src/specs/NativeSafeAreaView.ts
index 0ab6adf..b031d12 100644
--- a/src/specs/NativeSafeAreaView.ts
+++ b/src/specs/NativeSafeAreaView.ts
@@ -1,9 +1,8 @@
-import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
-import type { WithDefault } from 'react-native/Libraries/Types/CodegenTypes';
import type { ViewProps, HostComponent } from 'react-native';
+import { codegenNativeComponent } from 'react-native';

export interface NativeProps extends ViewProps {
- mode?: WithDefault<'padding' | 'margin', 'padding'>;
+ mode?: 'padding' | 'margin';
edges?: Readonly<{
top: string;
right: string;
```

Beitragsleitfaden

Beitragsleitfaden öffnen

Bewertung

Dieses Issue wurde noch nicht bewertet.

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.