React Native Touch interface And Hooks 1 Buttons

React Native Touch interface And Hooks 1

Buttons • Renders • <Button on. Press={() => { – blue label on i. OS Alert. alert('You tapped the button!'); – blue rounded rectangle with }} white text on Android. title="Press Me" "on. Press" function /> – Can call an event handler – Can be anonymous function – in this case displays an alert popup. – can specify a "color" prop to change the color of your button. 2

Button 2 This is Home. js import React, {use. State} from 'react'; import { Text, Text. Input, View, Button, Keyboard } from 'react-native'; export default function Home(props) { 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) }; Continued on next slide 3

return ( <View style={{padding: 10, margin. Top: 100}}> <Text. Input style={{height: 40}} placeholder="Type here to translate!" on. Change. Text={(text) => set. My. State(text)} on. Submit. Editing={Keyboard. dismiss} /> <Text. Input style={{height: 40}} placeholder="This is the second input line: type more!" on. Change. Text={(text) => set. My. State 2(text)} on. Submit. Editing={Keyboard. dismiss} /> <Text style={{padding: 10, font. Size: 12}}> {my. State 3} </Text> color is the color of the text on i. OS <Button on. Press = {update. State} And the color of the background on Android color='#841584' title="Click to update" accessibility. Label is to associate text /> with a button for accessibility </View> 4 ); }

Create your own button • build your own button using any of the "Touchable" components • "Touchable" components provide the capability to capture tapping gestures, • "Touchable" components can display feedback when a gesture is recognized. • No provided default styling, – Must provide your own styling. 5

Touchable components • use Touchable. Highlight anywhere you would use a button or link on web. – The view's background will be darkened when the user presses down on the button. • Use Touchable. Native. Feedback on Android to display ink surface reaction ripples that respond to the user's touch. • Touchable. Opacity can be used to provide feedback by reducing the opacity of the button, allowing the background to be seen through while the user is pressing down. • If you need to handle a tap gesture but you don't want any feedback to be displayed, use Touchable. Without. Feedback. 6

Touchable components • Examples: see facebook tutorial: https: //reactnative. dev/docs/touchablehighlight https: //reactnative. dev/docs/touchableopacity https: //reactnative. dev/docs/touchablewithoutf eedback 7

Example: Grabbing text 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 "react-native"; placeholder='Click here. . . ’ import {Touchable. Opacity} from "react-native"; on. Change. Text={text => update. Text(text)} Save changed text in state import {styles} from '. /styles. js’; default. Value={"Write something here. . . "} auto. Capitalize='none’ export default function Example() { Note that the clear. Text. On. Focus const [the. Text, set. The. Text] = use. State(''); stylesheet code is /> const [the. Result, set. Result] = use. State(’’); missing in this When Touchable. Opacity <Text>{'n'}</Text> slide is touched, change the const update. State = () => { <Touchable. Opacity state variable the. Result Keyboard. dismiss(); set. Result(the. Text); style={styles. button} } on. Press={update. State} > const update. Text = (text) => { set. The. Text(text); <Text>Press Here</Text> } </Touchable. Opacity> <Text style={styles. result}> {the. Result} Note that we cannot grab the text directly out of the Text. Input component. Rather we save it in state and then grab the value from state (i. e. , the. Text) in </Text> When the. Result is changes, update. State and save the result in state (the. Result) to be used in a <Text> </View> ); } the value displayed is changed

Example 4…using submit When loaded After button is pressed

Hooks • Problem: sharing state among components • Solution: Hooks (use. State, use. Ref) • Problem: Apps go through a lifecycle and we want to do different things (e. g. , initializations) at different stages • Solution: Hooks (use. Effect) 10

Lifecycle • i. OS and Android apps go through a lifecycle – As the app changes state and as views are shown/hidden different events occur – Both platforms have lifecycle functions that an app can implement – These functions are called at the appropriate time. • React Native offers some of these lifecycle methods when classes are used – Also has a few of its own 11

Component Lifecycle • Each component has several “lifecycle methods” that you can override to run code at particular times in the process. There is no constructor method when using functions Functions cannot use the component. Did… methods 12

Lifecycle • These lifecycle events are not accessible when using functions • Instead, the concept of Hooks was introduced. • Overview: https: //reactjs. org/docs/hooksoverview. html 13

