KGiSL Institute of Technology

(Approved by AICTE, New Delhi; Affiliated to Anna University, Chennai)

Recognized by UGC, Accredited by NBA (IT)
365, KGiSL Campus, Thudiyalur Road, Saravanampatti, Coimbatore – 641035.

Department of Computer Science and Engineering

Name of the Faculty : Ms.Suriya.A

Subject Name & Code : APP DEVELOPMENT & CCS332

Branch & Department : Computer Science and Engineering

Year & Semester : III / VI

Academic Year :2024-25

Prerequisites

• Basic programming skills and knowledge of web technologies (HTML, CSS,

JavaScript).

• Familiarity with mobile platforms (Android/iOS) and object-oriented

programming concepts.

CCS332/AD/III CSE/VI SEM/KG-KiTE

Syllabus

UNIT II NATIVE APP DEVELOPMENT USING JAVA

Native Web App, Benefits of Native App, Scenarios to create Native App, Tools for creating

Native App, Cons of Native App, Popular Native App Development Frameworks, Java &

Kotlin for Android, Swift & Objective-C for iOS, Basics of React Native, Native

Components, JSX, State, Props

CCS332/AD/III CSE/VI SEM/KG-KiTE

Course Outcome

CO2: Use Java for creating Web and Mobile application-K3

CCS332/AD/III CSE/VI SEM/KG-KiTE

 TOPIC

Basics of React Native

CCS332/AD/III CSE/VI SEM/KG-KiTE

Basics of React Native

React Native is a popular open-source framework for building cross-platform

mobile apps. It allows developers to use the same codebase written in JavaScript
and React to create native apps for both iOS and Android platforms.

1.JavaScript and React: React Native apps are built using JavaScript, a widely
used programming language for web development. React Native uses the React
library, which allows developers to create reusable user interface components.
React follows a declarative approach, where developers define how the app should
look and behave based on the state of the application.
CCS332/AD/III CSE/VI SEM/KG-KiTE
Basics of React Native

2.Components: In React Native, the user interface is composed of reusable

components. Components are small, self-contained building blocks that encapsulate
UI elements and logic. Developers can create their custom components or use pre-
built components provided by the React Native library or community.

3.Cross-Platform: One of the key advantages of React Native is its ability to develop
cross platform apps. This means you can write a single codebase and deploy it on both
iOS and Android platforms, reducing development time and effort.

CCS332/AD/III CSE/VI SEM/KG-KiTE

Basics of React Native
4.Native Modules: Although the majority of the app is written in JavaScript, there
are cases where developers may need access to native features and functionalities
that are not available in React Native. In such cases, React Native allows
developers to write native modules in Swift, Objective-C, Java, or Kotlin and
expose them to the JavaScript layer.

5.Hot Reloading: React Native supports hot reloading, allowing developers to see
the changes they make in the code immediately reflected in the running app,
without the need to recompile the entire project. This makes the development
process faster and more efficient.
CCS332/AD/III CSE/VI SEM/KG-KiTE
Basics of React Native

6.Styling: React Native uses a style system similar to CSS for styling
components. Developers can use Flexbox layout to create responsive and
flexible UIs that adapt to different screen sizes and orientations.

7.Community and Libraries: React Native has a vibrant and active

community, which has contributed to an extensive collection of third-party
libraries and plugins. These libraries help extend the functionality of React
Native apps and make it easier to integrate with various services and features.

CCS332/AD/III CSE/VI SEM/KG-KiTE

Basics of React Native

8.Performance: While React Native provides a near-native experience, it might

not achieve the same level of performance as fully native apps, especially for
complex and graphics intensive applications. However, efforts have been made to
optimize the framework for better performance.

Overall, React Native is a powerful tool for building cross-platform mobile apps,
especially for projects that prioritize code reusability and quick development
cycles. Its strong community support and active development make it an attractive
choice for many developers and businesses.
CCS332/AD/III CSE/VI SEM/KG-KiTE
 Native Components

Native components in the context of React Native refer to UI elements that are
rendered using native platform-specific views. These components allow
developers to build user interfaces that look and feel like native apps on iOS
and Android. React Native bridges JavaScript code with the native platform's
components to provide a seamless and performant user experience.

CCS332/AD/III CSE/VI SEM/KG-KiTE

 Native Components
Some examples of native components in React Native include:
1.View: The <View> component is similar to a <div> in web development. It is
a container used to group and layout other components and does not render any
visual output itself.
2.Text: The <Text> component is used for displaying text content. It renders text
in a platform-specific manner, taking into account the platform's fonts and text
rendering features.
3.Image: The <Image> component is used for displaying images. It loads and
displays images efficiently using the native platform's image handling capabilities.

CCS332/AD/III CSE/VI SEM/KG-KiTE

 Native Components

4.ScrollView: The <ScrollView> component provides a scrollable view,

enabling users to scroll through a list or content that exceeds the screen's height.

5. TextInput: The <TextInput> component is used for capturing user input. It

provides a native input field where users can enter text.

6. Button: The <Button> component is used for creating buttons that trigger
actions

when pressed. It is styled as a platform-specific button.

CCS332/AD/III CSE/VI SEM/KG-KiTE
 Native Components

7.StatusBar: The <StatusBar> component allows developers to customize the

status bar (the area displaying time, battery, and other indicators) on the
device's screen.

8.Touchable Components: React Native provides various touchable

