Professional Documents
Culture Documents
DEVELOPMENT
Session 2 – React Native UI Elements
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
• 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:
Slide 6
Text
• A React component for displaying text
• By default, Text components inherit the style information from their parent Text
components, but that can be overridden.
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
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).
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.
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
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
Slide 28
iOS Specific Components
• ActionSheetIOS - Displays native to iOS Action Sheet component
Slide 29
Android Specific Components
• DrawerLayoutAndroid - React component that wraps the platform
DrawerLayout
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