Module `TextInput-BsReactNative`

type editingEvent = Js.t({. nativeEvent: Js.t({. text: string, eventCount: int, target: int, }), });

A React component for displaying text. You can read more on Text component usage in official docs: https://facebook.github.io/react-native/docs/text

Props

View props

autoCapitalize

autoCapitalize: [<
  | `characters
  | `none
  | `sentences
  | `words
]=?

autoComplete

autoComplete: [<
  | `off
  | `username
  | `password
  | `email
  | `name
  | `tel
  | `streetAddress
  | `postalCode
  | `ccNumber
  | `ccCsc
  | `ccExp
  | `ccExpMonth
  | `ccExpYear
]=?

autoCorrect

~autoCorrect: bool=?

autoFocus

~autoFocus: bool=?

blurOnSubmit

~blurOnSubmit: bool=?

caretHidden

~caretHidden: bool=?

defaultValue

~defaultValue: string=?

editable

~editable: bool=?

keyboardType

~keyboardType: [
  | `asciiCapable
  | `decimalPad
  | `default
  | `emailAddress
  | `namePhonePad
  | `numberPad
  | `numbersAndPunctuation
  | `numeric
  | `phonePad
  | `twitter
  | `url
  | `webSearch
]
  =?

maxLength

~maxLength: int=?

multiline

~multiline: bool=?

onBlur

~onBlur: unit => unit=?

onChangeText

~onChangeText: string => unit=?

onChange

~onChange: editingEvent => unit=?

onEndEditing

~onEndEditing: editingEvent => unit=?

onSubmitEditing

~onSubmitEditing: editingEvent => unit=?

onContentSizeChange

~onContentSizeChange: {
  .
  "nativeEvent": {
    .
    "contentSize": {
      .
      "width": float,
      "height": float
    }
  }
} => unit=?

onFocus

~onFocus: unit => unit=?

onScroll

~onScroll: {
  .
  "nativeEvent": {
    .
    "contentOffset": {
      .
      "x": float,
      "y": float
    }
  }
} => unit=?

onSelectionChange

~onSelectionChange: {
  .
  "nativeEvent": {
    .
    "selection": {
      .
      "start": int,
      "_end": int
    }
  }
} => unit=?

placeholder

~placeholder: string=?

placeholderTextColor

~placeholderTextColor: string=?

returnKeyType

~returnKeyType: [
  | `default
  | `done_
  | `emergencyCall
  | `go
  | `google
  | `join
  | `next
  | `none
  | `previous
  | `route
  | `search
  | `send
  | `yahoo
]=?

secureTextEntry

~secureTextEntry

selectTextOnFocus

~selectTextOnFocus: bool=?

selection

~selection: {
  .
  "start": int,
  "_end": int
}=?

selectionColor

~selectionColor: string=?

value

~value: string=?

disableFullscreenUI

~disableFullscreenUI: bool=?

inlineImageLeft

~inlineImageLeft: string=?

inlineImagePadding

~inlineImagePadding: int=?

numberOfLines

~numberOfLines: int=?

returnKeyLabel

~returnKeyLabel: string=?

textBreakStrategy

~textBreakStrategy: [
  | `balanced
  | `highQuality
  | `simple
]=?

underlineColorAndroid

~underlineColorAndroid: string=?

clearButtonMode

~clearButtonMode: [
  | `always
  | `never
  | `unlessEditing
  | `whileEditing
]=?

clearTextOnFocus

~clearTextOnFocus: bool=?

dataDetectorTypes

~dataDetectorTypes: array([
  | `all
  | `calendarEvent
  | `link
  | `none
  | `phoneNumber
])=?

enablesReturnKeyAutomatically

~enablesReturnKeyAutomatically: bool=?

keyboardAppearance

