React-Native

202
5

Seminar Report
On
“Wearable Technologies”
In partial fulfillment for the award of the degree
Of
BACHELOR OF COMPUTER APPLICATION
[B.C.A]
Year 2024-2025

SUBMITTED BY: GUIDED BY:

Ayushi A. Padmani Prof. Rekha Picholiya
Roll No: 339
BCA-6th SEMESTER
Submitted to:

SHRI SHAMBHUBHAI V. PATEL COLLEGE OF

COMPUTER SCIENCE & BUSINESS
MANAGEMENT
Affiliated to

1
 React-Native
202
5

Veer Narmad South Gujarat University

Index

Sr.No Topics Page No

1 History
2 Introduction
3 Topic Detail
4 Topic Example
5 Topic Application
6 Topic Diagrams or figures
7 Topic related comparative technology/Comparative
charts/tables
8 Advantages & Disadvantages
9 Enhancement of Topic/ Future enhancement
10 Conclusion
11 References

History

Wearable technology has evolved over centuries, starting with simple mechanical devices and
advancing to today's smart, connected wearables. Below is a timeline of key milestones in
wearable computing history:

Let’s break it down:

 16th Century – Abacus Ring: The Chinese developed a small, wearable abacus in
the form of a ring for simple calculations.
 17th Century – Pocket Watches: These were among the first widespread personal
wearables, evolving into wristwatches in the early 20th century..
 1907 – First Wristwatch: The transition from pocket watches to wristwatches gained
popularity.
 1999 – First Smart Glasses (WearCam by Steve Mann): Early experiments in
augmented reality and personal wearable cameras.
 2004 – GoPro: The first wearable action camera launched, revolutionizing sports and
adventure videography.

2
 React-Native
202
5
 2020 – COVID-19 and Wearables: Fitness trackers and smartwatches were used to
detect early signs of illness, such as changes in heart rate and oxygen levels..
 2021 – Smart Rings (Oura Ring): Compact wearables with biometric sensors gained
popularity.
 2023 – Apple Vision Pro Announced: A high-end AR/VR headset showcasing the
next step in wearable computing.

Introduction

 Wearable technology, like smartwatches and fitness trackers, has become a popular
part of daily life. These devices are designed to be worn on the body and use
advanced sensors to collect data. Smartwatches can track time, monitor health, and
connect to smartphones, while fitness trackers focus on activities like steps, heart rate,
and sleep patterns. They work by using small sensors, Bluetooth, and apps to measure
and share information, helping people stay connected and improve their health. This
technology combines convenience and innovation, making it easy to use and helpful
for everyday life.

Topic Detail

📘 What is wearable computing?

Wearable computing refers to small, portable electronic devices that are worn on the body
and provide computing capabilities. These devices often include sensors, wireless
connectivity, AI-powered functions, and real-time data processing. They can work
independently or sync with other devices like smartphones and cloud networks..

Wearable computing Device:

 Smartwatches: rack fitness, monitor health, and provide notifications (e.g., Apple
Watch, Samsung Galaxy Watch).
 Fitness Trackers: Measure steps, heart rate, and sleep patterns (e.g., Fitbit, Garmin).
 Smart Glasses: Offer augmented reality (AR) and hands-free access to information
(e.g., Google Glass, Microsoft HoloLens).
 Smart Clothing:  Integrate sensors into fabric for movement and biometric
tracking.

Applications of Wearable Computing:

3
 React-Native
202
5
 Health & Fitness: Heart rate monitoring, sleep tracking, step counting

 Augmented & Virtual Reality: Enhanced gaming, training simulations, remote work
collaboration.
 Healthcare & Medical Monitoring: Detecting early disease symptoms, assisting in
patient recovery.
 Communication & Productivity: Hands-free calls, AI assistants, real-time
translatios.

📲 Development Workflow:
1. Setup the Environment: Install Node.js, React Native CLI, and either Xcode (iOS)
or Android Studio (Android).
2. Build the UI: Use components like <View>, <Text>, <Button>, and more.
3. Handle State & Logic: Use React’s hooks (useState, useEffect) or libraries like
Redux or Zustand.
4. Style the App: Use a CSS-like syntax with StyleSheet or libraries like Tailwind RN.
5. Test & Debug: Use tools like React Native Debugger or Flipper.

