Build a React Native app with Claude AI
64 sections - 14 hours of video
Add to favorites
Notify me
This comprehensive course explores the integration of cutting-edge AI tools into the React Native development workflow, revolutionizing the approach to mobile application creation. Participants will learn to leverage AI-powered platforms such as Claude and Locofy to expedite coding processes, enhance problem-solving capabilities, and optimize productivity.
Taught by Vanh Roeung
Purchase includes access to 50+ courses, 320+ premium tutorials, 300+ hours of videos, source files and certificates.
64 topics
All techniques are explained step-by-step, in a beginner-friendly format so that you can easily follow in a cohesive way.
1
Introduction
Discover the power of Locofy and Claude Sonnet 3.5 in building dynamic React Native apps.
3:37
2
Mastering Responsiveness in Figma
Understanding the Basics of Responsive Design
11:14
3
Design to Code with Locofy
Design to Code Made Easy with Locofy
10:55
4
Using Git for Version Control
Introduction to Git: Essential Version Control Techniques
12:57
5
Integrating Claude AI into Your Workflow
Optimizing Your Workflow with Claude AI and VS Code
18:33
6
Mastering Reanimated: A Step-by-Step Guide to Animation
The Ultimate Step-by-Step Guide to Reanimated Animations
15:59
7
Introduction to Cursor: The AI-Powered Code Editor
Explore Cursor: a next-gen code editor with AI integration, context-aware code suggestions, Git control, and real-time project assistance
15:04
8
How to Implement a Figma Prototype: Step-by-Step Guide
Best Practices for Implementing Figma Prototypes
10:16
9
Creating a Smooth Entrance Animation
Step-by-Step Guide to React Native Entrance Animations
10:32
10
Understanding Screen Navigation Structure
Mastering React Native Screen Navigation: Best Practices
10:34
11
Implementing Navigation and Animations
Step-by-Step Navigation and Animations in React Native
10:11
12
Navigation and Component Architecture
Understanding Navigation and Component Architecture in UI Design
10:17
13
Handling Back Navigation and Parameter Passing
Managing Screen State and Transitions
11:09
14
Introduction to Interaction Design with Animated Menus
The Role of Animation in Enhancing User Interaction
10:43
15
Handling User Interaction and Animations
Deep Dive into RightMenu Component’s Animation and Interaction Logic
9:13
16
Modal’s Components and Linear Gradient
Exploring the Mode Component Functionality
11:11
17
Using State and Coordinates to Control Animations
Animating Background Transitions Based on State Changes
10:13
18
Implementing Mode Switch Animation and Gradient Effects
Understanding the return Structure and LinearGradient's Properties
9:33
19
How the AnimatedText Component Uses Animation for Mode Switching
Overview of the AnimatedText Component's Functionality and Props
11:10
20
How to Develop a Toggleable Defrost Component with Animation
Implementing State Management and textStyle for Dynamic UI
11:52
21
Building a Custom Segmented Control for Fan Settings
Handling User Interaction with Pressable
10:29
22
Understanding the TemperatureControl Component Structure
How Event Handlers Manage Temperature State Changes
12:59
23
How TemperatureSetting Manages State and Interacts with Parent Components
Handling Temperature Changes via Callbacks
12:26
24
Implementing Animated Temperature Presets
Handling User Interaction with Callback Functions
12:27
25
Introduction to React Native Gesture Handler and RootView Setup
Understanding the Role of GestureHandlerRootView
11:38
26
Building an Interactive Modal: Drag Gestures and Smooth Animations
Using onLayout to Dynamically Capture Element Heights
12:50
27
Accurate Layout and Gesture Control
Best Practices for Handling Margins and Spacing in Modal Components
17:15
28
Enhancing Temperature Control with Gesture-Based Interactions
Using useRef and useState to Manage State and Animation
9:54
29
Gesture Animations and State Synchronization
Designing Responsive Gesture Handlers with Pressable
19:53
30
Enhancing UI with Pinch Gesture and Temperature Features
Real-Time Scaling with Pinch Gesture Implementation
11:42
31
Implementing Persistent Temperature Tracking with React Context
Leveraging AsyncStorage for Data Persistence in React Native
18:07
32
Managing Initial Data Load with AsyncStorage
Fetching and Parsing Data from AsyncStorage
11:12
33
Creating Realistic Test Data with the generateDummyData Function
Understanding the Purpose of Dummy Data in Application Testing
23:17
34
Implementing Temperature State Management in React
Optimizing State Updates Using useCallback
18:18
35
Optimizing UI Architecture Through Context and Refactoring
Optimizing UI Architecture Through Context and Refactoring
11:51
36
Implementing the NavigationBar Component with Drawer Animation
Managing Drawer Visibility with openDrawer and closeDrawer
20:32
37
Building the Temperature History Screen
Formatting Dates and Times for Display
16:45
38
Getting Started with Codeium Windsurf: The Agentic IDE
Introduction to Codeium Windsurf
9:30
39
Building a Profile Screen with Cascade: A Step-by-Step Guide
Leveraging Windsurf’s Context Awareness for Seamless Integration
14:46
40
Turning Designs into Functional Code
Integrating Design References with Windsurf's Image Feature
18:24
41
Understanding Dynamic Navigation with the handleBackPress Function
Exploring navigation.getState() and Route Management
10:15
42
Implementing a Machine Learning Temperature Prediction Feature
Leveraging Temperature History for Smarter Predictions
10:39
43
Ensuring Accurate Temperature History Logging with Preset Selections
Improving Data Integrity Across Temperature Adjustments
11:21
44
Understanding Time-Based Logic in Machine Learning for Temperature Prediction
Mastering Timestamp Logic and Weighted Averages in Predictive Models
12:12
45
How the predictTemperature Function Combines Data for Accurate Results
Data Preparation: Filtering and Validating Historical Records
16:06
46
Integrating Machine Learning Predictions the TemperatureContext
Integrating Machine Learning Predictions with predictTemperature
8:49
47
Enhancing User Feedback with isAutoSet in Temperature Control
Conditional Styling with isAutoSet: Default vs. Predicted Temperatures
5:09
48
Implementing Authentication with Supabase and Expo: A Step-by-Step Guide
Understanding Supabase and Its Key Features
13:23
49
SQL Editor and Database Basics
Setting Up Your Database in the SQL Editor
9:57
50
Automating User Profile Management with SQL and Supabase
Setting Up the Database: Creating Tables and Schema
13:13
51
Setting Up the Supabase Client
Implementing Secure Authentication with Supabase
18:22
52
Implementing Authentication with Context API and Supabase
Creating the Authentication Context
16:11
53
Implementing User Registration with Supabase
Real-Time Email and Password Validation with Regex
15:16
54
From Sign-Up to Profile Setup: A Complete Supabase Flow
Storing User Profiles in the Database
15:24
55
Managing User Profiles with Supabase
Creating the Profile Edit Screen
12:07
56
Designing Efficient UI Components for Readability and Usability
Improving UX with formatDate, renderInput, and renderTemperatureField
11:42
57
Building a Temperature Selection Modal
Managing Modal Visibility with State Hooks
10:54
58
Implementing Date Pickers and Input Fields
Structuring the Return Statement
17:00
59
Building a Secure Sign-In Flow
Implementing the Sign-In Logic: Handling Authentication Requests
10:52
60
Setting Up Google Authentication
Setting Up the OAuth Consent Screen
15:14
61
Configuring OAuth Credentials for Google Authentication
Connecting Google OAuth with Supabase
9:14
62
Handling Google Authentication in AuthContext
Retrieving and Managing User Sessions in Supabase
18:22
63
Implementing Google Sign-In in
Differences Between Sign-In and Sign-Up Flows
15:59
64
Implementing Supabase Storage for Profile Picture Uploads
Setting Up Supabase and Project Configuration
20:39
Templates and source code
Download source files
Download the videos and assets to refer and learn offline without interuption.
Design template
Source code for all sections
Video files, ePub and subtitles
Videos
Assets
What's included?
All courses come with downloadable files to help you design, code and follow the course offline.
300+ hours of video
Subtitles in English, Chinese
Source files, ePub
UI, icons, illustrations
Premium, support chat
Source files
Design templates and source code files are included to help you learn.
ePub files
Read offline using Books for iOS, Mac or other apps that can read this format.
Video files
Download the videos so that you can watch later or offline using any video player.
Meet the instructor
We all try to be consistent with our way of teaching step-by-step, providing source files and prioritizing design in our courses.
Vanh Roeung
Developer
Developer at Design+Code
Flutter
Certificate
Figma
Certificate
SwiftUI
Certificate
UI Design
Certificate
Create a profile
Get certificates
After passing a test, we’ll award you with an online certificate. You can add them to your profile after completing the courses.
Stories
How students learned from our courses
See what people have learned and built by taking courses from Design+Code
Christiano Mere
Designer
Christiano Mere
Designer
My studies of swiftUI with a little help and inspirations of @designcodeio and @MengTo. Thanks for the today's live. Illustrations by @FireartStudio
Mike Ekkel
Frontend Engineer at Bynder
Mike Ekkel
Frontend Engineer at Bynder
What I really like about @MengTo's SwiftUI course is how he introduces you to awesome use cases for so many of the view modifiers. While this scroll animation is straight from the course, you can imagine all the cool things you could do with it!
Haawa
iOS Developer
Haawa
iOS Developer
Hey MengTo, I launched my iOS/watchOS app RunnerGoal almost completely built with SwiftUI. Thank you for the design lessons and many controls and animation that I used from you SwiftUI course. Man bowing deeply.
Jiani Li
UI/UX Designer/Developer
Jiani Li
UI/UX Designer/Developer
Bucket is now live in @AppAirport! Thanks to @designcodeio by @MengTo, I was able to learn #SwiftUI and built the app in 2 months.
Ben Hylak
UX Engineer at GoogleARVR
If you want to make something beautiful, this is where to start. This is not a programming course, and this is not just a design course. Meng removes that line all together and simply teaches the art of making. From keyboard shortcuts to color theory, this course leaves no stone unturned. Everything you learn here you will use immediately -- there is simply no other course like this.
Thomas Wang
Creator of digital products and experiences
So many great improvements and re-design. The quizzes and certificates are something that has been in the pipeline for a long time, awesome to see it in the platform for students to show their work!
