CHAPTER THREE

REACT NATIVE FRAMEWORK

AND IT’S COMPONENTS
Outline
 Basics of React native
 Environmental Setup
 First App Hello World
 React native State and Probs
 React native Text and TextInput
 React native Button and Touchable
 React native Switch
 React native Styles and Layout
React Native - Overview
 React Native is an open source framework for building Android and
iOS applications using React and the app platform’s native
capabilities.
 React Native is mainly based on JavaScript to access your platform’s
APIs as well as to describe the appearance and behavior of your UI
using React components: bundles of reusable, nestable code.
View basic building block of UI
 View is the basic building block of UI in Android and iOS
development: it include a small rectangular element on the screen or
visual elements of an app,
 used to display text, images, or respond to user input.
 a line of text or a button.
 Some kinds of views can contain other views.
React Components vs. React Native
Components
 Because React
Native uses the same
API structure as
React components,
you’ll need to
understand React
component APIs to
get started.
React Native vs. Core Component
 Android development use Kotlin or Java to write views; where as iOS development use Swift or
Objective-C.
 With React Native, you can invoke views with JavaScript using React components.
 Meaning, at runtime, React Native creates the corresponding Android and iOS views for those
components.
 Because React Native components are backed by the same views as Android and iOS, React
Native apps look, feel, and perform like any other apps.
 This platform-backed components is also called Native Components.
 React Native comes with a set of essential, ready-to-use Native Components you can use to start
building your app today. These are React Native's Core Components.
 React Native also lets you build your own Native Components for Android and iOS to suit your
app’s unique needs.
 We also have a thriving ecosystem of these community-contributed components.
Core Components
 React Native provides a number of built-in Core Components for
everything from form controls to activity indicators. These include:
 Basic Components
 User Interface
 List Views
 Android-specific
 Others
 React Native provides a number of built-in Core Components ready
for you to use in your app.
 Basic Components - Most apps end up using these basic components.
 User Interfaces - common user interface controls render on any platform.

 List Views - unlike ScrollView (more generic), list view components only render(provide)
elements that are currently showing on the screen. Best to display longlist of data.
 Android-specific components and API’s - Many of the following
components provide wrappers for commonly used Android classes.
 Others - These components may be useful for certain applications.
Common Core Components used
Running your first react native - app
 Demo - https://reactnative.dev/docs/intro-react
React Native - fundamentals
 React Native runs on React, a popular open source library for
building user interfaces with JavaScript.
 So it is important to understand React itself first.
 The following are core concepts behind React and to work with React
native:
 components
 JSX
 props
 state
Components
 A component is like a blueprints.
 It can be created as Function Component or Class Component.
 We focus on Function Component
 Let us define our own function component – HelloReact
 To define, first use JavaScript to import React and React Native core
components.

const HelloReact = () => {};

 Your component starts as function:
 Whatever a function component returns is rendered as a React
element.
 React elements let you describe what you want to see on the screen.
 So, the HelloReact component will render a <Text> element below.

const HelloReact = () => {

return <Text>Hello, I am react native!</Text>;
};
 You can export your function component with JavaScript’s export default for
use throughout your app like:

const HelloReact = () => {

return <Text>Hello, I am react native!</Text>;
};

export default HelloReact;

 Note that there are many ways to export your component. Depending on your
app’s file structure, you might need to use a different convention.
JSX
 Now take a closer look at that return statement. <Text>Hello, I am your cat!
</Text> is using a kind of JavaScript syntax that makes writing elements
convenient: JSX.
 React and React Native use JSX, a syntax that lets you write elements inside
JavaScript:
 <Text>Hello, I am react native!</Text>.
 Because JSX is JavaScript, you can use variables inside it. Declaring a name
for the HelloReact, name, and embedding it with curly braces inside <Text>.
 const name = “react";
 <Text>Hello, I am {name} !</Text>
 Any JavaScript expression will work
between curly braces, including
function calls:
 {getFullName(“Lucy", “Afar")}
 The curly braces is like creating a
portal into JS functionality in your
JSX!
 JSX is included in react library.
 React lets you nest components inside each
other to create new components.
 Nestable and reusable components are at the
heart of the React paradigm.
 Text and TextInput are nested inside a View , and
React Native will render them together.
 In React Native, View uses Flexbox for its
