React Native tag Image with Typescript.

I have the following component written in Typescript:

const Welcome = (p: any) => 
  <View>
    <Image source={require('../assets/welcome-background.png')} />
  </View>

const styles = StyleSheet.create({
  container: {
    flex: 1,
    width: null,
    height: null
  }
})

which compiles to this:

const Welcome = (p) => React.createElement(View, null, React.createElement(Image, {source: require('../assets/welcome-background.png')}));
const styles = StyleSheet.create({
    container: {
        flex: 1,
        width: null,
        height: null
    }
});

Thus is throwing me this error:

Is there a flag in tsconfig.json or an alternative way to load the images in the source tag? (the image is in where it says to be)

I believe this is related to React Native, not a TypeScript one. StackOverflow is probably a better venue for questions like this.

For what it's worth, according to this answer on SO, you can prefix your path with image! to load it this way.

nschurmann

nschurmann, Daniel Rosenwasser (@DanielRosenwasser), this is definitely the problem of typescript. You just need to install

npm install @types/node

This question is: Why do you, Daniel Rosenwasser (@DanielRosenwasser), close an issue, without providing a reasonable answer???

Sorry, I'll defer to your answer if it works. It was (and sort of is) kind of a pain from our end to get a full React Native setup together to test. If others still run into the problem, we'll take a look.

nschurmann

Hi nschurmann and Nick Malezh (@sintylapse)

Facing the same issue. I installed @types/node but the situation did not change - still unable to resolve. Any idea?

Daniel Rosenwasser (@DanielRosenwasser)

Daniel Rosenwasser (@DanielRosenwasser) - maybe you’d have an idea?

I also have a problem with react-native, typescript and including images. As far as I see it, the problem is that typescript does not copy resources into the build folder. But I have no solution yet.

any update?

Here is a node module that helps RN work with Typescript, this solved the issue for me. https://github.com/ds300/react-native-typescript-transformer
This solution was suggested by the team at artsy

Adam (@adamconservis)

Adam (@adamconservis) I'm still having an issue copying over static resources to /artifacts even while using react-native-typescript-transformer — was there any additional config you may have done to enable this? I don't see static resources mentioned in the docs. Thanks!

Update: I somehow overlooked the section on absolute paths. I ended up relocating my static assets to <rootDir>/static/, adding "baseUrl": "." to tsconfig.json, and adding a new package.json file in there whose contents are simply {"name":"static"} — I can now import/require static assets in my TS modules like so:

import Config from 'static/json/config.json'

For me the solution was to move the images folder out of the src folder, placing it at the same level.

I'm ussing "copyfiles" package to copy assets folder into transpiled code:

package.json

"scripts": {
    ... etc
    "build": "npm run tsc && npm run add-assets",
    "add-assets": "copyfiles -u 1 src/assets/**/* out-dir/"
    ... etc
  },

Error of "module not found" gone, but image is not shown.

EDIT: i was ussing import * as image from 'path'; ussing require('path') prints image as desired.

Pete Petrash (@petekp)

Pete Petrash (@petekp) when I do this, it works fine but tsc complains at me that it cant find module assets. I named my package.json { "name": "assets"}. Any idea on a workaround for that?

Iksela (@AleskiWeb)

Iksela (@AleskiWeb) Have you tried changing the baseUrl in tsconfig.json? Mine is "baseUrl": ".". If that doesn't work, then I'm not sure, but it is likely related to your tsconfig configuration.

I have the same issue, I'll try (right now) this https://github.com/expo/expo-asset-utils

UPDATE: No way with expo-asset-utils.

UPDATE 2: "add-assets": "copyfiles -u 1 src/assets/**/* out-dir/" from eassymo is working for me! xD

I created an answer on SO for this issue outlining two options: https://stackoverflow.com/a/49715468/4216035

Navigation Menu

Repository navigation

React Native tag Image with Typescript. #9559

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

React Native tag Image with Typescript. #9559

Description

Activity

DanielRosenwasser commented on Jul 7, 2016

sintylapse commented on May 19, 2017

DanielRosenwasser commented on May 19, 2017

oferRounds commented on Sep 14, 2017

oferRounds commented on Sep 18, 2017

Klabauterman commented on Dec 4, 2017

eassymo commented on Dec 16, 2017

adamconservis commented on Dec 18, 2017

petekp commented on Jan 24, 2018

oferRounds commented on Mar 10, 2018

eassymo commented on Mar 22, 2018

AleskiWeb commented on Mar 28, 2018

petekp commented on Mar 28, 2018

MichelDiz commented on Apr 5, 2018

justinwaite commented on Apr 8, 2018

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions