DEV Community

Alain
Alain

Posted on

Zoom in Reason

ImageWithZoom Module

Pass in an image size which is passed to the uri variable. Whatever the image size it will be scaled to the width and height defined in the styles##image property.
Each time this component is called, a diffent image from https://picsum.photos/is retrieved.

let styles =
  Style.(
    StyleSheet.create({
      "image": style(~width=400.->dp, ~height=400.->dp, ()),
    })
  );

[@react.component]
let make = (~size=?) => {
  <Image
    style=styles##image
    source={Image.Source.fromUriSource(
      Image.uriSource(~uri={j|https://picsum.photos/$size/$size|j}, ()),
    )}
  />;
};

Alt Text

Resources

picsum.photos

original repo via @browniefed

See it on snack.io https://expo.io/@idkjs/zoomreason.
See the source.

Discussion (0)