Hooks • • • Hooks are designed to allow function components to share state Hooks is comprised of 10 functions Three most useful functions are – “use. State”, – ”use. Ref”, and – “use. Effect” • Hooks are functions – they let you “hook into” React Native state and lifecycle features from function components. • Hooks don’t work inside classes – they let you use React without classes. • References: – The official page: https: //reactjs. org/docs/hooks-intro. html – Hooks API: https: //reactjs. org/docs/hooks-reference. html – Overview of use. State: https: //reactjs. org/docs/hooks-overview. html 14

React Native environment X is not known in RN environment, so cannot update x in the JSX Hook X let x = 10; return() { Components State <Image source=… /> <Text>Hello World</Text> JSX and components known to React Native environment Local variables are not known } 15

use. State vs use. Ref • use. State is part of the RN render cycle use. Ref is NOT part of the RN render cycle – Create and initialize variables and retain their value between function calls – Variables are mutable (can be changed) – When a variable stored in use. State is changed, the component rerenders • use. Ref – Create and initialize variables and retain their value between function calls – Variables are mutable (can be changed) – When a variable stored in use. Ref is changed, the component does not re -render • See: https: //stackoverflow. com/questions/60592465/reactusestate-vs-useref 16

use. Effect • Creates a “side-effect” to our components • See: https: //leewarrick. com/blog/react-useeffect-explained/ • https: //www. tutorialspoint. com/usinguseeffect-in-react-js-functional-component • We can add multiple use. Effect functions in a single component. 17

use. Effect • use. Effect can be used to synchronize state outside of a component: – use. Effect(fn) // all state; synch when any state changes – use. Effect(fn, []) // no state; do only once when load – use. Effect(fn, [these, states]). // execute when “these” or “states” changes 18

Example 1 import React, { use. State, use. Effect } from 'react'; import {View, Text} from "react-native"; export default function Example() { const [count, set. Count] = use. State(0); const updatestate = () =>{ set. Count(count + 1) } use. Effect(() => { // Update the document title using the browser API console. log('You clicked ' + count + ' times'); }); No second parameter return ( <View> <Text>You clicked {count} times {'nnn'}</Text> <Text on. Press = {updatestate}> Click me </Text> </View> ); } Similar to component. Did. Mount and component. Did. Update use. Effect is triggered when the component is loaded and whenever the component is re-rendered. Console. log prints every time the text is clicked since this causes a re-render 19

React Native environment Hook State X return() { Components change <View> <Text>You clicked… render() use. Effect } Render() use. Effect called <Text>Click Me!</Text> 20

Example 2 import React, { use. State, use. Effect } from 'react'; import {View, Text} from "react-native"; export default function Example() { const [count, set. Count] = use. State(0); const updatestate = () =>{ set. Count(count + 1) } use. Effect(() => { // Update the document title using the browser API console. log('You clicked ' + count + ' times'); }, [ ]); return ( <View> <Text>You clicked {count} times {'nnn'}</Text> <Text on. Press = {updatestate}> Click me </Text> </View> ); } Similar to component. Did. Mount but not component. Did. Update use. Effect is triggered only when the component is loaded. second parameter is an empty array Console. log prints once. 21

Example 3 import React, { use. State, use. Effect } from 'react'; import {View, Text} from "react-native"; return ( export default function Example() { <View> const [count, set. Count] = use. State(0); <Text>You clicked {count} times const [dogs, set. Dogs] = use. State(0); {'nnn'}</Text> const updatestate = () =>{ <Text on. Press = set. Count(count + 1); {updatestate}> set. Dogs(dogs + 1); Click count } </Text> use. Effect(() => { </View> // Update the document title using the browser API ); } console. log('You clicked count ' + count + ' times’); console. log('You clicked dogs ‘ + dogs + ' times'); use. Effect is triggered whenever the count changes but not }, [ count]); second parameter is the var count when dogs is changed. Console. log prints every time count changes. Can put as many variables as you want in the array. use. Effect 22 called whenever one of the array elements changes

Example 4 import React, { use. State, use. Effect } from 'react'; import {View, Text} from "react-native"; export default function Example() { const [count, set. Count] = use. State(0); return ( <View> <Text>You clicked {count} times {'nnn'}</Text> <Text on. Press = {updatestate}> Click me </Text> </View> ); } const updatestate = () =>{ set. Count(count + 1) } use. Effect(() => { // Update the document title using the browser API console. log('You clicked ' + count + ' times’); return ( ()=>{ console. log(‘cleanup similar to component. Will. Unmount’); }, [ ]); The returned function is called when the component unmounts, empty array i. e. when execution stops. Like component. Did. Unmount 23