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
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
const theme = {
...DefaultTheme,
colors: {
...DefaultTheme.colors,
onSurface: 'black',
},
};
export default function Main() {
return (
<PaperProvider theme={theme}>
<App />
</PaperProvider>
);
src/components/index.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:
- Add
export { TextInput } from 'react-native-paper'; https://github.com/callstack/react-native-paper/blob/main/src/babel/__fixtures__/rewrite-imports/code.js
- Run tests
- 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 |
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
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
onSurfacewhich is used in TextInput.themeProvider.tssrc/components/index.tsIn the babel tests of this repo (shows the babel issue):
I also checked the babel implementation. If you:
export { TextInput } from 'react-native-paper';https://github.com/callstack/react-native-paper/blob/main/src/babel/__fixtures__/rewrite-imports/code.js+ 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 behaviorPreview
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