0% found this document useful (0 votes)
31 views

Mobile Lab

The document lists 8 experiments for developing mobile applications using React Native. The experiments include creating a login page, validation forms, a digital clock, book store, camera, music player, college admission registration applications and a mini project.

Uploaded by

Samuel Carr
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
31 views

Mobile Lab

The document lists 8 experiments for developing mobile applications using React Native. The experiments include creating a login page, validation forms, a digital clock, book store, camera, music player, college admission registration applications and a mini project.

Uploaded by

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

LIST OF EXPERIMENTS

1--LOGIN PAGE AND NOTIFICATION GENERATION

1. Create a Login Page in a mobile application using React Native


2. Generate a notification when the particular location reached
II--VALIDATION AND NAVIGATION
1. Write code to design a feedback form of an event and perform validation
2. Design two pages with proper navigation mechanisms such as link, button,
menu etc..,

III--DIGITAL CLOCK

1. Develop a DIGITAL CLOCK Mobile Application using React Native


2. Toggle between Dark and Light mode
3. Implement the popup mechanism in your application
4. Add a timer feature in your application

IV-- BOOK STORE APPLICATION


1. Develop a BOOK STORE mobile application to enter the Name of the book
and ISBN number and click on for AddBook.
2. Using the React components Click on Show Books to view the contents added so far
3. Implement Stack navigation in your application using React Native.

V--CAMERA ENABLED APPLICATION


1. Implement a camera enabled application for capturing video or image.
2. Add animation to your application.
VI--MUSIC PLAYER APPLICATION
1. Develop a MUSIC PLAYER Mobile Application using React Native
2. Toggle between Dark and Light mode
3. Create a Drawer Navigation for your application
4. Use your preferred API to get music lists

VII-- COLLEGE ADMISSION REGISTRATION

1. Develop a COLLEGE ADMISSION REGISTRATION portal using React Native


2. Create a Tab-Based Navigation for your application
3. Implement file-uploading feature
4. Add animations to your application
VIII--MINI PROJECT
Form a team of 2
 Persons pick up a societal, business problem as per the design implementation and
test the problem. Upload the basic version of the application in Play store.

DESCRIPTION OF THE EXPERIMENTS


1. LOGIN PAGE AND NOTIFICATION GENERATION

Create a Login Page in a mobile application using React Native and Generate notification to
the user when the particular location was reached

Outcome to be achieved
1. Login form with an email, password, and button fields
2. Set a background image
3. On clicking the button, it would evoke a modal/alert box returning some message.
4. Generate the notification immediately when the user’s location is retrieved
5. Familiar to creating login page in mobile app
6. Well understand about React components
7. Identify the necessary tools for implementing the task
8. Write a technical report on the process of developing the pages
2. VALIDATION AND NAVIGATION

In this experiment write the code to design a feedback form of an event and perform
validation. And Design two pages with proper navigation
mechanisms such as link, button, menu etc..,
Outcome to be achieverd

1. Create a feedback form with the following fields – Name, Email, Course, Rate your
learning experience.
 Name – Text input
 Email – Text input & Email validation
 Course – Dropdown
 Rate your learning experience – Linear scale
2. Event handling
 OnSubmit: Validate the form data before submitting to ensure all required fields
are filled and correct data is entered.
 OnPress: Handle the event when the user clicks a "Clear" button to reset the form
fields.
3. Implement Stack Navigation. You can use the back button on your device or the back
button provided by the navigation header to go back to the previous screen.

3. DIGITAL CLOCK

In this experiment Develop a DIGITAL CLOCK Mobile Application using React Native.

Outcome to be achieved

1. Display Current Time:


 Show the current time in hours, minutes, and seconds format.
 Update the time in real-time, refreshing every second.
2. Dark and Light theme
3. Creating a timer with popup features in a React Native app involves using components like
Modal to display the popup and handling state and timers to manage the countdown.
4. Develop a DIGITAL CLOCK Mobile Application using React Native
5. Toggle between Dark and Light mode
6. Implement the popup mechanism in your application
7. Add a timer feature in your application

4. BOOK STORE APPLICATION

Develop a BOOK STORE Mobile application to enter the Name of the book and ISBN
number and click on for AddBook. Using the React components Click on Show Books
to view the contents added so far implement Stack navigation in your application using
React Native.
Outcome to be achieved

1. Creating a book store mobile app with React Native and implementing stack navigation
involves setting up a basic app structure with two screens: one for adding books and another
for viewing the list of books.
2. Using Stack Navigation and AsyncStorage to create a simple book store mobile app

5. CAMERA ENABLED APPLICATION


Implement a camera enabled application for capturing video or image. And add animation to
you application.

Outcome to be viewed

1. Create a screen where users can capture videos and images using the device's camera.
2. When you capture an image, it will apply some filter to the image and display it with a
fadeIn animation
6. MUSIC PLAYER APPLICATION

Develop a MUSIC PLAYER Mobile Application using React Native. And toggle between dark
and light mode in the screen. Also implement the drawer navigation for this application and then
use your preferred API to get music lists.

Outcome to be viewed

1. Creating a music player using React with drawer navigation


2. Displaying music from APIs involves using React Navigation for navigation and fetching
music data from an API.
3. We'll use the iTunes Search API to fetch music tracks.

7. COLLEGE ADMISSION REGISTRATION

Develop a COLLEGE ADMISSION REGISTRATION portal using React Native. Create a Tab-
Based Navigation for your application and also implement the file uploading feature. Add
animations to your application.

Outcome to be viewed

1. Tab-based navigation for easy switching between different screens.


2. Custom bottom tab bar with animations to enhance user experience.
3. File upload feature to allow applicants to submit necessary documents.
4. Admission form with necessary fields
5. On submit the form, perform validation
6. Transitions and animations to be applied.
VIII--MINI PROJECT
Form a team of 2
 Persons pick up a societal, business problem as per the design implementation and
test the problem. Upload the basic version of the application in Play store.

Experiements to be completed within the date


1. LOGIN PAGE & NOTIFICATION CREATION - (24/07/23&25/07/23)

2. VALIDATION AND NAVIGATION - (31/07/23&01/08/23)


3. DIGITAL CLOCK - (07/08/23&08/08/23)

4. BOOK STORE APPLICATION - (14/08/23&15/08/23)


5.CAMERA ENABLED APPLICATION- (21/08/23&22/08/23)
6. MUSIC PLAYER APPLICATION - (28/08/23&29/08/23)
7. WIFI ENABLED APPLICATION - (04/09/23&05/09/23)
8. COLLEGE ADMISSION REGISTRATION - (11/09/23&12/09/23)
8. MINI PROJECT
- (18/09/23&19/09/23),(25/09/23&26/09/23), 02/10/23&03/10/23)

You might also like