callstack / callstack/react-native-paper

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

Abierto
#4,874 0 comentarios 1 reacción 0 asignados Ver en GitHub
bug
Lenguaje dominante
TypeScript
Estrellas
14.5k
Forks
2.2k
Merge medio
5 d 23 h
PR fusionados (30 d)
12

Descripción

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

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.