Scribd
Upload
33 views

Lecture#8 And9 ReactNative Basics

Uploaded by

Ahmad Naeem
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
33 views

Lecture#8 And9 ReactNative Basics

Uploaded by

Ahmad Naeem
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 23

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

You might also like