Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React Native TypeScript Images & Static Assets

I was following along in the tutorial that Microsoft put out on how to convert your ReactNative project to TypeScript.

Everything worked great until I reached the point where I needed to include images in my project. Obviously tsc doesn't pack up images into the outdir, so my question is how are people currently using images or other static assets when using ReactNative with TypeScript?

like image 667
Justin Waite Avatar asked Mar 13 '18 04:03

Justin Waite


People also ask

How do I display images in React Native?

Adding Image Let us create a new folder img inside the src folder. We will add our image (myImage. png) inside this folder. We will show images on the home screen.

How do I store images in TypeScript?

To add the type for Image with TypeScript, we should use the HTMLImageElement for Image instances. const image: HTMLImageElement = new Image(); to set image to the HTMLImageElement . Image files selected from an input should have the File type and URL strings for images should have the string type.

How do you insert an image in TypeScript?

To allow image import with TypeScript, we can use declare to declare the type for image files. to declare the type for modules with the . png extension.

How do I display an image from URL in React Native?

So here is the solution to insert an image from an external URL in your application: //MyComponent. js import React from 'react'; import { Image } from 'react-native'; const imageUrl = "https://images.unsplash.com/photo-1526045612212-70caf35c14df"; export class MyComponent extends React.


2 Answers

I'am not sure if this is the best approach,the way I solved it is,

Create a file in the root folder containing images(Should be read by typescript) or any other folder as per your folder structure. Name it "your-name-here.d.ts" (d.ts should be the extension.Its used by typescript engine)

 declare module '*.jpg' {
  import { ImageSourcePropType } from 'react-native';
  const value: ImageSourcePropType;
  export default value;
}

ImageSourcePropType is the type expected by the source argument in Image

Now where ever an image is used can be used as

import SampleIcon from '../images/sample-image.jpg';

<Image src={SampleIcon} style={{ width: 100, height: 100 }} />
like image 84
v3n0msnake Avatar answered Oct 12 '22 15:10

v3n0msnake


Option 1 - Move images folder to root of project:

The way I ended up solving the problem was to move the images up to the root dir of the project, rather than living within the src directory.

Create an images folder in the project root

images/
  - sample-image.jpg
src/
  - App.tsx
output/
  - App.js

Reference the image using relative path

const image = require('../images/sample-image.jpg');
...
<Image src={image} style={{ width: 100, height: 100 }} />

Since the shape of the output should match the shape of the source directory, referencing a top-level image directory works just fine.

Option 2 - Use copyfiles npm package:

This option allows you to keep images inline, but requires an extra step when rebuilding your project.

Install copyfiles

npm i -D copyfiles

Add the following to package.json scripts

...
"start": "npm run build && node node_modules/react-native/local-cli/cli.js start",
"build": "npx tsc && npm run add-assets",
"add-assets": "copyfiles -u 1 'src/**/!(*.js|*.jsx|*.map|*.ts|*.tsx)' lib/",
...

Now execute npm run build or npm start and our nice new package copyfiles will copy over any non-source file to the out directory.

NOTE: You may need to update the glob as needed to ignore files that you do not want copied over to the outdir.

like image 30
Justin Waite Avatar answered Oct 12 '22 17:10

Justin Waite