children’s layout.
 Component can be render multiple times
and in multiple places without repeating
your code by using <Hello/>
 Any component that renders other
components is a parent component.
 Here, MultiGreetings is a parent
component and each Hello is a child
component.
 Each <Hello> renders a unique element
—which you can customize with props.
Props – short for “properties”
 Props is short for “properties”.
 Props let you customize React
components.
 E.g. you pass each <Student> a
different name for Student to render:
 Most of React Native’s Core
Components can be customized with
props, too.
 E.g. when using Image, you pass it a
prop named src to define what image it
shows.
 Image has many different props,
including style, which accepts a JS
object of design and layout related
property-value pairs.
 Notice
 the double curly braces {{ }} surrounding style‘s width and height.
 In JSX, JavaScript values are referenced with {}. This is handy if you are
passing something other than a string as props, like an array or number:
<Student names={["Muna", "Kirubel"]} age={18} />.
 However, JS objects are also denoted with curly braces: {width: 200, height:
200}. Therefore, to pass a JS object in JSX, you must wrap the object in
another pair of curly braces: {{width: 200, height: 200}}
 You can build many things with props and the Core Components (Text,
Image, and View). But to build something interactive, you’ll need state.
State
 While you can think of props as arguments you use to configure how
components render, state is like a component’s personal data storage.
 State is useful for handling data that changes over time or that comes
from user interaction.
 State gives your components memory!
 Note - As a general rule, use props to configure a component when it
renders. Use state to keep track of any component data that you
expect to change over time.
 You can add state to a component by calling React’s useState Hook.
 A Hook is a kind of function that lets you “hook into” React features.
 For example, useState is a Hook that lets you add state to function
components.
 The example here takes place in a cat
cafe where two hungry cats are waiting
to be fed.
 Their hunger, which we expect to
change over time (unlike their names),
is stored as state.
 To feed the cats, press their buttons—
which will update their state.
 First, you will want to import useState
from React.

 Then you declare the component’s

state by calling useState inside its
function. In this example, useState
creates an isHungry state variable:
 Calling useState does two things:
 it creates a “state variable” with an initial value—in this case the state
variable is isHungry and its initial value is true
 it creates a function to set that state variable’s value—setIsHungry
 It doesn’t matter what names you use. But it can be handy to think of the
pattern as
 [<getter>, <setter>] = useState(<initialValue>).
 Next you add the Button Core Component and
give it an onPress prop:
 Now, when someone presses the button,
onPress will fire, calling the
setIsHungry(false). This sets the state variable
isHungry to false.
 When isHungry is false, the Button’s disabled
prop is set to true and its title also changes:
 Although isHungry is a const, it is seemingly
reassignable! What is happening is when a
state-setting function like setIsHungry is
called, its component will re-render.
 In this case the Cat function will run again—
and this time, useState will give us the next
value of isHungry.

 Finally, put your cats inside a Cafe

component:
 See the <> and </>. These bits of JSX are
fragments. Adjacent JSX elements must be
wrapped in an enclosing tag.
 Fragments let you do that without nesting an
extra, unnecessary wrapping element like
View.
Core Component - TextInput
 TextInput allows user to enter text.
 It has an onChangeText prop that takes a function to be called every
time the text changed, and an onSubmitEditing prop that takes a
function to be called when the text is submitted.
 For example, let's say that as the user types, you're translating their
words into a different symbol.
 In the translation, every single word is written the same way: @. So
the sentence "Hello there" would be translated as “@ @”
 In this example, we store text in the state,
because it changes over time.

 There are a lot more things you might

want to do with a text input.

 For example, you could validate the text

inside while the user types.

 Text input is one of the ways the user

interacts with the app.
React Native Buttons
 Facebook offers the Button component, which can be used as a
generic button.
 Import the following
import { Button } from 'react-native'

10/10/2023
10/10/2023
 If the default Button component does not suit your needs, you can use one of
the following components instead.
 Touchable Opacity
 This element will change the opacity of an element when touched.
 Touchable Highlight
 When a user presses the element, it will get darker and the underlying color will show
through.
 Touchable Native Feedback
 This will simulate ink animation when the element is pressed.
 Touchable Without Feedback
 This should be used when you want to handle the touch event without any animation.
