LabActivity3

Laboratory Activity #3: Button, TextInput, and List

Objective

At the end of this topic, students are expected to:

1. Understand the basic usage of states and props.
2. Accept user input using TextInput.
3. Use the Button to perform an action.
4. Display a list of text objects.
5. Gain knowledge regarding the basics of React Native.

---

Instructions

1. Application Features

• Create a React Native application that accepts user input in a TextInput field.
• When the ADD button is pressed:
  • The entered text will be displayed below in a list format.
  • The TextInput field will be cleared after adding the item.

---

2. Layout and Design

• In your App.js, design your app similar to the sample output shown below.
• Set the placeholder of the TextInput component to: Enter Item
• Explore and make your own design:
• You may change colors, fonts, layout, and button styles.
• Make your app creative and personalized.

---

3. GitHub Submission

1. Create a branch named: Surname_lab3-branch
2. Upload your React Native code files to this branch.
3. Add a tag named: Laboratory3 to mark your first version of the code.
4. Attach a screenshot of your output in the repository:

• File name format:

  Surname_Lab3_Output1.png
  

  or

  Surname_Lab3_Output.pdf
  

5. Include the screenshot of your output in the repository.

---

4. Google Classroom Submission

Submit the following through a private comment in Google Classroom:

• GitHub repository link (with branch and tag)
• Snack Expo project link
• Lab Manual (PDF or DOCX) with attached screenshot of the output

---

Sample Output

Theme: List of Clothing Brands

App Title: My Favorite Clothing Brands

Description:
A simple React Native app where the user can add their favorite clothing brands to a list.

---

Note: You can create your own theme and personalize the interface based on your preference.

---

Technologies Used

• React Native
• Expo Snack
• JavaScript / JSX

---

**Prepared By: **

Hernz N. Ramones
Laboratory 3: DCIT 26 – Application Development and Emerging Technologies