diff --git a/Libraries/Components/TextInput/InputAccessoryView.js b/Libraries/Components/TextInput/InputAccessoryView.js new file mode 100644 index 00000000000000..cd12758435ff96 --- /dev/null +++ b/Libraries/Components/TextInput/InputAccessoryView.js @@ -0,0 +1,114 @@ +/** + * Copyright (c) 2013-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @providesModule InputAccessoryView + * @flow + * @format + */ +'use strict'; + +const ColorPropType = require('ColorPropType'); +const React = require('React'); +const StyleSheet = require('StyleSheet'); +const ViewPropTypes = require('ViewPropTypes'); + +const requireNativeComponent = require('requireNativeComponent'); + +const RCTInputAccessoryView = requireNativeComponent('RCTInputAccessoryView'); + +/** + * Note: iOS only + * + * A component which enables customization of the keyboard input accessory view. + * The input accessory view is displayed above the keyboard whenever a TextInput + * has focus. This component can be used to create custom toolbars. + * + * To use this component wrap your custom toolbar with the + * InputAccessoryView component, and set a nativeID. Then, pass that nativeID + * as the inputAccessoryViewID of whatever TextInput you desire. A simple + * example: + * + * ```ReactNativeWebPlayer + * import React, { Component } from 'react'; + * import { AppRegistry, TextInput, InputAccessoryView, Button } from 'react-native'; + * + * export default class UselessTextInput extends Component { + * constructor(props) { + * super(props); + * this.state = {text: 'Placeholder Text'}; + * } + * + * render() { + * const inputAccessoryViewID = "uniqueID"; + * return ( + * + * + * this.setState({text})} + * value={this.state.text} + * /> + * + * + *