From ce76a2c8c3d9260c83d36933c822fdb3889358ab Mon Sep 17 00:00:00 2001
From: Bartosz Kaszubowski <gosimek@gmail.com>
Date: Sun, 12 Oct 2025 00:01:10 +0200
Subject: [PATCH] Handling Text Input: improve example

---
 docs/handling-text-input.md                              | 9 +++++++--
 .../versioned_docs/version-0.77/handling-text-input.md   | 9 +++++++--
 .../versioned_docs/version-0.78/handling-text-input.md   | 9 +++++++--
 .../versioned_docs/version-0.79/handling-text-input.md   | 9 +++++++--
 .../versioned_docs/version-0.80/handling-text-input.md   | 9 +++++++--
 .../versioned_docs/version-0.81/handling-text-input.md   | 9 +++++++--
 .../versioned_docs/version-0.82/handling-text-input.md   | 9 +++++++--
 7 files changed, 49 insertions(+), 14 deletions(-)

diff --git a/docs/handling-text-input.md b/docs/handling-text-input.md
index 4b5225725fb..2345d089c7e 100644
--- a/docs/handling-text-input.md
+++ b/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
diff --git a/website/versioned_docs/version-0.77/handling-text-input.md b/website/versioned_docs/version-0.77/handling-text-input.md
index 4b5225725fb..2345d089c7e 100644
--- a/website/versioned_docs/version-0.77/handling-text-input.md
+++ b/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
diff --git a/website/versioned_docs/version-0.78/handling-text-input.md b/website/versioned_docs/version-0.78/handling-text-input.md
index 4b5225725fb..2345d089c7e 100644
--- a/website/versioned_docs/version-0.78/handling-text-input.md
+++ b/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
diff --git a/website/versioned_docs/version-0.79/handling-text-input.md b/website/versioned_docs/version-0.79/handling-text-input.md
index 4b5225725fb..2345d089c7e 100644
--- a/website/versioned_docs/version-0.79/handling-text-input.md
+++ b/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
diff --git a/website/versioned_docs/version-0.80/handling-text-input.md b/website/versioned_docs/version-0.80/handling-text-input.md
index 4b5225725fb..2345d089c7e 100644
--- a/website/versioned_docs/version-0.80/handling-text-input.md
+++ b/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
diff --git a/website/versioned_docs/version-0.81/handling-text-input.md b/website/versioned_docs/version-0.81/handling-text-input.md
index 4b5225725fb..2345d089c7e 100644
--- a/website/versioned_docs/version-0.81/handling-text-input.md
+++ b/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
diff --git a/website/versioned_docs/version-0.82/handling-text-input.md b/website/versioned_docs/version-0.82/handling-text-input.md
index 4b5225725fb..2345d089c7e 100644
--- a/website/versioned_docs/version-0.82/handling-text-input.md
+++ b/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