Dcit 202-Mobile Application Development: Session 4 - Interaction

DCIT 202- MOBILE APPLICATION
DEVELOPMENT
Session 4 – Interaction
Lecturer: Mr. Paul Nii Tackie Ammah, DCS

Contact Information: [email protected]
Department of Computer Science

School of Physical and Mathematical Sciences
Session Overview
• Goals and Objectives
– Learn how to navigate between screens and handle events
– Build a very simple React Native app that demonstrates the above concepts.
NB: Contents of slides largely adapted from https://reactnative.dev/ and https://reactnavigation.org/
Slide 2
Session Outline
• Handling Touches
• Navigation
• Passing Data between Screens
Slide 3
Handling Touches
• Users interact with mobile apps mainly through touch
• Checkout the documentation on any component to know the gestures it
can handle (https://reactnative.dev/docs)
• React Native provides components to handle all common gestures
• There are several gestures that users employ:
– tapping on a button, scrolling a list, or zooming on a map
Slide 4
Button
• Pressing a button calls the function assigned to onPress props
• Assign a function to onPress to trigger an action when button is pressed
Slide 5
Touchables
• Touchables include TouchableHighlight , TouchableNativeFeedback,
TouchableOpacity and TouchableWithoutFeedback
• Touchables can handle button pressed and button long pressed (i.e.
when the user presses and holds a view for a set amount of time)
• Assign functions to onPress and onLongPress props
<TouchableHighlight onPress={this.onPressBtn} onLongPress={this.alertFxn}>

<View style={styles.button}>
<Text style={styles.buttonText}>TouchableHighlight</Text>
</View>
</TouchableHighlight>
Slide 6
Scrollview
• The following gestures are triggered when a user swipes or pans and are
handled by functions assigned to the respective props of a Scrollview
• onScroll : Fires at most once per frame during scrolling
• onScrollBeginDrag: Called when the user begins to drag the scroll view
• onScrollEndDrag: Called when the user stops dragging the scroll view
and it either stops or begins to glide
• onScrollToTop (ios): Fires when the scroll view scrolls to top after the
status bar has been tapped
Slide 7
Navigating Between Screens
• The community solution to navigation is a standalone library that allows developers to set up the
screens of an app with a few lines of code.
• First, you need to install in your project:
npm install @react-navigation/native @react-navigation/stack
• Next install required dependencies
• For Expo projects:
expo install react-native-reanimated react-native-gesture-handler react-native-screens react-native-
safe-area-context @react-native-community/masked-view
• Bare React Native project
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-
safe-area-context @react-native-community/masked-view
Slide 8
Navigation Setup
• To finalize installation of react-native-gesture-handler, add the
following at the top (make sure it's at the top and there's nothing else
before it) of your entry file, such as index.js or App.js
Slide 9
NavigationContainer
• In the entry file (usually App.js or index.js) wrap the whole app in
NavigationContainer
Slide 10
Add Screens to NavigationContainer
• Each screen defined with
Stack.Screen has a component prop
which refers to a React Native
component.
• Those components receive a prop
called navigation which has various
methods to link to other screens.
Slide 11
Navigating Between Screens
Slide 12
Navigators
• Stack Navigators: Provides a way for your app to transition between screens
where each new screen is placed on top of a stack
• Bottom Tab Navigators: A simple tab bar on the bottom of the screen that lets
you switch between different routes
• Drawer Navigators: Component that renders a navigation drawer which can be
opened and closed via gestures
• Material Bottom Tab Navigators: A material-design themed tab bar on the bottom
of the screen that lets you switch between different routes with animation
• Material Top Bar Navigators: A material-design themed tab bar on the top of the
screen that lets you switch between different routes by tapping the tabs or
swiping horizontally
Slide 13
Stack Navigator in Action
Visit https://reactnavigation.org/docs/stack-navigator for

more info on StackNavigator
Slide 14
Bottom Tab Navigator
• Install earlier dependencies plus
– npm install @react-navigation/bottom-tabs OR
– yarn add @react-navigation/bottom-tabs
Slide 15
Bottom Tab Navigator in Action
Visit https://reactnavigation.org/docs/bottom-tab-navigator
for more info on BottomTabNavigator
Slide 16
Drawer Navigator
• Install earlier dependencies plus
– npm install @react-navigation/drawer OR
– yarn add @react-navigation/drawer
Slide 17
Drawer Navigator in Action
Visit https://reactnavigation.org/docs/drawer-navigator for

more info on DrawerNavigator
Slide 18
Passing parameters to Routes
• We can pass data to routes when we navigate to them
• There are two pieces to this:
– Pass parameters to a route by putting them in an object as a second parameter
to the navigation.navigate function:
navigation.navigate('RouteName', { /* params go here */ })
• Read the params in your screen component:
route.params
Slide 19

Dcit 202-Mobile Application Development: Session 4 - Interaction

Uploaded by

Copyright:

Available Formats

Dcit 202-Mobile Application Development: Session 4 - Interaction

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Dcit 202-Mobile Application Development: Session 4 - Interaction

Uploaded by

Copyright:

Available Formats

DCIT 202- MOBILE APPLICATION

Lecturer: Mr. Paul Nii Tackie Ammah, DCS

Department of Computer Science

NB: Contents of slides largely adapted from https://reactnative.dev/ and https://reactnavigation.org/

<TouchableHighlight onPress={this.onPressBtn} onLongPress={this.alertFxn}>

Visit https://reactnavigation.org/docs/stack-navigator for

Visit https://reactnavigation.org/docs/drawer-navigator for

You might also like