Get 50% off during Black Friday!

Design+Code logo

Quick links

No results found

Suggested search

Build a React Native app with Claude AI

28 sections - 5 hours of video

icon

Add to favorites

icon

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.

Instructor avatar

Taught by Sourasith Phomhome

Purchase includes access to 50+ courses, 320+ premium tutorials, 300+ hours of videos, source files and certificates.

28 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

Templates and source code

Download source files

Download the videos and assets to refer and learn offline without interuption.

check

Design template

check

Source code for all sections

check

Video files, ePub and subtitles

Browse all downloads

What's included?

All courses come with downloadable files to help you design, code and follow the course offline.

300+ hours of video

300+ hours of video

Subtitles in English, Chinese

Subtitles in English, Chinese

Source files, ePub

Source files, ePub

UI, icons, illustrations

UI, icons, illustrations

Premium, support chat

Premium, support chat

Source files

Source files

Design templates and source code files are included to help you learn.

ePub files

ePub files

Read offline using Books for iOS, Mac or other apps that can read this format.

Video files

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.

Sourasith Phomhome

UI Designer

Designer at Design+Code

icon

16 courses - 57 hours

course logo

Build a React Native app with Claude AI

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.

5 hrs

course logo

Design and Prototype for iOS 18

Design and Prototype for iOS 18 is an immersive course that equips you with the skills to create stunning, user-friendly mobile applications. From mastering Figma to understanding iOS 18's latest design principles, you'll learn to craft two real-world apps - a Car Control interface and an AI assistant.

3 hrs

course logo

Master Responsive Layouts in Figma

Creating responsive layouts is a must-have skill for any UI/UX designer. With so many different devices and screen sizes, designing interfaces that look great and work well on all platforms is necessary. Mastering this skill will make you stand out in the field. In this course, we'll start from scratch to create this beautiful design using Figma. You'll learn how to make layouts that are easy to use and work well on any device. We'll cover key concepts and tools to help you master responsive design in Figma.

2 hrs

course logo

UI UX Design with Mobbin and Figma

Mobbin is a powerful tool for UI/UX designers seeking inspiration and innovative design solutions. This platform offers a vast collection of real-world mobile app designs, providing a treasure trove of UI elements and layouts.

2 hrs

course logo

3D UI Interactive Web Design with Spline

Learn to create 3D designs and UI interactions such as 3D icons, UI animations, components, variables, screen resize, scrolling interactions, as well as exporting, optimizing, and publishing your 3D assets on websites

3 hrs

course logo

Design and Prototype for iOS 17 in Figma

Crafting engaging experiences for iOS 17 and visionOS using the Figma design tool. Learn about Figma's new prototyping features, Dev Mode, variables and auto layout.

6 hrs

course logo

Design and Prototype Apps with Midjourney

A comprehensive course on transforming Midjourney concepts into interactive prototypes using essential design techniques and AI tools

8 hrs

course logo

iOS Design with Midjourney and Figma

Learn the fundamentals of App UI design and master the art of creating beautiful and intuitive user interfaces for mobile applications

1 hrs

course logo

UI Design for iOS, Android and Web in Sketch

Create a UI design from scratch using Smart Layout, Components, Prototyping in Sketch app

1 hrs

course logo

UI Design a Camera App in Figma

Design a dark, vibrant and curvy app design from scratch in Figma. Design glass icons, lens strokes and realistic buttons.

1 hrs

course logo

UI Design for iOS 16 in Sketch

A complete guide to designing for iOS 16 with videos, examples and design files

3 hrs

course logo

Prototyping in Figma

Learn the basics of prototyping in Figma by creating interactive flows from custom designs

1 hrs

course logo

UI Design Quick Websites in Figma

Learn how to design a portfolio web UI from scratch in Figma

1 hrs

course logo

UI Design Android Apps in Figma

Design Android application UIs from scratch using various tricks and techniques in Figma

2 hrs

course logo

UI Design Quick Apps in Figma

Design application UIs from scratch using various tricks and techniques in Figma

12 hrs

course logo

Figma Handbook

A comprehensive guide to the best tips and tricks in Figma

6 hrs

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

David Norris

App Developer

Author avatar

David Norris

App Developer

Big thanks to you and your DesignCode team. A big help to me. Learning design is just as important as the code that drives it. Built @getNebulaApp, using the SwiftUI courses. Essential for learning iOS and macOS app dev.

Mogens Egeskov

iOS Developer

Author avatar

Mogens Egeskov

iOS Developer

After months of hard work i'm excited to share my new app "Read" which helps you reach your yearly book goal by telling you how many pages or percent to read daily. You can time your read.

Fabio Sasso

Founder of ABDZ

Author avatar

Fabio Sasso

Founder of ABDZ

My first iOS app is available on the AppStore. I literally didn’t know anything about SwiftUI (still not much) and in probably 4 weeks was able to recreate my android app for iOS. Highly recommend MengTo videos!

Artem Adams

Artchitect at IBM

Author avatar

Artem Adams

Artchitect at IBM

Learned a lot from your course to port my app from #AppleWatch to #iPhone, #iPad and #Mac. All SwiftUI, one code base, iCloud, learn words with Widgets.

Liu Yi

Founder at Price Tag

Thanks to Design+Code, I improved my design skill and learned to do animations for my app Price Tag, a top news app in China.

Thalion

UX/UI Designer

Stunning design! Congrats on the launch 🙌 Every new version of Design+Code is a huge leap forward!

Trusted by teams

120,000 people

Many startups look for designers who code and developers who design. They use our courses to help train new hires and expand skill sets.