I'm building a react component library (using typescript and styled-components) and I want to reuse as much as possible code between the two targets (web and native).
I have a folder called styled
, and inside that folder I have two index files: index.ts
and index.native.ts
.
Inside the index.ts
I have: export { default as styled } from 'styled-components';
while in the index.native.ts
I have export { default as styled } from 'styled-components/native';
I know react-native uses index.native.ts
instead index.ts
during the build process when it is available but I really need to make the IDE (vscode) to understand that, I mean, when I'm building a Button.native.ts the statement: import { styled } from '../styled'
should import from the .native
barrel and the ctrl + click
should let us to the .native
file.
I don't know if there is a configuration to change the default import file used as barrel, I already tried to search in the typescript documentation for some react-native preset but I didn't find anything.