Basic App Design (Pt 1)

Students will modify existing code and run it in the browser and on their personal mobile
devices with the use of Expo, a free open-source toolchain built for running React Native apps with React and
JavaScript, create personalized apps, create digital presentations, and engage in in-person collaborative
exercises with classmates. Teachers utilize tools and resources to leverage time in the
classroom and give focused 1-on-1 attention to students.
1 Week 
 ● Introduction to React Native and Expo Example Assignments Labs 
● Introduction to React Native and Expo ○ Why build mobile apps? ○ What is React Native? ○ How is React Native structured and built? ○ What is Expo and how do React Native apps run? ○ Example activity: 
■ Running Apps on Expo Module 2: Components and the Stylesheet (2 weeks/10 hours) In this module, students are introduced to components, the backbone of building apps with React Native. They learn about the stylesheet object and how to add custom style attributes to their apps. Browse the full content of this module at https://codehs.com/library/course/3679/module/5847 Objectives / Topics Covered 
● Introduction to Components 
● Introduction to the Stylesheet API 
● Styling View Components 
2 Week 
● Styling Text Components Example Assignments / Labs 
● Introduction to Components ○ What are components? ○ How are components imported? ○ Where are components stored in editor?
 ○ How do you debug components? 
■ Customizing Text 
■ Debugging Components 
● Introduction to the Stylesheet API ○ What is the Stylesheet API?
3 week
How do you style apps? ○ How do you connect components to the Stylesheet API? ○ Example activity:
 ■ Connecting Components to the Stylesheet 
● Styling View Components 3 ○ How do you style View components? ○ How are components justified? ○ How are components aligned? ○ What is flex direction? ○ Example activity: 
■ Nested Views 
● Styling Text Components ○ How are Text components styled? ○ What are the common styling attributes for Text components? ○ Example activity: 
■ News Article Styling 
■ My Favorites Lis
4 Week
● TextInput ○ What is the TextInput component? ○ Example activity: 
■ Google Search Page 
■: Advanced Layouts and Images (3 weeks/15 hours) In this module, students learn how to add images to their apps to further customize the building experience. They gain a deeper understanding of mobile apps layouts using Flex values and the Dimensions API. Browse the full content of this module at https://codehs.com/library/course/3679/module/5851 Objectives / Topics Covered ● The Image Component 
● The ImageBackground Component ● Flex Layouts ● Dimensions API