Display Local and Remote Images in React Native
Images in React Native can be displayed with the built in Image component, which is similar the the img tag on the web. We’ll use Image to show both local images (included in the source of the app), and remote images (fetched from a web address).
hello chris. thank u for lesson. I'm use package.json file but if i use ts rn project i have sytnax error (not found package) but it's working package.json param. I'dont like syntax error , how do you think you can solve it ?
Best regards.
Veli - I haven't used typescript on a react native project, so I'm not sure, sorry. Here are the docs though: if you follow these, are you able to get it running? https://facebook.github.io/react-native/blog/2018/05/07/using-typescript-with-react-native
@Veli - if you are getting a "Cannot find module 'images/pizza.png'" on your typescript project, you need to do two things.
First - Under src folder, create a file named "declaration.d.ts" (or index.d.ts), with the following line of code declare module '*.png'
Second - Add a new path mapping in your tsconfig file for the images folder. So your tsconfig.json file should look something like the following:
{
"compilerOptions": {
"allowJs": true,
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"isolatedModules": true,
"jsx": "react",
"lib": ["es6"],
"moduleResolution": "node",
"noEmit": true,
"strict": true,
"target": "esnext",
"baseUrl": "./",
"paths": {
"components/*": ["src/components/*"],
"styles/*": ["src/styles/*"],
"images/*": ["src/images/*"]
}
},
"exclude": ["node_modules", "babel.config.js", "metro.config.js", "jest.config.js"]
}
notice the "images/": ["src/images/"] path mapping under paths property.
Hope this helps!