update

React Native tutorial-8-Handling text input/code/TutorialProject/App.js

@@ -3,48 +3,55 @@ Nguyen Duc Hoang - [email protected]
 React Native tutorial video
  */
 import React from 'react';
-import {AppRegistry, StyleSheet, Text, View, StatusBar} from 'react-native';
+import {AppRegistry, StyleSheet, Text, View, StatusBar, TextInput} from 'react-native';
 
-export default class AutoLayoutComponent extends React.Component {
+export default class App extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            text: ""
+        }
+    }
+    /*
+    handleChangeText = (typedText) => {
+        this.setState({text: typedText});
+    }
+    */
     render() {
         return (
-            <View
-                style={
-                    {
-                        flex: 1,
-                        flexDirection: 'column',
-                        justifyContent: 'flex-start',
-                        alignItems: 'flex-end'
-                    }
-                }>
-                <StatusBar hidden={true} />
-                <View
+            <View style={
+                {
+                    padding: 10
+                }
+            }>
+                <TextInput
                     style={
                         {
-                            width: 60,
-                            height: 60,
-                            backgroundColor: 'red'
+                            height: 50
                         }
-                    }/>
-                <View
-                    style={
-                        {
-                            width: 60,
-                            height: 60,
-                            backgroundColor: 'green'
+                    }
+                    placeholder="Type your text here"
+                    onChangeText={
+                        (typedText) => {
+                            this.setState({text: typedText});
                         }
-                    }/>
-                <View
+                    }
+                    value={this.state.text}
+                />
+                <Text
                     style={
                         {
-                            width: 60,
-                            height: 60,
-                            backgroundColor: 'blue'
+                            padding: 20,
+                            fontSize: 30
                         }
-                    }/>
+                    }>
+                    You type: {this.state.text}
+                </Text>
+                <StatusBar hidden={true}/>
             </View>
         );
     }
 }
 
-AppRegistry.registerComponent('Style a component ?', () => AutoLayoutComponent);
+// skip this line if using Create React Native App
+AppRegistry.registerComponent('Example of text input', () => App);