Scribd
Upload
5 views3 pages

Tutorial 09

The document outlines a tutorial for building a simplified version of the TikTok app, focusing on the Home and Profile screens using Expo Router or React Navigation. Students are required to implement image scrolling on the Home screen and display user information on the Profile screen, utilizing provided mock data and assets. Key implementation details include ensuring responsive UI, seamless screen transitions, and using reusable components for clean code.

Uploaded by

Yen Nguyen
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
5 views3 pages

Tutorial 09

The document outlines a tutorial for building a simplified version of the TikTok app, focusing on the Home and Profile screens using Expo Router or React Navigation. Students are required to implement image scrolling on the Home screen and display user information on the Profile screen, utilizing provided mock data and assets. Key implementation details include ensuring responsive UI, seamless screen transitions, and using reusable components for clean code.

Uploaded by

Yen Nguyen
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

MOBILE PROGRAMMING

Tutorial 09

Activity 01: Build a Simplified TikTok App


Objective:

In this exercise, students will develop a simplified version of the TikTok app,
focusing on navigation functionality using Expo Router or React Navigation.

Requirements:

• Only implement the Home screen (image scrolling instead of videos) and
Profile screen as shown in the provided design.

• No need to build other screens such as Inbox or Inbox Details.

• Use provided mockData below and the given image files in the
[Link] file.

Implementation Details:

• Home Screen: Displays a feed of images (instead of videos) that users can
scroll through.

• Profile Screen: Shows user information, profile picture, number of posts,


followers, etc.

• Use React Navigation to enable seamless screen transitions.

• Utilize reusable components to keep the code clean and efficient.

• Ensure responsive UI that adapts to different devices and screen


orientations.
const mockData = [
{
id: "1",
user: "john_doe",
avatar: require("../assets/[Link]"),
image: require("../assets/[Link]"),
caption: "Amazing view! #nature",
likes: 120,
comments: 45,
},
{
id: "2",
user: "alice_wonder",
avatar: require("../assets/[Link]"),
image: require("../assets/[Link]"),
caption: "City vibes! ",
likes: 98,
comments: 30,
},
{
id: "3",
user: "mark_travel",
avatar: require("../assets/[Link]"),
image: require("../assets/[Link]"),
caption: "Lost in the mountains! ",
likes: 220,
comments: 75,
},
];

You might also like