Add support for multiline TextInput via UITextView

Summary:
@nicklockwood - Could I get a review of this?

Just took `RCTTextField` and ported it from `UITextField` to `UITextView` as you mentioned in another discussion, and removed any `UITextField` specific attributes.

- How do you think this should behave when there are subviews?
- Do you know how we can respond to the `UIControlEventEditingDidEndOnExit` event to respond to submit? Because `UITextView` isn't a `UIControl` we can't just use `addTarget` with `UIControlEventEditingDidEndOnExit`.
- Any other feedback?

Still going to look over the `UITextView` docs in more detail and make sure we expose all important options, and add it to the UIExplorer example, just putting this out here for feedback.

![multiline](https://cloud.githubusercontent.com/assets/90494/7310854/32174d6a-e9e8-11e4-919e-71e54cf3c739.gif)

Closes https://github.com/facebook/react-native/pull/991
Github Author: Brent Vatne <brent.vatne@madriska.com>

Test Plan: Imported from GitHub, without a `Test Plan:` line.
This commit is contained in:
Brent Vatne
2015-04-29 01:29:00 -07:00
parent 349f8b942a
commit c09bdebcd5
10 changed files with 392 additions and 33 deletions

View File

@@ -88,9 +88,9 @@ var styles = StyleSheet.create({
height: 26,
borderWidth: 0.5,
borderColor: '#0f0f0f',
padding: 4,
flex: 1,
fontSize: 13,
padding: 4,
},
multiline: {
borderWidth: 0.5,
@@ -98,6 +98,13 @@ var styles = StyleSheet.create({
flex: 1,
fontSize: 13,
height: 50,
padding: 4,
},
multilineWithFontStyles: {
color: 'blue',
fontWeight: 'bold',
fontSize: 18,
fontFamily: 'Cochin',
},
eventLabel: {
margin: 3,
@@ -118,7 +125,7 @@ var styles = StyleSheet.create({
});
exports.title = '<TextInput>';
exports.description = 'Single-line text inputs.';
exports.description = 'Single and multi-line text inputs.';
exports.examples = [
{
title: 'Auto-focus',
@@ -313,7 +320,7 @@ exports.examples = [
},
{
title: 'Clear and select',
render: function () {
render: function() {
return (
<View>
<WithLabel label="clearTextOnFocus">
@@ -336,4 +343,24 @@ exports.examples = [
);
}
},
{
title: 'Multiline',
render: function() {
return (
<View>
<TextInput
placeholder="multiline text input"
multiline={true}
style={[styles.multiline, {marginBottom: 4}]}
/>
<TextInput
placeholder="multiline text input with font styles"
multiline={true}
placeholderTextColor="red"
style={[styles.multiline, styles.multilineWithFontStyles]}
/>
</View>
)
}
}
];