From f72f86bfa2dc4a93df9cd5a12d7e0176aa331f66 Mon Sep 17 00:00:00 2001
From: Kevin Lacker <lacker@gmail.com>
Date: Mon, 27 Jun 2016 18:57:16 -0700
Subject: [PATCH] improve text input docs

Summary:
Not a big deal, I was just going through the tutorial trying to figure out which doc was the most boring, and improve it a bit. IMO now the example is slightly funnier, and it mentions onSubmitEditing which in practice is probably a more useful callback.
Closes https://github.com/facebook/react-native/pull/8447

Differential Revision: D3491938

Pulled By: JoelMarcey

fbshipit-source-id: 3bd0f5762dc4db4a85c9d5badb6c005f4b8c52f4
---
 docs/HandlingTextInput.md | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/docs/HandlingTextInput.md b/docs/HandlingTextInput.md
index 9e40a7260cc053..76ad648c53f1da 100644
--- a/docs/HandlingTextInput.md
+++ b/docs/HandlingTextInput.md
@@ -8,15 +8,16 @@ next: using-a-scrollview
 ---
 
 [`TextInput`](/react-native/docs/textinput.html#content) is a basic component that allows the user to enter text. It has an `onChangeText` prop that takes
-a function to be called every time the text changed.
+a function to be called every time the text changed, and an `onSubmitEditing` prop that takes a function to be called when the text is submitted.
 
-This example shows how to count the number of characters that have been typed in a box.
+For example, let's say that as the user types, you're translating their words  into a different language. In this new language, every single word is written the same way: 🍕. So the sentence "Hello there Bob" would be translated
+as "🍕🍕🍕".
 
 ```ReactNativeWebPlayer
 import React, { Component } from 'react';
 import { AppRegistry, Text, TextInput, View } from 'react-native';
 
-class CharacterCounter extends Component {
+class PizzaTranslator extends Component {
   constructor(props) {
     super(props);
     this.state = {text: ''};
@@ -27,20 +28,22 @@ class CharacterCounter extends Component {
       <View style={{padding: 10}}>
         <TextInput
           style={{height: 40}}
-          placeholder="Pleeeease type on me!"
+          placeholder="Type here to translate!"
           onChangeText={(text) => this.setState({text})}
         />
-        <Text style={{padding: 10}}>{this.state.text.length}</Text>
+        <Text style={{padding: 10, fontSize: 42}}>
+          {this.state.text.split(' ').map((word) => word && '🍕').join(' ')}
+        </Text>
       </View>
     );
   }
 }
 
-AppRegistry.registerComponent('CharacterCounter', () => CharacterCounter);
+AppRegistry.registerComponent('PizzaTranslator', () => PizzaTranslator);
 ```
 
 In this example, we store `text` in the state, because it changes over time.
 
-There are a lot more advanced things you might want to do with a text input. For example, you could validate the text inside while the user types. For more detailed examples, see the [React docs on controlled components](https://facebook.github.io/react/docs/forms.html), or the [reference docs for TextInput](/react-native/docs/textinput.html).
+There are a lot more things you might want to do with a text input. For example, you could validate the text inside while the user types. For more detailed examples, see the [React docs on controlled components](https://facebook.github.io/react/docs/forms.html), or the [reference docs for TextInput](/react-native/docs/textinput.html).
 
 Text input is probably the simplest example of a component whose state naturally changes over time. Next, let's look at another type of component like this is one that controls layout, and [learn about the ScrollView](/react-native/docs/using-a-scrollview.html).