DCIT 202- MOBILE APPLICATION

DEVELOPMENT
Session 2 – React Native UI Elements

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 about essential React Native UI elements.
– Build a very simple React Native app that demonstrates the above concepts.

Slide 2
 Session Outline
• React Components
• Basic Components
• Data Input, Form, and Control Components
• List Components
• Miscellaneous Components
• iOS Specific Components
• Android Specific Components
• APIs

Slide 3
 React Components
• Components are the visual elements that one sees on the screen in a
React Native App
• Can be broken down into broadly into six(6) groups based on several
characteristics

Slide 4
 Basic Components
• These are components that underlie others (other components become
children)
– View
– Text
– Image
– ScrollView
– TouchableHighlight

Note: All are imported from react-native:

import { Text, View, Image, ScrollView, TouchableHighlight} from ‘react-native’
Slide 5
 View
• The View component is a container element that supports layout with flexbox, some touch handling and
accessibility controls.

• View maps directly to the native view equivalent on whatever platform React Native is running on,
whether that is a UIView, <div>, android.view, etc.

• Basic usage:

<View style={{ flexDirection: "row", height: 100, padding: 20}} >

<View style={{ backgroundColor: "blue", flex: 0.3 }} />
<View style={{ backgroundColor: "red", flex: 0.5 }} />
<Text>Hello World!</Text>
</View>

Slide 6
 Text
• A React component for displaying text

<Text>Hello, I am a Text component</Text>

• By default, Text components inherit the style information from their parent Text
components, but that can be overridden.

<Text style={{ color : "red" }}>

<Text>I am red</Text>
<Text style={{ color : "green" }}> I am green</Text>
</Text>
Slide 7
 Image
• Allows you display images
<Image source={ require("./image.png") } />

<Image source={ uri : "https://www.etherient.com/logo.png" } />

• Has event related props such as onLoad, onLoadStart, onLoadEnd,

onError
• Also contains static methods (Image.getSize(), Image.prefetch() etc)

Slide 8
 ScrollView
• ScrollView component is essentially just a View component that allows
for scrolling
<ScrollView>
... some number of components, more than will fit on the screen ...
</ScrollView>
• ScrollViews must have a bounded height (contain unbounded-height
children into a bounded container)
• The easiest way to do this is to ensure that flex:1 is set on all parent
views of the ScrollView

Slide 9
 ScrollView
• ScrollView also supports a couple of methods
– scrollTo, scrollToEnd

• ScrollView supports some life cycle hooks:

– onScroll, onScrollEndDrag

• The ScrollView component has a wide variety of props, including:

– alwaysBounceVertical: When true, the ScrollView bounces in the vertical direction when it reaches
the end of its content
– showsHorizontalScrollIndicator: When true, an indicator showing horizontal scroll position is shown
– centerContent: When true, the ScrollView automatically centers its children
– zoomScale: The current scale of the ScrollView’s content

Slide 10
 TouchableHighlight
• A wrapper for making views respond properly to touches.
• Siblings include siblings TouchableNativeFeedback, TouchableOpacity, and
TouchableWithoutFeedback

• On press down, the opacity of the wrapped view is decreased, which allows
the underlay color to show through, darkening or tinting the view.

• TouchableHighlight must have one child (not zero or more than one).

• If you wish to have several child components, wrap them in a View.

Slide 11
TouchableHighlight

Slide 12
 Data Input, Form, and Control Components
• TextInput
• Switch
• Button

Slide 13
 TextInput
• A foundational component for inputting text into the app via a
keyboard.

• Props provide configurability for several features, such as auto-

correction, auto-capitalization, placeholder text, and different keyboard
types, such as a numeric keypad.

Slide 14
TextInput

Slide 15
 Switch
• The Switch component is very much like an HTML check box, in that it
represents a binary choice: yes or no, on or off, 0 or 1, etc.
<View style={styles.container}>
<Switch onValueChange={toggleSwitch} value={isEnabled} />
</View>

Slide 16
 Button
