callstack / callstack/react-native-paper

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

未关闭
#4,874 0 条评论 1 个 reaction 已指派 0 人 在 GitHub 查看
bug
主要语言
TypeScript
星标
14.5k
派生
2.2k
平均合并
5 天 23 小时
30 天内合并 PR
12

描述

### 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

贡献指南

打开贡献指南

调研方向

从 src/babel/__fixtures__/rewrite-imports/code.js 和相关的 Babel 测试开始,添加报告中的重新导出案例,以了解当前生成的输出。运行 Babel 测试套件并确认重新导出路径已按预期重写,然后使用 Provider 验证报告中的 theming 复现。

由索引模型根据 Issue 内容生成。

评估

技术栈
babel, react-native, typescript
领域
mobile, tooling
Issue 类型
缺陷
难度
3/5
预计耗时
1-2 天
活跃度
停滞
描述清晰度
基本清楚
新手友好度
45/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。