Image primitive doesn't exact same behaviour as react native

[James Campbell]

Since the implementation of this seems to be a div with a background image, some layout functionality behaves differently due to the CSS spec.

If this was implemented instead as a actual img tag, the behave should match more closely the layout behaviour experienced by images on React Native.

[Mathieu Dutour]

are you talking about web vs react-native?

[James Campbell]

@mathieudutour eaxctly, in the code in my storybook the img is wrapped in a div.

In my styles I only specified the width, on react-native it resizes in proportion to the height but on react-web it ends up wrapped in a div and used as background image so it ends up being the width but obviously won't adjust the height as thats not how background images work.

Right now I've specified an explicit height as a work around but it was a surprise :)

[James Campbell]

There are other behaviors that this causes issues with, like being able to make an image be contained within a div as is surrounding parent gets smaller.

Happy to make a PR for this as I think just having it use the img tag would make more sense for me

[macintoshhelper]

This issue is probably best for react-native-web, if it's still a problem. Decoupling components from react-native-web would be a pretty big breaking change for react-primitives and break image compatibility with react-native-web stylesheet support. Probably best to leave React JSX or createElement out of this project too for now.

React Native has quite specific requirements in terms of having image width/height knowledge, which may or may not be applicable to web. (require('img.jpg') will give you { uri, height, width } on react-native, but may not if you're using a normal image loader in Webpack for web).

I am doing this myself (component lib <Image> component uses styled-components styled.img on web and styled.Image on other primitives platforms), but feel this should be left for external libraries.

This should be possible with the injection API in your app initialisation:

App.js

import ReactPrimitives from 'react-primitives';

// TODO: Implement `aspectRatio` styling prop with `source.width` and `source.height`
const Image = ({ source, style, ...props }) => (
  <img style={style} src={source.uri} {...props} />
);

ReactPrimitives.inject({
  Image,
});

const App = () => (
  <DataProvider>
    {...}