Usually, this component is not used much.
10/10/2023
TouchableOpacity

10/10/2023
Touchable Highlight

10/10/2023
Touchable Native Feedback

10/10/2023
Touchable Without Feedback

10/10/2023
Switch
 Renders a boolean input.
 This is a controlled component that requires an onValueChange
callback that updates the value prop in order for the component to
reflect user actions.
 If the value prop is not updated, the component will continue to
render the supplied value prop instead of the expected result of any
user actions.
Styling
 React Native style your application using JavaScript.

 All core components accept a prop named style. The style names and values
usually match how CSS works on the web, except names are written using
camel casing, e.g. backgroundColor rather than background-color.

 The style prop can be a plain old JavaScript object. That's what we usually
use for example code. You can also pass an array of styles - the last style in
the array has precedence, so you can use this to inherit styles.
 As a component grows in complexity, it is often
cleaner to use StyleSheet.create to define several
styles in one place.

 One common pattern is to make your component

accept a style prop which in turn is used to style
subcomponents. You can use this to make styles
"cascade" the way they do in CSS.

 There are a lot more ways to customize the text

style.
Styling - Height and Width
 A component's height and width determine its size on the screen.
 This can be done in three ways:
 Fixed Dimensions,
 Flex Dimensions
 Percentage Dimensions
Fixed Dimensions
 The general way to set the dimensions of a
component is by adding a fixed width and
height to style.
 All dimensions in React Native are unitless,
and represent density-independent pixels.
 Setting dimensions this way is common for
components whose size should always be
fixed to a number of points and not
calculated based on screen size.
Flex Dimensions
 Use flex in a component's style to have the
component expand and shrink dynamically based on
available space.
 Use flex: 1, which tells a component to fill all
available space, shared evenly amongst other
components with the same parent.
 The larger the flex given, the higher the ratio of
space a component will take compared to its siblings.
 Note - A component can only expand to fill available
space if its parent has dimensions greater than 0. If a
parent does not have either a fixed width and height
or flex, the parent will have dimensions of 0 and the
flex children will not be visible.
Percentage Dimensions
 If you want to fill a certain portion
of the screen, but you don't want to
use the flex layout,
 use percentage values in the
component's style.
 Similar to flex dimensions,
percentage dimensions require
parent with a defined size.
Layout with Flexbox
 A component can specify the layout of its children using the Flexbox
algorithm. Flexbox is designed to provide a consistent layout on
different screen sizes.

 You will normally use a combination of flexDirection, alignItems,

and justifyContent to achieve the right layout.
Flex
 flex will define how your items are going to “fill” over the available
space along your main axis. Space will be divided according to each
element's flex property.

 In the following example, the red, yellow, and green views are all
children in the container view that has flex: 1 set. The green view uses
flex: 1 , the yellow view uses flex: 2, and the red view uses flex: 3 .
1+2+3 = 6, which means that the green view will get 1/6 of the space,
the yellow 2/6 of the space, and the red 3/6 of the space.
 See the code and the output in the next slid.
Flex Direction
 flexDirection controls the direction in which the children of a node are laid out. This is also referred to as
the main axis. The cross axis is the axis perpendicular to the main axis, or the axis which the wrapping
lines are laid out in.

 column (default value) Align children from top to bottom. If wrapping is enabled, then the next line will start to the
right of the first item on the top of the container.

 row Align children from left to right. If wrapping is enabled, then the next line will start under the first item on the
left of the container.

 column-reverse Align children from bottom to top. If wrapping is enabled, then the next line will start to the right
of the first item on the bottom of the container.

 row-reverse Align children from right to left. If wrapping is enabled, then the next line will start under the first
item on the right of the container.
Layout Direction
 Layout direction specifies the direction in which children and text in a
hierarchy should be laid out. Layout direction also affects what edge start and
end refer to.
 By default, React Native lays out with LTR layout direction. In this mode start
refers to left and end refers to right.

 LTR (default value) Text and children are laid out from left to right. Margin and
padding applied to the start of an element are applied on the left side.

 RTL Text and children are laid out from right to left. Margin and padding applied to
the start of an element are applied on the right side.
Justify Content
 justifyContent describes how to align children within the main axis of their container. For
