05.

Touch Event
Sungchul Lee
 Agenda
TouchableOpacity

In this session, we learn about 1 Create file in Components Folder

Touch Event

2 State and Props

3 TouchableOpacity

4 Q&A
Create file in
Components Folder
Create File Screen

➢Create Header.js in Components Folder

No return ??
Function with () vs {}
➢()
– Must return something
– Return JSX
➢{}
– Not Required return
– Or use return keyword
App.js
➢Add Header component
State and Props
Add state on App.js
➢State
– Hold information
➢Pass to child
– props
– <Header name = { }>
➢Inside return JSX
– To use JS in JSX
• {}
➢Outside return JS
Props on Header.js
➢Add Props on Parameter
– {}
– Use {} to get value from props
TouchableOpacity
<TouchableOpacity> Tag
➢Surround <TouchableOpacity> tag
– onPress Event
– alert() message alert(Hello)
TouchableOpacity Properties
➢TouchableWithoutFeedback Props
– https://reactnative.dev/docs/touchablewithoutf
eedback#props
– Doesn’t show the event animation effect
➢onPress is one of Props in
TouchableOpacity
TouchableOpacity Properties
➢onLongPress
– Keep press the area
➢onPressOut
– Called as soon as the touch is released even before onPress
➢onPressIn
– Called as soon as
the touchable element
is pressed and invoked
even before onPress
Q&A