Module Image-BsReactNative

Example of use

Image component https://facebook.github.io/react-native/docs/image 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=?

Event

onLayout

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

Reference RNEvent.NativeLayoutEvent

onLoad

onLoad: unit => unit=?

onLoadEnd

onLoadEnd: unit => unit=?

onLoadStart

onLoadStart: unit => unit=?

resizeMode

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

source

source: imageSource

reference:

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: Style.pt_only=?,
    ~height: Style.pt_only=?,
    unit
  ) =>
  _imageURISource;

style

style: Style.t=?

testID

testID: string=?

resizeMethod

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

accessibilityLabel

accessibilityLabel: string=?

blurRadius

blurRadius: float=?

capInsets

capInsets: Types.insets=?

reference:

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: Style.pt_only=?,
    ~height: Style.pt_only=?,
    unit
  ) =>
  _defaultURISource;

type pt_only =
  | Pt(float);

onPartialLoad

onPartialLoad: unit => unit=?

onProgress

onProgress: Event.progress => unit=?

Event

API reference