Handling Text Input: improve example (#4848)

Author: Simek

docs/handling-text-input.md

@@ -14,12 +14,17 @@ import {Text, TextInput, View} from 'react-native';
 const PizzaTranslator = () => {
   const [text, setText] = useState('');
   return (
-    <View style={{padding: 10}}>
+    <View style={{flex: 1, justifyContent: 'center'}}>
       <TextInput
-        style={{height: 40, padding: 5}}
         placeholder="Type here to translate!"
         onChangeText={newText => setText(newText)}
         defaultValue={text}
+        style={{
+          height: 40,
+          padding: 5,
+          marginHorizontal: 8,
+          borderWidth: 1,
+        }}
       />
       <Text style={{padding: 10, fontSize: 42}}>
         {text

website/versioned_docs/version-0.77/handling-text-input.md

@@ -14,12 +14,17 @@ import {Text, TextInput, View} from 'react-native';
 const PizzaTranslator = () => {
   const [text, setText] = useState('');
   return (
-    <View style={{padding: 10}}>
+    <View style={{flex: 1, justifyContent: 'center'}}>
       <TextInput
-        style={{height: 40, padding: 5}}
         placeholder="Type here to translate!"
         onChangeText={newText => setText(newText)}
         defaultValue={text}
+        style={{
+          height: 40,
+          padding: 5,
+          marginHorizontal: 8,
+          borderWidth: 1,
+        }}
       />
       <Text style={{padding: 10, fontSize: 42}}>
         {text

website/versioned_docs/version-0.78/handling-text-input.md

@@ -14,12 +14,17 @@ import {Text, TextInput, View} from 'react-native';
 const PizzaTranslator = () => {
   const [text, setText] = useState('');
   return (
-    <View style={{padding: 10}}>
+    <View style={{flex: 1, justifyContent: 'center'}}>
       <TextInput
-        style={{height: 40, padding: 5}}
         placeholder="Type here to translate!"
         onChangeText={newText => setText(newText)}
         defaultValue={text}
+        style={{
+          height: 40,
+          padding: 5,
+          marginHorizontal: 8,
+          borderWidth: 1,
+        }}
       />
       <Text style={{padding: 10, fontSize: 42}}>
         {text

website/versioned_docs/version-0.79/handling-text-input.md

@@ -14,12 +14,17 @@ import {Text, TextInput, View} from 'react-native';
 const PizzaTranslator = () => {
   const [text, setText] = useState('');
   return (
-    <View style={{padding: 10}}>
+    <View style={{flex: 1, justifyContent: 'center'}}>
       <TextInput
-        style={{height: 40, padding: 5}}
         placeholder="Type here to translate!"
         onChangeText={newText => setText(newText)}
         defaultValue={text}
+        style={{
+          height: 40,
+          padding: 5,
+          marginHorizontal: 8,
+          borderWidth: 1,
+        }}
       />
       <Text style={{padding: 10, fontSize: 42}}>
         {text

website/versioned_docs/version-0.80/handling-text-input.md

@@ -14,12 +14,17 @@ import {Text, TextInput, View} from 'react-native';
 const PizzaTranslator = () => {
   const [text, setText] = useState('');
   return (
-    <View style={{padding: 10}}>
+    <View style={{flex: 1, justifyContent: 'center'}}>
       <TextInput
-        style={{height: 40, padding: 5}}
         placeholder="Type here to translate!"
         onChangeText={newText => setText(newText)}
         defaultValue={text}
+        style={{
+          height: 40,
+          padding: 5,
+          marginHorizontal: 8,
+          borderWidth: 1,
+        }}
       />
       <Text style={{padding: 10, fontSize: 42}}>
         {text

website/versioned_docs/version-0.81/handling-text-input.md

@@ -14,12 +14,17 @@ import {Text, TextInput, View} from 'react-native';
 const PizzaTranslator = () => {
   const [text, setText] = useState('');
   return (
-    <View style={{padding: 10}}>
+    <View style={{flex: 1, justifyContent: 'center'}}>
       <TextInput
-        style={{height: 40, padding: 5}}
         placeholder="Type here to translate!"
         onChangeText={newText => setText(newText)}
         defaultValue={text}
+        style={{
+          height: 40,
+          padding: 5,
+          marginHorizontal: 8,
+          borderWidth: 1,
+        }}
       />
       <Text style={{padding: 10, fontSize: 42}}>
         {text

website/versioned_docs/version-0.82/handling-text-input.md

@@ -14,12 +14,17 @@ import {Text, TextInput, View} from 'react-native';
 const PizzaTranslator = () => {
   const [text, setText] = useState('');
   return (
-    <View style={{padding: 10}}>
+    <View style={{flex: 1, justifyContent: 'center'}}>
       <TextInput
-        style={{height: 40, padding: 5}}
         placeholder="Type here to translate!"
         onChangeText={newText => setText(newText)}
         defaultValue={text}
+        style={{
+          height: 40,
+          padding: 5,
+          marginHorizontal: 8,
+          borderWidth: 1,
+        }}
       />
       <Text style={{padding: 10, fontSize: 42}}>
         {text