callstack / callstack/react-native-paper
babel plugin does not handle re-exports, causes incorrect theming
- Dominant language
- TypeScript
- Stars
- 14.5k
- Forks
- 2.2k
- Avg merge
- 5d 23h
- Merged PRs (30d)
- 12
Description
### 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:
with the explicit import & then export:
### 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
Contributor guide
Research direction
Start with src/babel/__fixtures__/rewrite-imports/code.js and the associated Babel tests, adding the reported re-export case to understand the current generated output. Run the Babel test suite and confirm that the re-export path is rewritten as expected, then verify the reported theming reproduction with the Provider.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- babel, react-native, typescript
- Domain
- mobile, tooling
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100