Mobile Application
Development
Kamran
Lecture 9
What is React Native
• an open source framework for building Android
and iOS applications using React and the app
platform’s native capabilities.
Components [1]
• React Native is like React, but it uses native
components instead of web components as
building blocks.
• Basic React concepts
– JSX
– Components
– State
– props
Basic React concepts [2]
• JSX
<View><Text>Hello world!</Text></View>
• This is JSX - a syntax for embedding XML within
JavaScript.
• JSX lets you write your markup language inside
code.
• It looks like HTML on the web, except instead of
web things like <div> or <span>
• In this case, <Text>
Basic React concepts[3]
• ‘Components
• In React Native (and React in general), components are
the building blocks of the user interface.
• Components allow you to split the UI into reusable,
independent pieces that can be managed separately.
• Each component in React Native represents a part of the
user interface, such as buttons, text, images, and more
complex UI elements.
– Functional components are simpler and mostly used for
rendering UI.
– Class components provide more features like state and
lifecycle methods.
Basic React concepts[4]
• Props
• In React Native, props (short for "properties")
are used to pass data from one component to
another, specifically from a parent component
to a child component.
• Props are immutable, meaning that once they
are passed to a child component, the child
component cannot change them.
Basic React concepts[5]
• State
• State is a special object used to hold data that
influences how a component behaves or
renders.
• Unlike props, which are passed from parent
components and are immutable, state is local to
a component and can be changed over time.
• Changes in state trigger re-renders, allowing the
UI to update in response to user interaction or
other events.
Basic React concepts[6]
• ‘Components
– Basic building block
– Anything on the screen is some sort of component.
• Props
– short for properties
– Customize components
– Should not be modified
• State
– allows React components to change their output over time
– State changes in response to user Input, network response or
anything else.
Component(just
a function)
Basic
component
props
Calling custom components
state
How components work in React
Native?
Core/Basic Components
React Native comes with a set of essential, ready-to-
use Native Components
•View
•Text
•Image
•Button
•Touchables
•Alert
Cross platform working[2]
•
View
• basic building block of UI
• used to display text, images,
or respond to user input
• views can contain other views.
• Maps to UIView, <div>, android.view
Text
• Displays text
• supports nesting, styling, and touch handling.
• must wrap all the text nodes inside of a <Text>
component.
• Props
– numberOfLines
– onPress
Nested Text
<Text style={styles.baseText}>
I am bold and red
<Text style={styles.innerText}> and
red</Text>
</Text>
TextInput [3]
• foundational component for inputting text into
the app via a keyboard.
• Props:
– autoComplete
– autoCorrect
– Editable
– keyboardType
– onChangeText
Image [5]
• Display images both local and network
• Local Image:
– <Image source = {require(‘’)}/>
• Network Images:
– <Image source = {{uri:‘’}}
• Props
– blurRadius
– defaultSource
Buttons [4]
• render nicely on any platform.
• Required props
– onPress
– Title
– color
Touchables
• Wrapper to make views respond to touches
– TouchableHighlight
– TouchableOpacity
– TouchableWithoutFeedback
Directory Structure
References
[1] https://reactnative.dev/docs/tutorial
[2] https://reactnative.dev/docs/intro-react-native-
components
[3] https://reactnative.dev/docs/textinput
[4] https://reactnative.dev/docs/button
[5] https://reactnative.dev/docs/image