🧩 Core Components:
React Native comes with a set of pre-built components:

 Basic UI Elements: <View>, <Text>, <Image>, <ScrollView>

 Interactive Elements: <Button>, <TextInput>, <Switch>
 Navigation: Libraries like React Navigation handle screens, stacks, and tabs.
 Animations: Libraries like Reanimated or the built-in Animated API help create
smooth animations.

⚡ Popular Libraries:
 Expo: Simplifies development with an easy setup and access to native APIs.
 React Navigation: For handling app navigation (stacks, tabs, drawers).
 Firebase: Backend-as-a-Service for authentication, databases, and more (perfect for
Wordbox!).
 Reanimated: For advanced, high-performance animations.
 Axios / React Query: For handling API requests and data fetching.

4
 React-Native
202
5

🚀 Advantages:
 Faster Development: One codebase, two platforms.
 Large Community: Tons of tutorials, libraries, and community support.
 Cost-Effective: No need for separate teams for iOS and Android.
 Flexibility: Add native code if needed or mix with existing native apps.

⚠️Challenges:
 Performance Limitations: Not always as fast as fully native apps (but improving
with Fabric!).
 Platform-Specific Code: You might still need custom logic for iOS vs Android.
 Dependency Management: Relying on third-party libraries can sometimes lead to
compatibility issues.

Topic Example

import React, { useState } from 'react';

import { View, Text, TextInput, Button, StyleSheet } from 'react-native';

const App = () => {

const [name, setName] = useState('');
const [greeting, setGreeting] = useState('');

const handleGreet = () => {

setGreeting(`Welcome to Wordbox, ${name}! 🎉`);
};

return (
<View style={styles.container}>
<Text style={styles.title}>Hello, Wordbox Player!</Text>
<TextInput

5
 React-Native
202
5
style={styles.input}
placeholder="Enter your name"
onChangeText={(text) => setName(text)}
/>
<Button title="Join Game" onPress={handleGreet} />
{greeting !== '' && <Text style={styles.greeting}>{greeting}</Text>}
</View>
);
};

const styles = StyleSheet.create({

container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#f5f5f5',
},
title: {
fontSize: 24,
fontWeight: 'bold',
marginBottom: 20,
},
input: {
width: 300,
padding: 10,
borderWidth: 1,
borderColor: '#ccc',
borderRadius: 8,

6
 React-Native
202
5
marginBottom: 20,
},
greeting: {
marginTop: 20,
fontSize: 20,
color: '#6200ea',
},
});

export default App;

7
 React-Native
202
5

Topic Application

 Cross-Platform Mobile Apps:

 Build once, run on both iOS and Android.

 Perfect for apps that need to reach a broad audience without maintaining two separate
codebases.

 Real-Time Games & Multiplayer Apps:

 Use Firebase for real-time databases and user authentication.

 Handle real-time gameplay with libraries like Socket.io or Firebase Firestore.

 Interactive UI & Animations:

8
 React-Native
202
5
 Smooth, native-like animations with Reanimated or the Animated API.
 Dynamic game effects (e.g., letters bouncing, confetti on victory) for an engaging
experience.

 Push Notifications & In-App Messaging:

 Firebase Cloud Messaging (FCM) for notifications (e.g., "Your turn in Wordbox!").
 React Native In-App Messaging for alerts or updates within the app.

Topic Diagrams of Figures

Let’s do the React Native Navigation Flow next! This will show how screens are connected
using something like React Navigation.

9
 React-Native
202
5

Here’s the React Native navigation flow diagram! It shows how users move between screens
with stack, tab, and drawer navigation.

Topic related comparative technology/Comparative charts/tables

10
 React-Native
202
5

Feature React Native Flutter

Language JavaScript + React Dart

UI Rendering Native components Skia (Custom UI

engine)

Performance Near-native (depends High (compiles to

on bridge) native ARM code)

Development Fast (Hot Reload, Fast (Hot Reload,

large ecosystem) growing ecosystem)
Speed

Code ~90% (iOS & ~90% (iOS &

Android) Android)
Reusability

Ecosystem & Huge (NPM, Expo, Growing (Flutter

third-party libraries) packages)
Libraries

Learning Moderate (if you Moderate (need to

know JS/React) learn Dart)
Curve

Community & Massive (Facebook, Rapidly growing

huge community) (Google-backed)
Support

