Module Modal-BsReactNative

Example of use

Modal component https://facebook.github.io/react-native/docs/modal simply displays content over an enclosing view.

default

Wrap some content in <Modal></Modal> and you are good to go

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

let make = _children => {
  ...component,
  render: _self =>
    <Modal>
      <View
        style=Style.(
                style([
                  flex(1.),
                  justifyContent(Center),
                  alignItems(Center),
                  backgroundColor(String("tomato")),
                ])
              )>
        <Text> (ReasonReact.string("hey ho")) </Text>
      </View>
    </Modal>,
};

Props

animationType

animationType: [
  | `fade
  | `none
  | `slide
]=?

And this is how you apply one of those types:

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

let make = _children => {
  ...component,
  render: _self =>
    <Modal animationType=`slide>
      <View
        style=Style.(
                style([
                  flex(1.),
                  justifyContent(Center),
                  alignItems(Center),
                  backgroundColor(String("tomato")),
                ])
              )>
        <Text> (ReasonReact.string("hey ho")) </Text>
      </View>
    </Modal>,
};

onShow

onShow: unit => unit=?

Example:

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

let make = _children => {
  ...component,
  render: _self =>
    <Modal onShow=(() => Js.log("Just displayed the modal..."))>
      <View
        style=Style.(
                style([
                  flex(1.),
                  justifyContent(Center),
                  alignItems(Center),
                  backgroundColor(String("tomato")),
                ])
              )>
        <Text> (ReasonReact.string("hey ho")) </Text>
      </View>
    </Modal>,
};

transparent

transparent: bool=?

visible

visible: bool=?

hardwareAccelerated

hardwareAccelerated: bool=?

onRequestClose

onRequestClose: unit => unit=?

onOrientationChange

onOrientationChange: unit => unit=?

supportedOrientations

supportedOrientations: array(
  [
    | `landscape
    | `landscapeLeft
    | `landscapeRight
    | `portrait
    | `portraitUpsideDown
  ],
)=?

Example:

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

let make = _children => {
  ...component,
  render: _self =>
    <Modal supportedOrientations=[|`landscape, `portrait|]>
      <View
        style=Style.(
                style([
                  flex(1.),
                  justifyContent(Center),
                  alignItems(Center),
                  backgroundColor(String("tomato")),
                ])
              )>
        <Text> (ReasonReact.string("hey ho")) </Text>
      </View>
    </Modal>,
};