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=?