Image

Example of use

Image component requires the source prop, here is the example usage. Note that you also need to specify the width and height, this can be done via imageURISource named arguments, or via style prop that is passed to Image component

source from URI

let component = ReasonReact.statelessComponent("MyComponent");

let make = _children => {
  ...component,
  render: _self =>
    <Image
      source=(
        `URI(
          Image.(
            imageURISource(
              ~uri="https://bit.ly/2ya4e2o",
              ~width=Pt(320.),
              ~height=Pt(480.),
              (),
            )
          ),
        )
      )
    />,
};

source from a file path

One thing to remember here is that the path is relative to the compiled code.

let component = ReasonReact.statelessComponent("MyComponent");

let make = _children => {
  ...component,
  render: _self =>
    <Image
      style=Style.(style([width(Pt(320.)), height(Pt(480.))]))
      source=(`Required(Packager.require("./assets/panamera.png")))
    />,
};

Props

onError

onError: Event.error => unit=?

onLayout

onLayout: RNEvent.NativeLayoutEvent.t => unit=?

reference:

RNEvent.rei

module NativeLayoutEvent: {
  type t;
  type layout = {
    x: float,
    y: float,
    width: float,
    height: float
  };
  let layout: t => layout;
};

onLoad

onLoad: unit => unit=?

onLoadEnd

onLoadEnd: unit => unit=?

onLoadStart

onLoadStart: unit => unit=?

resizeMode

resizeMode: [<
  | `center
  | `contain
  | `cover
  | `repeat
  | `stretch
]=?

source

source: imageSource

reference:

type imageSource =
  | `URI(_imageURISource)
  | `Required(Packager.required)
  | `Multiple(list(_imageURISource));

let _imageURISource:
  (
    ~uri: string,
    ~bundle: string=?,
    ~method: string=?,
    ~headers: Js.t('a)=?,
    ~body: string=?,
    ~cache: [
      | `default
      | `reload
      | `forceCache
      | `onlyIfCached
    ]=?,
    ~scale: float=?,
    ~width: option(float)=?,
    ~height: option(float)=?,
    unit
  ) =>
  _imageURISource;

type pt_only =
  | Pt(float);
type imageURISource;
let imageURISource:
  (
    ~uri: string,
    ~bundle: string=?,
    ~method: string=?,
    ~headers: Js.t('a)=?,
    ~body: string=?,
    ~cache: [ | `default | `reload | `forceCache | `onlyIfCached]=?,
    ~scale: float=?,
    ~width: pt_only=?,
    ~height: pt_only=?,
    unit
  ) =>
  _imageURISource;

style

style: Style.t=?

testID

testID: string=?

resizeMethod

resizeMethod: [<
  | `auto
  | `resize
  | `scale
]=?

accessibilityLabel

accessibilityLabel: string=?

accessible

accessible: bool=?

blurRadius

blurRadius: float=?

capInsets

capInsets: Types.insets=?

reference:

Types.rei

type insets = {
  .
  "left": int,
  "right": int,
  "top": int,
  "bottom": int,
};

defaultSource

defaultSource: defaultSource=?

reference:

type defaultSource =
  | `URI(_defaultURISource)
  | `Required(Packager.required);

let _defaultURISource:
    (
      ~uri: string,
      ~scale: float=?,
      ~width: option(float)=?,
      ~height: option(float)=?,
      unit
    ) =>
    _defaultURISource;

let defaultURISource:
  (
    ~uri: string,
    ~scale: float=?,
    ~width: pt_only=?,
    ~height: pt_only=?,
    unit
  ) =>
  _defaultURISource;

type pt_only =
  | Pt(float);

onPartialLoad

onPartialLoad: unit => unit=?

onProgress

onProgress: Event.progress => unit=?