I'm doing a mobile application using React Native (0.61.2) and TypeScript (3.6.4). I'm following advices from this article to have a R namespace, just like how Android does for assets with the generated R class.
I'm trying to use package.json
to avoid relative path like this:
import R from '../../../../res/R';
to this:
import R from 'res/R';
My structure:
res
package.json
strings.tsx
colors.tsx
palette.tsx
fonts.tsx
images.tsx
R.tsx
images
logo.png
screens
EmailPassword.tsx
R.tsx:
import strings from './strings';
import images from './images';
import colors from './colors';
import palette from './palette';
const R = {
strings,
images,
colors,
palette
};
export default R;
Trying to convert my res folder to a module, res/package.json
:
{
"name": "res",
"version": "0.0.1"
}
When I try to access the R namespace like this:
import R from 'res/R';
I receives the error:
TS2307: Cannot find module 'res/R'
tsconfig.json:
{
"compilerOptions": {
"allowJs": true,
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"isolatedModules": true,
"jsx": "react-native",
"lib": [
"es6"
],
"moduleResolution": "node",
"noEmit": true,
"strict": true,
"target": "esnext"
},
"exclude": [
"node_modules",
"babel.config.js",
"metro.config.js",
"jest.config.js"
]
}
I have tried to play a little bit with the settings in tsconfig.json
with no luck. Maybe my error is elsewhere?
My goal is to access all my shared resources using the R namespace to avoid relative paths, just like Android does with the R class.
For example: R.colors.something, R.strings.something, R.images.logo, etc..