components like <TouchableOpacity>, <TouchableHighlight> and
<TouchableWithoutFeedback> allowing developers to add touch interaction to
elements.

CCS332/AD/III CSE/VI SEM/KG-KiTE

 Native Components

The key advantage of using native components is that they provide a more authentic
native look and feel, as they leverage the native platform's UI elements. React Native
bridges the gap between JavaScript and the native platform, ensuring that the app's UI
components are rendered natively, resulting in better performance and user experience.

By using these native components, React Native developers can build apps that are
visually consistent with native apps on both iOS and Android, making the
development process efficient and enabling code reuse across different platforms

CCS332/AD/III CSE/VI SEM/KG-KiTE

 JSX

JSX (JavaScript XML) is a syntax extension for JavaScript that allows developers to
write HTML-like code within JavaScript. It is commonly used with libraries and
frameworks like React and React Native to define the structure of user interfaces. JSX
provides a more concise and readable way to create UI components compared to
manually manipulating the DOM in JavaScript.

In JSX, you can write HTML-like elements directly in your JavaScript code.

For example:

CCS332/AD/III CSE/VI SEM/KG-KiTE

 JSX

import React from 'react'; <html>

<body>
import ReactDOM from 'react-dom'; <h1>Hello World</h1>
<p>This is a paragraph.</p>
</body>
const App = () => { </html>

const element = <div>Hello, JSX!</div>;

Document
return element;
├── <html>
}; ├── <body>
├── <h1> Hello World </h1>
├── <p> This is a paragraph. </p>

ReactDOM.render(<App />, document.getElementById('root'));

CCS332/AD/III CSE/VI SEM/KG-KiTE

 JSX

In the above example, We are defining a JSX element with a tag containing the text "Hello, JSX!". This JSX
code will be transformed into equivalent JavaScript code by a transpiler (like Babel) before it's executed in the
browser or on a mobile device.

JSX elements can also include attributes and support JavaScript expressions within curly braces . For instance:

const name = "John"; const element = <div>Hello, {name}!</div>;

In this example, the name variable is used within the JSX expression to display dynamic content. JSX makes it
easier for developers to express the UI components in a more declarative manner, similar to how they would
describe the desired UI structure in HTML. Under the hood, JSX gets transpiled to JavaScript function calls
that create React elements, which are then rendered to the DOM or native components by React or React
Native respectively.

CCS332/AD/III CSE/VI SEM/KG-KiTE

 JSX

JSX is not mandatory when using React or React Native, but it's widely adopted due to
its readability and ease of use. Developers can write the equivalent JavaScript code
without JSX, but using JSX makes the code more expressive and easier to understand,
especially for UI-intensive applications.

CCS332/AD/III CSE/VI SEM/KG-KiTE

 JSX States

In React (and React Native), states refer to the dynamic data that can change during
the lifetime of a component.

In JSX, you can use states to manage and update the content of your components,
allowing them to respond to user interactions or changes in the application's data.

To use states in a React or React Native component, you typically follow these steps:
1. Initialize State: You define the initial state of your component within its
constructor or using the useState hook (in functional components). The state is usually
defined as an object containing key-value pairs representing different data elements.
CCS332/AD/III CSE/VI SEM/KG-KiTE
JSX States

Example using a class component:

message: 'Hello, World!',
import React, { Component } from 'react';
};
class MyComponent extends Component {
}
constructor(props) {
// ...
super(props);
}
this.state = {

counter: 0,

CCS332/AD/III CSE/VI SEM/KG-KiTE

 JSX States
Example using a functional component with
return (
the useState hook:
<div>
import React, { useState } from 'react’;
<p>Count: {count}</p>
function Counter() {
<button onClick={() => setCount(count +
// useState(0) initializes the counter to 0
1)}>Increment</button>
// and returns an array: [the current value,
</div>
a function to update it]
);
const [count, setCount] = useState(0);
}
CCS332/AD/III CSE/VI SEM/KG-KiTE
 JSX States
2. Update State: To update the state, you
use the method (in class components) or
the state setter function (in functional
components).

Example using a class component:

CCS332/AD/III CSE/VI SEM/KG-KiTE

JSX States
Example using a functional component with the useState hook:

CCS332/AD/III CSE/VI SEM/KG-KiTE

 JSX States

When the state is updated, React will automatically re-render the component and
update parts of the JSX that depend on the changed state. This allows you to build
interactive and dynamic UI components that respond to user actions or data changes.
States are an essential concept in React and React Native development, enabling
developers to create powerful and reactive user interfaces.

CCS332/AD/III CSE/VI SEM/KG-KiTE

 Props of JSX

JSX, "props" (short for "properties") are a way to pass data from a parent component
to a child component. They allow you to customize and configure child components by
providing them with specific values or functions. When you use JSX, you can pass
props to a component by adding attributes to the JSX element. These attributes are
then accessible within the child component as properties. Here's how you can pass
props to a child component in JSX: ParentComponent.jsx:

CCS332/AD/III CSE/VI SEM/KG-KiTE

Props of JSX

CCS332/AD/III CSE/VI SEM/KG-KiTE

Props of JSX
ChildComponent.jsx:
import React from 'react';
function ChildComponent(props) {
// Access the props inside the ChildComponent
return (
<div>
<p>Name: {props.name}</p>

CCS332/AD/III CSE/VI SEM/KG-KiTE