Best For Cross-platform apps High-performance

with native feel apps, complex UIs

Advantages & Disadvantages

🟩 Advantages of React Native:

11
 React-Native
202
5
1. Cross-Platform Development:
o One codebase for both iOS and Android saves time and resources.
2. Fast Development with Hot Reloading:
o Instantly see code changes without rebuilding the entire app — boosts
productivity!
3. Native-Like Performance:
o Uses native components, so the app feels and performs close to a fully native
app.
4. Large Ecosystem & Community:
o Tons of ready-to-use libraries, tools, and community support (e.g., React
Navigation, Reanimated).
5. JavaScript & React Knowledge Reuse:
o If you know React.js, transitioning to React Native is straightforward.
6. Third-Party Plugin Support:
o Easily access device features (camera, GPS, etc.) via plugins, avoiding the
need for native code in many cases.
7. Cost-Effective:
o Reduces development costs by eliminating the need for separate native teams.

🟥 Disadvantages of React Native:

1. Performance Limitations:
o For very heavy animations or complex games, performance may not match
fully native apps (though Fabric and Reanimated help a lot).
2. Dependency on Native Modules:
o Some features (like AR or Bluetooth) may still require writing native code in
Swift or Kotlin.
3. Compatibility & Library Maintenance:
o Not all third-party libraries are actively maintained, which can lead to
compatibility issues.
4. Large App Size:
o React Native apps can be larger in file size compared to pure native apps.

Enhancement of Topic/Future enhancement

1. New Architecture (Fabric & TurboModules):

o Fabric improves rendering performance with a more efficient communication
layer.
o TurboModules speed up native module access, reducing the JS-to-native
bridge bottleneck.
2. Web & Desktop Support:

12
 React-Native
202
5
o React Native already supports web through React Native Web and
experimental desktop support (Windows, macOS).

3. AI & Machine Learning Integration:

o Easier integration with libraries like TensorFlow.js or ONNX for on-device
ML.
4. AR & VR Capabilities:
o Better support for AR/VR through libraries like ViroReact.
5. Improved Dev Tools & Debugging:
o Enhanced React DevTools and more powerful debugging tools.
6. Performance Optimization Tools:
o More built-in tools to analyze and optimize app speed and memory usage.

Conclusion

Conclusion: The Power and Promise of React Native

React Native has revolutionized mobile app development by allowing developers to build
cross-platform applications using a single JavaScript codebase. With its ability to render
native components, support for fast iterations through Hot Reloading, and access to native
device features, it strikes an excellent balance between performance and development speed.

Key takeaways:

 Efficiency & Cost-Effectiveness: One codebase for both iOS and Android reduces
development time and expenses.
 Native-Like Experience: Apps built with React Native can deliver a smooth,
responsive experience that feels truly native.
 Vast Ecosystem & Community Support: A massive library of third-party packages
and an active community make it easy to find solutions and add features.
 Continuous Evolution: With ongoing enhancements like Fabric, TurboModules,
and growing support for web and desktop platforms, React Native is poised to become
even more powerful.

Despite some limitations, especially for performance-heavy apps, React Native's rapid
evolution and flexibility make it a compelling choice for startups, enterprises, and indie
developers alike. It bridges the gap between web and mobile development, empowering
teams to build high-quality apps faster than ever before.

References
13
 React-Native
202
5

Official Documentation & Guides:

 React Native Docs: reactnative.dev

o The official site — covers everything from setup to advanced features.
 React Navigation: reactnavigation.org
o The go-to library for handling screen navigation in React Native apps.
 Expo: expo.dev
o A framework that simplifies development and deployment with React Native.

Community & Learning Platforms:

 GitHub Repository: facebook/react-native

o The source code and issue tracker — great for understanding the core
framework.
 React Native Blog: blog.reactnative.dev
o Official announcements, new features, and detailed updates.
 Stack Overflow (React Native Tag): stackoverflow.com
o Community Q&A for troubleshooting and best practices.
 Dev.to & Medium:
o Blogs with tutorials, case studies, and real-world project insights.

📘 Learning & Tutorials:

 FreeCodeCamp: freecodecamp.org
o Hands-on tutorials and coding exercises for React Native.
 YouTube Channels:
o Academind, The Net Ninja, and Traversy Media — great for step-by-step
video guides.

14