• A basic button component that should render nicely on any platform.
Supports a minimal level of customization.
• If this button doesn't look right for your app, you can build your own
button using TouchableOpacity or TouchableWithoutFeedback
<Button title="Go ahead, press me, I dare ya!"
onPress={ () => console.log("You pressed me!"); }
/>

The Button component (iOS version on the left, Android version on the right)

Slide 17
 List Components
• These are components used to show lists of items that, typically, a user
can scroll through
• Efficient and a good choice when you have a long list of items to present
since only visible elements on the screen are rendered (as opposed to
ScrollView)
• Include:
– FlatList
– SectionList

Slide 18
 FlatList
• For rendering simple flat lists ( flat meaning a single dimension of data)
and supports a host of features:
– Fully cross-platform
– Optional horizontal mode
– Configurable viewability callbacks
– Header, Footer, Separator support
– Pull to Refresh
– Scroll loading
– ScrollToIndex support
– Multiple column support

Slide 19
 FlatList
<FlatList style={{ height : 80 }}
data={[
{ key : "1", text : "Dream Theater" }, { key : "2", text : "Enchant" },
{ key : "3", text : "Fates Warning" }, { key : "4", text : "Kamelot" },
{ key : "5", text : "Pyramaze" }, { key : "6", text : "Rush" },
{ key : "7", text : "Serenity" }, { key : "8", text : "Shadow Gallery" },
{ key : "9", text : "Pink Floyd" }, { key : "10", text : "Queensryche" }
]}
renderItem={ ({item}) => <Text>{ item.text }</Text> }
/>
Slide 20
 FlatList

The FlatList component (iOS version on the left, Android version on the right)

Slide 21
 SectionList
• A performant interface for rendering sectioned lists, supporting the most handy
features:
– Fully cross-platform
– Configurable viewability callbacks
– List header support
– List footer support
– Item separator support
– Section header support
– Section separator support
– Heterogeneous data and item rendering support
– Pull to Refresh
– Scroll loading

Slide 22
SectionList

Slide 23
 Miscellaneous Components
• ActivityIndicator
• Modal
• WebView

Slide 24
 ActivityIndicator
• Helps to give users an indication that an activity is in progress.
– such as fetching data from the network Or having long-running activities

<ActivityIndicator size="large" color="#ff0000" />

The ActivityIndicator component (iOS version on the left, Android version on the right)

Slide 25
 Modal
• The Modal component is a basic way to present content above an
enclosing view.

Slide 26
Modal

Slide 27
 WebView
• The WebView component renders HTML content in a native web View
component.
• This includes CSS, JavaScript, and anything else you can typically display
in a web browser

<WebView source={{ uri : "https://facebook.github.io/react-native" }} />

Slide 28
 iOS Specific Components
• ActionSheetIOS - Displays native to iOS Action Sheet component

• InputAccessoryView - A component which enables customization of the

keyboard input accessory view on iOS

• SafeAreaView -The purpose of SafeAreaView is to render content within

the safe area boundaries of a device.

Slide 29
 Android Specific Components
• DrawerLayoutAndroid - React component that wraps the platform
DrawerLayout

• TouchableNativeFeedback - A wrapper for making views respond

properly to touches
– On Android this component uses native state drawable to display touch
feedback.

Slide 30
 APIs
• Collections of functions that you can call on in your application code to
perform various functions
– AccessibilityInfo, Alert, Animated, Animated.value, AnimatedValueXY, Appearance,
AppRegistry, AppState, DevSettings, Dimensions, Easing, InteractionManager,
Keyboard, LayoutAnimation, Linking, PanResponder, PixelRatio, Platform,
PlatformColor, Share, StyleSheet, Systrace, Transforms, Vibrations
– Android Specific APIs: BackHandler, PermissionsAndroid, ToastAndroid
– iOS Specific APIs: DynamicColorIOS, Settings, ActionSheetIOS

Slide 31
• Assignment
– Briefly explain any ten(10) React Native APIs.

– Briefly expain the main differences between the TouchableHighlight and its
siblings (TouchableOpacity, TouchableWithoutFeedback,
TouchableNativeFeedback)
• Read the React Native docs online, submission deadline is indicated on Sakai

Slide 32