React Native Text input Text Input component subscribe

React Native Text input

Text. Input component • subscribe to the on. Change. Text events to read the user input. • other events: on. Submit. Editing and on. Focus • Two methods exposed via the native element are. focus() and. blur() • will focus or blur the Text. Input programmatically. • some props are only available with multiline={true/false} • border styles that apply to only one side of the element (e. g. , border. Bottom. Color, border. Left. Width, etc. ) will not be applied if multiline=false. • you can wrap your Text. Input in a View

Example 1: Basic input const styles = Style. Sheet. create({ import React, { use. State } from 'react'; import { Style. Sheet, Text, View, Text. Input} from 'react-native'; container: { flex: 1, export default function Useless. Text. Input() { const [my. State, set. My. State] = use. State('Useless text’); background. Color: '#fff’, return ( align. Items: 'center’, <View style={styles. container}> justify. Content: 'center’, <Text. Input style={{height: 40, bordercolor: 'gray', border. Width: 1}} on. Change. Text={(text)=>set. My. State(text)} value={my. State} }, }); /> <Text> {'nn'} {my. State} </Text> </View> ); } This is the anonymous function that RN will call when text changes. “text” is the parameter that contains what the user wrote. We use the setter set. My. State to change the value in the variable my. State

Example 2 import React, {use. State} from 'react'; import { Style. Sheet, Text, View, Text. Input } from 'react-native'; function Useless. Text. Input(props) { return ( Hint: what is a Rest parameter? <Text. Input What is this? ? Hint: what props are passed? {. . . props} style={{height: 40, border. Width: 1}} editable max. Length = {40} /> Slide 1 of 2 ); }

Example 2 export default function Useless. Text. Input. Multiline() { const [my. Text, set. My. Text] = use. State('yellow’); return ( <View style={{ flex: 1, align. Items: 'center’, justify. Content: 'center’, background. Color: my. Text. to. Lower. Case(), border. Bottom. Color: '#000000’, border. Bottom. Width: 1, }} > <Text>{my. Text}{‘nn}</Text> <Useless. Text. Input multiline number. Of. Lines = {4} These are all props value={my. Text} on. Change. Text={text => set. My. Text(text)} /> </View> ); } The parameter “text” contains the words that the user wrote Slide 2 of 2

Example 2

Example 3…click to get text Will put code in two separate files: Home. js App. js

Example 3…click to get text Must export this class for it to be found in App. js import React, { use. State } from 'react'; import {Text, Text. Input, View } from 'react-native'; export const Home = (props) => { Initialize all 3 variables const [my. State, set. My. State] = use. State(props. orig. Text); const [my. State 2, set. My. State 2] = use. State(props. orig. Text 2); const [my. State 3, set. My. State 3] = use. State('Waiting for text'); update. State = () => { set. My. State 3(my. State + 'n' + my. State 2); }; Event handler for on. Press event Update my. State 3 with the values from the fields (stored in my. State 1 and my. State 2) Two Text. Input boxes; update different state as enter return ( <View style={{padding: 10, margin. Top: 100}}> <Text. Input style={{height: 40}} placeholder='Type here to translate!’ on. Change. Text={(stuff) => set. My. State(stuff)} /> <Text. Input style={{height: 40}} placeholder='This is the second input line’ on. Change. Text={(stuff) => set. My. State 2(stuff)} /> <Text style={{padding: 10, font. Size: 12}}> {my. State 3} Text field for output </Text> <Text on. Press = {update. State}> Click to update </Text> Text field to act as a button } ); </View> This code is in file Home. js in the same directory as App. js

Example 3: App. js import React, {use. State} from 'react'; import { Style. Sheet, Text, View, Alert } from 'reactnative'; const styles = Style. Sheet. create({ import {Home} from '. /Home. js'; flex: 1, export default function home. App() { background. Color: '#fff', container: { return ( align. Items: 'center', <View style={styles. container}> justify. Content: 'center', <Home orig. Text='Friends, Romans, Countrymen' orig. Text 2='To be or not to be' /> }, </View> }); ); // end return } // end home. App This code is in file App. js Must import the Home function. Note the ‘. /’ to indicate that the file is in the same directory as the App. js file and that there are curly brackets around Home.

Note: if you do nothing, keyboard should automatically dismiss when text is submitted (enter pressed) Example 4: Grabbing text, dismissing keyboard return ( <View style={styles. container}> import React, { use. Effect, use. State } from "react"; <Text. Input import { View, Text, Button, Keyboard, Text. Input, Style. Sheet } from "reactplaceholder='Click here. . . ’ native"; on. Change. Text={text => update. Text(text)} import {Touchable. Opacity} from "react-native"; Save changed text in state default. Value={"Write something here. . . "} import {styles} from '. /styles. js’; auto. Capitalize='none’ clear. Text. On. Focus Note that the export default function Example() { /> const [the. Text, set. The. Text] = use. State(''); stylesheet code is const [the. Result, set. Result] = use. State(’’); missing in this slide When Touchable. Opacity is <Text>{'n'}</Text> touched, change the state <Touchable. Opacity const update. State = () => { style={styles. button} variable the. Result Keyboard. dismiss(); on. Press={update. State} set. Result(the. Text); } > Dismiss keyboard when button pressed <Text>Press Here</Text> const update. Text = (text) => { </Touchable. Opacity> set. The. Text(text); <Text style={styles. result}> } Note that we cannot grab the text directly out of the Text. Input component. {the. Result} When the. Result is changes, Rather we save it in state and then grab the value from state (i. e. , the. Text) in </Text> the value displayed is changed update. State and save the result in state (the. Result) to be used in a <Text> </View> ); } Must import the keyboard component

Example 4…using submit When loaded After button is pressed