callstack / callstack/react-native-paper

babel plugin does not handle re-exports, causes incorrect theming

Đang mở
#4,874 0 bình luận 1 reaction 0 người được giao Xem trên GitHub
bug
Ngôn ngữ chính
TypeScript
Star
14.5k
Fork
2.2k
Merge trung bình
5 ngày 23 giờ
Pull request đã merge (30 ngày)
12

Mô tả

### Current behaviour
When re-exporting components from react-native paper, e.g. `export { TextInput } from 'react-native-paper`, the components are not styled using the theme set in the Provider.

Investigating I found that it seemed related to the babel plugin which does not rewrite these imports. I can't explain though why these paths not being re-written is actually causing issues in applying the theme 🤔

### Expected behaviour
```ts
export { TextInput } from 'react-native-paper
```

Should use the theme set in the app's Provider.

And the babel plugin should accurately rewrite the import paths

### How to reproduce?

**With an app (shows the theme issue):**

Latest 'react-native-paper', an app theme which overrides a color for example `onSurface` which is used in TextInput.

`themeProvider.ts`
```ts
const theme = {
...DefaultTheme,
colors: {
...DefaultTheme.colors,
onSurface: 'black',
},
};

export default function Main() {
return (



);
```

`src/components/index.ts`
```ts
export { TextInput } from 'react-native-paper'
```

**In the babel tests of this repo (shows the babel issue):**
I also checked the babel implementation. If you:
1. Add `export { TextInput } from 'react-native-paper';` https://github.com/callstack/react-native-paper/blob/main/src/babel/__fixtures__/rewrite-imports/code.js
2. Run tests
3. You see that the test generates an output with `+ export { TextInput } from 'react-native-paper';`, which is not rewritten to the full path. My assumption is that this is what is causing the app them behavior

### Preview

with the re-export:
Image

with the explicit import & then export:
Image

### What have you tried so far?
Adding an explicit import, followed by explicit export

### Your Environment

| software | version
| --------------------- | -------
| ios | x
| android | x
| react-native | x.x.x
| react-native-paper | 5.14.5
| node | x.x.x
| npm or yarn | x.x.x
| expo sdk | x.x.x

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.