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

[RN 0.88] Replace deep RN imports with public API

Đang mở
#743 2 bình luận 0 reaction 0 người được giao Xem trên GitHub
Ngôn ngữ chính
TypeScript
Star
2.8k
Fork
258
Merge trung bình
3 ngày 1 giờ
Pull request đã merge (30 ngày)
2

Mô tả

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;
```

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.