Module `Picker-BsReactNative`

let make: ?⁠onValueChange:('value => unit) => ?⁠selectedValue:'value => ?⁠enabled:bool => ?⁠mode:[ `dialog | `dropdown ] => ?⁠prompt:string => ?⁠itemStyle:BsReactNative.Style.t => ?⁠accessibilityLabel:ReasonReact.reactElement => ?⁠accessible:bool => ?⁠hitSlop:BsReactNative.Types.insets => ?⁠onAccessibilityTap:(unit => unit) => ?⁠onLayout:(BsReactNative.RNEvent.NativeLayoutEvent.t => unit) => ?⁠onMagicTap:(unit => unit) => ?⁠responderHandlers:BsReactNative.Types.touchResponderHandlers => ?⁠pointerEvents:BsReactNative.Types.pointerEvents => ?⁠removeClippedSubviews:bool => ?⁠style:BsReactNative.Style.t => ?⁠testID:string => ?⁠accessibilityComponentType:BsReactNative.Types.accessibilityComponentType => ?⁠accessibilityLiveRegion:BsReactNative.Types.accessibilityLiveRegion => ?⁠collapsable:bool => ?⁠importantForAccessibility:BsReactNative.Types.importantForAccessibility => ?⁠needsOffscreenAlphaCompositing:bool => ?⁠renderToHardwareTextureAndroid:bool => ?⁠accessibilityTraits:list(BsReactNative.Types.accessibilityTrait) => ?⁠accessibilityRole:BsReactNative.Types.accessibilityRole => ?⁠accessibilityStates:list(BsReactNative.Types.accessibilityState) => ?⁠accessibilityHint:string => ?⁠accessibilityIgnoresInvertColors:bool => ?⁠accessibilityViewIsModal:bool => ?⁠shouldRasterizeIOS:bool => array(ReasonReact.reactElement) => ReasonReact.component(ReasonReact.stateless, ReasonReact.noRetainedProps, unit);

Example of use

In order to render a Picker component https://facebook.github.io/react-native/docs/picker you will need to pass one or many Picker.Item components as children.

And Picker.Item has a required label prop

default

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

let make = _children => {
  ...component,
  render: _self =>
    <View>
      <Picker>
        <Picker.Item label="ReasonML" value="reason" />
        <Picker.Item label="Ocaml" value="ocaml" />
        <Picker.Item label="JavaScript" value="js" />
      </Picker>
    </View>,
};

selectedValue and onValueChange

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

let make = _children => {
  ...component,
  render: _self =>
    <View>
      <Picker selectedValue="ocaml" onValueChange=(value => Js.log(value))>
        <Picker.Item label="ReasonML" value="reason" />
        <Picker.Item label="Ocaml" value="ocaml" />
        <Picker.Item label="JavaScript" value="js" />
      </Picker>
    </View>,
};

Props

onValueChange

onValueChange: 'value => unit=?

selectedValue

selectedValue: 'value=?

enabled

enabled: bool=?

mode

On Android only, specifies how to display the selection items when the user taps on the picker:

`dialog - shows a modal dialog. This is the default.
`dropdown - shows a dropdown anchored to the picker view
```
mode: [
  | `dialog
  | `dropdown
]=?
```

prompt

prompt: string=?

itemStyle

itemStyle: Style.t=?

accessibilityLabel

accessibilityLabel: ReasonReact.reactElement=?

accessible

accessible: bool=?

hitSlop

hitSlop: Types.insets=?

reference:

Types.rei

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

onAccessibilityTap

onAccessibilityTap: unit => unit=?

onLayout

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

Reference RNEvent.NativeLayoutEvent

onMagicTap

onMagicTap: unit => unit=?

responderHandlers

responderHandlers: Types.touchResponderHandlers=?

reference:

Types.rei

type touchResponderHandlers = {
  onMoveShouldSetResponder: option(RNEvent.NativeEvent.t => bool),
  onMoveShouldSetResponderCapture: option(RNEvent.NativeEvent.t => bool),
  onResponderGrant: option(RNEvent.NativeEvent.t => unit),
  onResponderMove: option(RNEvent.NativeEvent.t => unit),
  onResponderReject: option(RNEvent.NativeEvent.t => unit),
  onResponderRelease: option(RNEvent.NativeEvent.t => unit),
  onResponderTerminate: option(RNEvent.NativeEvent.t => unit),
  onResponderTerminationRequest: option(RNEvent.NativeEvent.t => unit),
  onStartShouldSetResponder: option(RNEvent.NativeEvent.t => bool),
  onStartShouldSetResponderCapture: option(RNEvent.NativeEvent.t => bool)
};

RNEvent.rei

module NativeEvent: {
  type t;
  let changedTouches: t => array(Js.t({..}));
  let identifier: t => int;
  let locationX: t => float;
  let locationY: t => float;
  let pageX: t => float;
  let pageY: t => float;
  let target: t => Js.t({..});
  let touches: t => array(Js.t({..}));
  let timestamp: t => int;
  let data: t => string;
};

pointerEvents

pointerEvents: [
  | `auto
  | `none
  | `boxNone
  | `boxOnly
]=?

removeClippedSubviews

removeClippedSubviews: bool=?

style

style: Style.t=?

testID

testID: string=?

accessibilityComponentType

accessibilityComponentType: [
  | `none
  | `button
  | `radiobutton_checked
  | `radiobutton_unchecked
]=?

accessibilityLiveRegion

accessibilityLiveRegion: [
  | `none
  | `polite
  | `assertive
]=?

collapsable

collapsable: bool=?

importantForAccessibility

importantForAccessibility: [
  | `auto
  | `yes
  | `no
  | `noHideDescendants
]=?

needsOffscreenAlphaCompositing

needsOffscreenAlphaCompositing: bool=?

renderToHardwareTextureAndroid

renderToHardwareTextureAndroid: bool=?

accessibilityTraits

accessibilityTraits: list(
  [
    | `none
    | `button
    | `link
    | `header
    | `search
    | `image
    | `selected
    | `plays
    | `key
    | `text
    | `summary
    | `disabled
    | `frequentUpdates
    | `startsMedia
    | `adjustable
    | `allowsDirectInteraction
    | `pageTurn
  ]
)=?

accessibilityViewIsModal

accessibilityViewIsModal: bool=?

shouldRasterizeIOS

shouldRasterizeIOS: bool=?

module Item: { ... };: Picker.Item component is used only inside <Picker></Picker> component