AndroidTextInputNativeComponent.js 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563
  1. /**
  2. * Copyright (c) Facebook, Inc. and its affiliates.
  3. *
  4. * This source code is licensed under the MIT license found in the
  5. * LICENSE file in the root directory of this source tree.
  6. *
  7. * @flow strict-local
  8. * @format
  9. */
  10. 'use strict';
  11. import type {ViewProps} from '../View/ViewPropTypes';
  12. import type {
  13. BubblingEventHandler,
  14. DirectEventHandler,
  15. Double,
  16. Float,
  17. Int32,
  18. WithDefault,
  19. } from '../../Types/CodegenTypes';
  20. import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
  21. import type {TextStyleProp, ViewStyleProp} from '../../StyleSheet/StyleSheet';
  22. import type {ColorValue} from '../../StyleSheet/StyleSheetTypes';
  23. import requireNativeComponent from '../../ReactNative/requireNativeComponent';
  24. import codegenNativeCommands from '../../Utilities/codegenNativeCommands';
  25. import type {TextInputNativeCommands} from './TextInputNativeCommands';
  26. import * as React from 'react';
  27. import AndroidTextInputViewConfig from './AndroidTextInputViewConfig';
  28. const ReactNativeViewConfigRegistry = require('../../Renderer/shims/ReactNativeViewConfigRegistry');
  29. export type KeyboardType =
  30. // Cross Platform
  31. | 'default'
  32. | 'email-address'
  33. | 'numeric'
  34. | 'phone-pad'
  35. | 'number-pad'
  36. | 'decimal-pad'
  37. // iOS-only
  38. | 'ascii-capable'
  39. | 'numbers-and-punctuation'
  40. | 'url'
  41. | 'name-phone-pad'
  42. | 'twitter'
  43. | 'web-search'
  44. // Android-only
  45. | 'visible-password';
  46. export type ReturnKeyType =
  47. // Cross Platform
  48. | 'done'
  49. | 'go'
  50. | 'next'
  51. | 'search'
  52. | 'send'
  53. // Android-only
  54. | 'none'
  55. | 'previous'
  56. // iOS-only
  57. | 'default'
  58. | 'emergency-call'
  59. | 'google'
  60. | 'join'
  61. | 'route'
  62. | 'yahoo';
  63. export type NativeProps = $ReadOnly<{|
  64. // This allows us to inherit everything from ViewProps except for style (see below)
  65. // This must be commented for Fabric codegen to work.
  66. ...$Diff<ViewProps, $ReadOnly<{|style: ?ViewStyleProp|}>>,
  67. /**
  68. * Android props after this
  69. */
  70. /**
  71. * Determines which content to suggest on auto complete, e.g.`username`.
  72. * To disable auto complete, use `off`.
  73. *
  74. * *Android Only*
  75. *
  76. * The following values work on Android only:
  77. *
  78. * - `username`
  79. * - `password`
  80. * - `email`
  81. * - `name`
  82. * - `tel`
  83. * - `street-address`
  84. * - `postal-code`
  85. * - `cc-number`
  86. * - `cc-csc`
  87. * - `cc-exp`
  88. * - `cc-exp-month`
  89. * - `cc-exp-year`
  90. * - `off`
  91. *
  92. * @platform android
  93. */
  94. autoCompleteType?: WithDefault<
  95. | 'cc-csc'
  96. | 'cc-exp'
  97. | 'cc-exp-month'
  98. | 'cc-exp-year'
  99. | 'cc-number'
  100. | 'email'
  101. | 'name'
  102. | 'password'
  103. | 'postal-code'
  104. | 'street-address'
  105. | 'tel'
  106. | 'username'
  107. | 'off',
  108. 'off',
  109. >,
  110. /**
  111. * Sets the return key to the label. Use it instead of `returnKeyType`.
  112. * @platform android
  113. */
  114. returnKeyLabel?: ?string,
  115. /**
  116. * Sets the number of lines for a `TextInput`. Use it with multiline set to
  117. * `true` to be able to fill the lines.
  118. * @platform android
  119. */
  120. numberOfLines?: ?Int32,
  121. /**
  122. * When `false`, if there is a small amount of space available around a text input
  123. * (e.g. landscape orientation on a phone), the OS may choose to have the user edit
  124. * the text inside of a full screen text input mode. When `true`, this feature is
  125. * disabled and users will always edit the text directly inside of the text input.
  126. * Defaults to `false`.
  127. * @platform android
  128. */
  129. disableFullscreenUI?: ?boolean,
  130. /**
  131. * Set text break strategy on Android API Level 23+, possible values are `simple`, `highQuality`, `balanced`
  132. * The default value is `simple`.
  133. * @platform android
  134. */
  135. textBreakStrategy?: WithDefault<
  136. 'simple' | 'highQuality' | 'balanced',
  137. 'simple',
  138. >,
  139. /**
  140. * The color of the `TextInput` underline.
  141. * @platform android
  142. */
  143. underlineColorAndroid?: ?ColorValue,
  144. /**
  145. * If defined, the provided image resource will be rendered on the left.
  146. * The image resource must be inside `/android/app/src/main/res/drawable` and referenced
  147. * like
  148. * ```
  149. * <TextInput
  150. * inlineImageLeft='search_icon'
  151. * />
  152. * ```
  153. * @platform android
  154. */
  155. inlineImageLeft?: ?string,
  156. /**
  157. * Padding between the inline image, if any, and the text input itself.
  158. * @platform android
  159. */
  160. inlineImagePadding?: ?Int32,
  161. importantForAutofill?: string /*?(
  162. | 'auto'
  163. | 'no'
  164. | 'noExcludeDescendants'
  165. | 'yes'
  166. | 'yesExcludeDescendants'
  167. ),*/,
  168. /**
  169. * When `false`, it will prevent the soft keyboard from showing when the field is focused.
  170. * Defaults to `true`.
  171. * @platform android
  172. */
  173. showSoftInputOnFocus?: ?boolean,
  174. /**
  175. * TextInput props after this
  176. */
  177. /**
  178. * Can tell `TextInput` to automatically capitalize certain characters.
  179. *
  180. * - `characters`: all characters.
  181. * - `words`: first letter of each word.
  182. * - `sentences`: first letter of each sentence (*default*).
  183. * - `none`: don't auto capitalize anything.
  184. */
  185. autoCapitalize?: WithDefault<
  186. 'none' | 'sentences' | 'words' | 'characters',
  187. 'none',
  188. >,
  189. /**
  190. * If `false`, disables auto-correct. The default value is `true`.
  191. */
  192. autoCorrect?: ?boolean,
  193. /**
  194. * If `true`, focuses the input on `componentDidMount`.
  195. * The default value is `false`.
  196. */
  197. autoFocus?: ?boolean,
  198. /**
  199. * Specifies whether fonts should scale to respect Text Size accessibility settings. The
  200. * default is `true`.
  201. */
  202. allowFontScaling?: ?boolean,
  203. /**
  204. * Specifies largest possible scale a font can reach when `allowFontScaling` is enabled.
  205. * Possible values:
  206. * `null/undefined` (default): inherit from the parent node or the global default (0)
  207. * `0`: no max, ignore parent/global default
  208. * `>= 1`: sets the maxFontSizeMultiplier of this node to this value
  209. */
  210. maxFontSizeMultiplier?: ?Float,
  211. /**
  212. * If `false`, text is not editable. The default value is `true`.
  213. */
  214. editable?: ?boolean,
  215. /**
  216. * Determines which keyboard to open, e.g.`numeric`.
  217. *
  218. * The following values work across platforms:
  219. *
  220. * - `default`
  221. * - `numeric`
  222. * - `number-pad`
  223. * - `decimal-pad`
  224. * - `email-address`
  225. * - `phone-pad`
  226. *
  227. * *Android Only*
  228. *
  229. * The following values work on Android only:
  230. *
  231. * - `visible-password`
  232. */
  233. keyboardType?: WithDefault<KeyboardType, 'default'>,
  234. /**
  235. * Determines how the return key should look. On Android you can also use
  236. * `returnKeyLabel`.
  237. *
  238. * *Cross platform*
  239. *
  240. * The following values work across platforms:
  241. *
  242. * - `done`
  243. * - `go`
  244. * - `next`
  245. * - `search`
  246. * - `send`
  247. *
  248. * *Android Only*
  249. *
  250. * The following values work on Android only:
  251. *
  252. * - `none`
  253. * - `previous`
  254. */
  255. returnKeyType?: WithDefault<ReturnKeyType, 'done'>,
  256. /**
  257. * Limits the maximum number of characters that can be entered. Use this
  258. * instead of implementing the logic in JS to avoid flicker.
  259. */
  260. maxLength?: ?Int32,
  261. /**
  262. * If `true`, the text input can be multiple lines.
  263. * The default value is `false`.
  264. */
  265. multiline?: ?boolean,
  266. /**
  267. * Callback that is called when the text input is blurred.
  268. * `target` is the reactTag of the element
  269. */
  270. onBlur?: ?BubblingEventHandler<$ReadOnly<{|target: Int32|}>>,
  271. /**
  272. * Callback that is called when the text input is focused.
  273. * `target` is the reactTag of the element
  274. */
  275. onFocus?: ?BubblingEventHandler<$ReadOnly<{|target: Int32|}>>,
  276. /**
  277. * Callback that is called when the text input's text changes.
  278. * `target` is the reactTag of the element
  279. * TODO: differentiate between onChange and onChangeText
  280. */
  281. onChange?: ?BubblingEventHandler<
  282. $ReadOnly<{|target: Int32, eventCount: Int32, text: string|}>,
  283. >,
  284. /**
  285. * Callback that is called when the text input's text changes.
  286. * Changed text is passed as an argument to the callback handler.
  287. * TODO: differentiate between onChange and onChangeText
  288. */
  289. onChangeText?: ?BubblingEventHandler<
  290. $ReadOnly<{|target: Int32, eventCount: Int32, text: string|}>,
  291. >,
  292. /**
  293. * Callback that is called when the text input's content size changes.
  294. * This will be called with
  295. * `{ nativeEvent: { contentSize: { width, height } } }`.
  296. *
  297. * Only called for multiline text inputs.
  298. */
  299. onContentSizeChange?: ?DirectEventHandler<
  300. $ReadOnly<{|
  301. target: Int32,
  302. contentSize: $ReadOnly<{|width: Double, height: Double|}>,
  303. |}>,
  304. >,
  305. onTextInput?: ?BubblingEventHandler<
  306. $ReadOnly<{|
  307. target: Int32,
  308. text: string,
  309. previousText: string,
  310. range: $ReadOnly<{|start: Double, end: Double|}>,
  311. |}>,
  312. >,
  313. /**
  314. * Callback that is called when text input ends.
  315. */
  316. onEndEditing?: ?BubblingEventHandler<
  317. $ReadOnly<{|target: Int32, text: string|}>,
  318. >,
  319. /**
  320. * Callback that is called when the text input selection is changed.
  321. * This will be called with
  322. * `{ nativeEvent: { selection: { start, end } } }`.
  323. */
  324. onSelectionChange?: ?DirectEventHandler<
  325. $ReadOnly<{|
  326. target: Int32,
  327. selection: $ReadOnly<{|start: Double, end: Double|}>,
  328. |}>,
  329. >,
  330. /**
  331. * Callback that is called when the text input's submit button is pressed.
  332. * Invalid if `multiline={true}` is specified.
  333. */
  334. onSubmitEditing?: ?BubblingEventHandler<
  335. $ReadOnly<{|target: Int32, text: string|}>,
  336. >,
  337. /**
  338. * Callback that is called when a key is pressed.
  339. * This will be called with `{ nativeEvent: { key: keyValue } }`
  340. * where `keyValue` is `'Enter'` or `'Backspace'` for respective keys and
  341. * the typed-in character otherwise including `' '` for space.
  342. * Fires before `onChange` callbacks.
  343. */
  344. onKeyPress?: ?BubblingEventHandler<$ReadOnly<{|target: Int32, key: string|}>>,
  345. /**
  346. * Invoked on content scroll with `{ nativeEvent: { contentOffset: { x, y } } }`.
  347. * May also contain other properties from ScrollEvent but on Android contentSize
  348. * is not provided for performance reasons.
  349. */
  350. onScroll?: ?DirectEventHandler<
  351. $ReadOnly<{|
  352. target: Int32,
  353. responderIgnoreScroll: boolean,
  354. contentInset: $ReadOnly<{|
  355. top: Double, // always 0 on Android
  356. bottom: Double, // always 0 on Android
  357. left: Double, // always 0 on Android
  358. right: Double, // always 0 on Android
  359. |}>,
  360. contentOffset: $ReadOnly<{|
  361. x: Double,
  362. y: Double,
  363. |}>,
  364. contentSize: $ReadOnly<{|
  365. width: Double, // always 0 on Android
  366. height: Double, // always 0 on Android
  367. |}>,
  368. layoutMeasurement: $ReadOnly<{|
  369. width: Double,
  370. height: Double,
  371. |}>,
  372. velocity: $ReadOnly<{|
  373. x: Double, // always 0 on Android
  374. y: Double, // always 0 on Android
  375. |}>,
  376. |}>,
  377. >,
  378. /**
  379. * The string that will be rendered before text input has been entered.
  380. */
  381. placeholder?: ?string,
  382. /**
  383. * The text color of the placeholder string.
  384. */
  385. placeholderTextColor?: ?ColorValue,
  386. /**
  387. * If `true`, the text input obscures the text entered so that sensitive text
  388. * like passwords stay secure. The default value is `false`. Does not work with 'multiline={true}'.
  389. */
  390. secureTextEntry?: ?boolean,
  391. /**
  392. * The highlight and cursor color of the text input.
  393. */
  394. selectionColor?: ?ColorValue,
  395. /**
  396. * The start and end of the text input's selection. Set start and end to
  397. * the same value to position the cursor.
  398. */
  399. selection?: ?$ReadOnly<{|
  400. start: Int32,
  401. end?: ?Int32,
  402. |}>,
  403. /**
  404. * The value to show for the text input. `TextInput` is a controlled
  405. * component, which means the native value will be forced to match this
  406. * value prop if provided. For most uses, this works great, but in some
  407. * cases this may cause flickering - one common cause is preventing edits
  408. * by keeping value the same. In addition to simply setting the same value,
  409. * either set `editable={false}`, or set/update `maxLength` to prevent
  410. * unwanted edits without flicker.
  411. */
  412. value?: ?string,
  413. /**
  414. * Provides an initial value that will change when the user starts typing.
  415. * Useful for simple use-cases where you do not want to deal with listening
  416. * to events and updating the value prop to keep the controlled state in sync.
  417. */
  418. defaultValue?: ?string,
  419. /**
  420. * If `true`, all text will automatically be selected on focus.
  421. */
  422. selectTextOnFocus?: ?boolean,
  423. /**
  424. * If `true`, the text field will blur when submitted.
  425. * The default value is true for single-line fields and false for
  426. * multiline fields. Note that for multiline fields, setting `blurOnSubmit`
  427. * to `true` means that pressing return will blur the field and trigger the
  428. * `onSubmitEditing` event instead of inserting a newline into the field.
  429. */
  430. blurOnSubmit?: ?boolean,
  431. /**
  432. * Note that not all Text styles are supported, an incomplete list of what is not supported includes:
  433. *
  434. * - `borderLeftWidth`
  435. * - `borderTopWidth`
  436. * - `borderRightWidth`
  437. * - `borderBottomWidth`
  438. * - `borderTopLeftRadius`
  439. * - `borderTopRightRadius`
  440. * - `borderBottomRightRadius`
  441. * - `borderBottomLeftRadius`
  442. *
  443. * see [Issue#7070](https://github.com/facebook/react-native/issues/7070)
  444. * for more detail.
  445. *
  446. * [Styles](docs/style.html)
  447. */
  448. // TODO: figure out what to do with this style prop for codegen/Fabric purposes
  449. // This must be commented for Fabric codegen to work; it's currently not possible
  450. // to override the default View style prop in codegen.
  451. style?: ?TextStyleProp,
  452. /**
  453. * If `true`, caret is hidden. The default value is `false`.
  454. * This property is supported only for single-line TextInput component on iOS.
  455. */
  456. caretHidden?: ?boolean,
  457. /*
  458. * If `true`, contextMenuHidden is hidden. The default value is `false`.
  459. */
  460. contextMenuHidden?: ?boolean,
  461. /**
  462. * The following are props that `BaseTextShadowNode` takes. It is unclear if they
  463. * are used by TextInput.
  464. */
  465. textShadowColor?: ?ColorValue,
  466. textShadowRadius?: ?Float,
  467. textDecorationLine?: ?string,
  468. fontStyle?: ?string,
  469. textShadowOffset?: ?$ReadOnly<{|width?: ?Double, height?: ?Double|}>,
  470. lineHeight?: ?Float,
  471. textTransform?: ?string,
  472. color?: ?Int32,
  473. letterSpacing?: ?Float,
  474. fontSize?: ?Float,
  475. textAlign?: ?string,
  476. includeFontPadding?: ?boolean,
  477. fontWeight?: ?string,
  478. fontFamily?: ?string,
  479. /**
  480. * I cannot find where these are defined but JS complains without them.
  481. */
  482. textAlignVertical?: ?string,
  483. cursorColor?: ?ColorValue,
  484. /**
  485. * "Private" fields used by TextInput.js and not users of this component directly
  486. */
  487. mostRecentEventCount: Int32,
  488. text?: ?string,
  489. |}>;
  490. type NativeType = HostComponent<NativeProps>;
  491. type NativeCommands = TextInputNativeCommands<NativeType>;
  492. export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
  493. supportedCommands: ['focus', 'blur', 'setTextAndSelection'],
  494. });
  495. let AndroidTextInputNativeComponent;
  496. if (global.RN$Bridgeless) {
  497. ReactNativeViewConfigRegistry.register('AndroidTextInput', () => {
  498. return AndroidTextInputViewConfig;
  499. });
  500. AndroidTextInputNativeComponent = 'AndroidTextInput';
  501. } else {
  502. AndroidTextInputNativeComponent = requireNativeComponent<NativeProps>(
  503. 'AndroidTextInput',
  504. );
  505. }
  506. // flowlint-next-line unclear-type:off
  507. export default ((AndroidTextInputNativeComponent: any): HostComponent<NativeProps>);