~keyboardAppearance: [
  | `dark
  | `default
  | `light
]=?

onKeyPress

~onKeyPress: {
  .
  "nativeEvent": {
    .
    "key": string
  }
} => unit=?

selectionState

~selectionState: 'documentSelectionState=?

spellCheck

~spellCheck: bool=?

inputAccessoryViewID

~inputAccessoryViewID: string=?

Methods

isFocused()

Returns true if the input is currently focused; false otherwise.

let make: ?⁠accessibilityLabel:ReasonReact.reactElement => ?⁠accessible:bool => ?⁠hitSlop:Js.t({. left: int, right: int, top: int, bottom: int, }) => ?⁠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 => ?⁠autoCapitalize:[< `characters | `none | `sentences | `words ] => ?⁠autoComplete:[< `off | `username | `password | `email | `name | `tel | `streetAddress | `postalCode | `ccNumber | `ccCsc | `ccExp | `ccExpMonth | `ccExpYear ] => ?⁠autoCorrect:bool => ?⁠autoFocus:bool => ?⁠blurOnSubmit:bool => ?⁠caretHidden:bool => ?⁠defaultValue:string => ?⁠editable:bool => ?⁠keyboardType:[ `asciiCapable | `decimalPad | `default | `emailAddress | `namePhonePad | `numberPad | `numbersAndPunctuation | `numeric | `phonePad | `twitter | `url | `webSearch ] => ?⁠maxLength:int => ?⁠multiline:bool => ?⁠onBlur:(unit => unit) => ?⁠onChangeText:(string => unit) => ?⁠onChange:(editingEvent => unit) => ?⁠onEndEditing:(editingEvent => unit) => ?⁠onSubmitEditing:(editingEvent => unit) => ?⁠onContentSizeChange:(Js.t({. nativeEvent: Js.t({. contentSize: Js.t({. width: float, height: float, }), }), }) => unit) => ?⁠onFocus:(unit => unit) => ?⁠onScroll:(Js.t({. nativeEvent: Js.t({. contentOffset: Js.t({. x: float, y: float, }), }), }) => unit) => ?⁠onSelectionChange:(Js.t({. nativeEvent: Js.t({. selection: Js.t({. start: int, _end: int, }), }), }) => unit) => ?⁠placeholder:string => ?⁠placeholderTextColor:string => ?⁠returnKeyType:[ `default | `done_ | `emergencyCall | `go | `google | `join | `next | `none | `previous | `route | `search | `send | `yahoo ] => ?⁠secureTextEntry:bool => ?⁠selectTextOnFocus:bool => ?⁠selection:Js.t({. start: int, _end: int, }) => ?⁠selectionColor:string => ?⁠value:string => ?⁠disableFullscreenUI:bool => ?⁠inlineImageLeft:string => ?⁠inlineImagePadding:int => ?⁠numberOfLines:int => ?⁠returnKeyLabel:string => ?⁠textBreakStrategy:[ `balanced | `highQuality | `simple ] => ?⁠underlineColorAndroid:string => ?⁠clearButtonMode:[ `always | `never | `unlessEditing | `whileEditing ] => ?⁠clearTextOnFocus:bool => ?⁠dataDetectorTypes:array([ `all | `calendarEvent | `link | `none | `phoneNumber ]) => ?⁠enablesReturnKeyAutomatically:bool => ?⁠keyboardAppearance:[ `dark | `default | `light ] => ?⁠onKeyPress:(Js.t({. nativeEvent: Js.t({. key: string, }), }) => unit) => ?⁠selectionState:'documentSelectionState => ?⁠spellCheck:bool => ?⁠inputAccessoryViewID:string => array(ReasonReact.reactElement) => ReasonReact.component(ReasonReact.stateless, ReasonReact.noRetainedProps, unit);
let isFocused: ReasonReact.reactRef => bool;: clear()
Removes all text from the TextInput.

let clear: ReasonReact.reactRef => unit;: focus()
focus TextInput programmatically

let focus: ReasonReact.reactRef => unit;: blur()
blur TextInput programmatically

let blur: ReasonReact.reactRef => unit;