example, you can use this property to center a child horizontally within a container with
flexDirection set to row or vertically within a container with flexDirection set to column.

 flex-start(default value) Align children of a container to the start of the container's main axis.
 flex-end Align children of a container to the end of the container's main axis.
 center Align children of a container in the center of the container's main axis.
 space-between Evenly space off children across the container's main axis, distributing the remaining
space between the children.
 space-around Evenly space off children across the container's main axis, distributing the remaining
space around the children. Compared to space-between, using space-around will result in space being
distributed to the beginning of the first child and end of the last child.
 space-evenly Evenly distribute children within the alignment container along the main axis. The
spacing between each pair of adjacent items, the main-start edge and the first item, and the main-end
edge and the last item, are all exactly the same.
Align Items
 alignItems describes how to align children along the cross axis of their container. It is very similar
to justifyContent but instead of applying to the main axis, alignItems applies to the cross axis.

 stretch (default value) Stretch children of a container to match the height of the container's cross axis.

 flex-start Align children of a container to the start of the container's cross axis.

 flex-end Align children of a container to the end of the container's cross axis.

 center Align children of a container in the center of the container's cross axis.

 baseline Align children of a container along a common baseline. Individual children can be set to be the
reference baseline for their parents.
Align Content
 alignContent defines the distribution of lines along the cross-axis. This only has effect
when items are wrapped to multiple lines using flexWrap.

 flex-start (default value) Align wrapped lines to the start of the container's cross axis.
 flex-end Align wrapped lines to the end of the container's cross axis.
 stretch (default value when using Yoga on the web) Stretch wrapped lines to match the height of
the container's cross axis.
 center Align wrapped lines in the center of the container's cross axis.
 space-between Evenly space wrapped lines across the container's cross axis, distributing the
remaining space between the lines.
 space-around Evenly space wrapped lines across the container's cross axis, distributing the
remaining space around the lines. Compared to space-between, using space-around will result in
space being distributed to the beginning of the first line and the end of the last line.
Flex Wrap
 The flexWrap property is set on containers and it controls what
happens when children overflow the size of the container along the
main axis. By default, children are forced into a single line (which
can shrink elements). If wrapping is allowed, items are wrapped into
multiple lines along the main axis if needed.

 When wrapping lines, alignContent can be used to specify how the

lines are placed in the container.
Flex Basis, Grow, and Shrink
 flexBasis is an axis-independent way of providing the default size of an item along the main axis. Setting the flexBasis of a child is
similar to setting the width of that child if its parent is a container with flexDirection: row or setting the height of a child if its parent is
a container with flexDirection: column. The flexBasis of an item is the default size of that item, the size of the item before any
flexGrow and flexShrink calculations are performed.

 flexGrow describes how any space within a container should be distributed among its children along the main axis. After laying out its
children, a container will distribute any remaining space according to the flex grow values specified by its children.

 flexGrow accepts any floating point value >= 0, with 0 being the default value. A container will distribute any remaining space among
its children weighted by the children’s flexGrow values.

 flexShrink describes how to shrink children along the main axis in the case in which the total size of the children overflows the size of
the container on the main axis. flexShrink is very similar to flexGrow and can be thought of in the same way if any overflowing size is
considered to be negative remaining space. These two properties also work well together by allowing children to grow and shrink as
needed.

 flexShrink accepts any floating point value >= 0, with 0 being the default value (on the web, the default is 1). A container will shrink its
children weighted by the children’s flexShrink values.
Width and Height
 The width property specifies the width of an element's content area. Similarly, the height
property specifies the height of an element's content area.

 Both width and height can take the following values:

 auto (default value) React Native calculates the width/height for the element based on its
content, whether that is other children, text, or an image.

 pixels Defines the width/height in absolute pixels. Depending on other styles set on the
component, this may or may not be the final dimension of the node.

 percentage Defines the width or height in percentage of its parent's width or height, respectively.
Absolute & Relative Layout
 The position type of an element defines how it is positioned within its
parent.

 relative (default value) By default, an element is positioned relatively. This

means an element is positioned according to the normal flow of the layout, and
then offset relative to that position based on the values of top, right, bottom, and
left. The offset does not affect the position of any sibling or parent elements.

 absolute When positioned absolutely, an element doesn't take part in the normal
layout flow. It is instead laid out independent of its siblings. The position is
determined based on the top, right, bottom, and left values.