React Native 101 For Designers

Learn how to style React Native components, implement responsive design, handle user input, create animations and more

Sign up to get three free videos about Flexbox on React Native.
Or buy now if you are already convinced!
The ability to see visuals that accompany the explanations are beyond helpful.

- Anthony Barbato, Lead Product Designer


  1. Getting Started
    • 1.1 Welcome
    • 1.2 Create your first React Native app
    • 1.3 What is React Native?
    • 1.4 What are native apps?
    • 1.5 Environment Setup and Coding Exercises
  2. React Native Core Components
    • 2.1 A review of tags in React (web)
    • 2.2 Image vs img
    • 2.3 View and Text
    • 2.4 ScrollView
    • 2.5 Lists
    • 2.6 JavaScript Premier: Destructuring
  3. Style React Native Components
    • 3.1 Styling options in React Native
    • 3.2 StyleSheet
    • 3.3 Combine styles
    • 3.4 styled-components
    • 3.5 Quick review of Flexbox for the web
    • 3.6 Flexbox in React Native
    • 3.7 Flexible and inflexible sizes
    • 3.8 Flex under the hood
  4. Implement Responsive Design
    • 4.1 An overview of responsive design
    • 4.2 Unify screen density
    • 4.3 Adapt to screen sizes with Flexbox
    • 4.4 iPhone X the notch and SafeAreaView
    • 4.5 Adapt to screen sizes with Dimensions API
    • 4.6 Dimension breakpoints
    • 4.7 Build a responsive grid view
    • 4.8 Adapt to device orientation with Dimensions API
    • 4.9 Adapt to device size and orientation with onLayout
    • 4.9.1 JavaScript Premier: Spread operator
    • 4.10 Material on Android Only! - Platform API
    • 4.11 Load platform dependent code by file extension
  5. Handle User Input
    • 5.1 Handle touches: Button and touchable components
    • 5.2 Accept text input: TextInput props
    • 5.3 Accept text input: save the value
    • 5.4 Style TextInput
    • 5.5 Avoid the keyboard!
    • 5.6 Implement drag-and-drop
    • 5.7 Fix a bug in the drag-and-drop code
    • 5.8 Implement pinch-to-zoom
  6. Animations
    • 6.1 Animation options in React Native
    • 6.2 Let the hat fly: LayoutAnimation
    • 6.3 Fly the hat with Animated
    • 6.4 Animate opacity and scale with Animated
    • 6.5 Flip the hat: Animated interpolate (rotate)
    • 6.6 Animation master control: Animated interpolate
    • 6.7 Swipe the hat away: Animated and gestures
    • 6.8 react-native-animatable
    • 6.9 Lottie
  7. Connect Screens Together: Navigation
    • 7.1 Navigation options in React Native
    • 7.2 React Navigation: one-screen navigation
    • 7.3 React Navigation: master-detail screens
    • 7.4 React Navigation: pass around parameters
    • 7.5 React Navigation: tabs
    • 7.6 React Navigation: transition animations
  8. The "Real" React Native
    • 8.1 What? It's not the real React Native?
    • 8.2 Set up XCode and Android Studio
    • 8.3 Eject an Expo project
    • 8.4 Install native extensions

Check out this Tweet thread for a visual guide to every chapter



🔥M1: React 101 For Designers

Available Now!
  • Stream or download 31 lessons, 3.5 hours of videos
  • Exercises and solutions
  • Life time access, unlimited updates

Get started today!

🔥M2: React Native 101 For Designers

Available Now!
  • Stream or download 58 lessons, 7.5 hours of videos
  • Exercises and solutions
  • Life time access, unlimited updates

Discount ends June 30, 2018

🔥🔥All 4 Modules (50% OFF!)

Available 2018!
  • Includes both M1 and M2. Early access to M3 and M4 content when available
  • Exercises and solutions
  • Life time access, unlimited updates

Appreciate your support!

Ask me about team pricing if you want to buy 3 or more licenses


If you are not 100% satisfied with the courses, you can cancel your order at any time before the launch of the course. After launch, you still have 30 days to get 100% refund. No hard feelings!

Linton comes across like a really nice programmer that wants to help us designers.

- Lincoln Mitchell, Senior UX Architect


Why should a designer learn coding?

I encourage you to check out this post to hear other designers’ opinions.

Learning to code will help you become better at design. Armed with a better understanding of how things work, you will find the communication with developers much more efficient. Your design ideas would be more convincing and more respected. You can even design with code.

New skills you learn will open new doors. Trust me, it will be a new world of creativity!

What are the prerequisites of the course?

This course requires basic understanding of React. If you are new to React, check out M1: React 101 for Designers.

Why should I pre-order?

  • 50%+ off the regular price!
  • Zero risk – You can cancel your order anytime within 30 days. No hard feelings.
  • Start learning sooner – I’ll send you exclusive content updates while the courses are being created. You don’t have to wait until the launch date.
  • Learn what you want to learn – The courses are feedback driven. I’ll try my best to integrate your feedback into the course materials. It’s a good opportunity to have your influence on creating a great resource for the entire design community. Shoot me an email, I’m all ears!

In the spirit of transparency, I must share that I’ll use the number of pre-orders to gauge the potential of the idea. I’d really like to work on this full-time, but I need to be sure that my time is well spent – I want to create enough value that you are willing to pay for.

So, if you want a course to see the light of day, please pre-order. It’s risk free, and a great way to kickstart your journey of designing with React.

Thank you! I’d really appreciate your trust and support. I’ll do my best!

What if I am not satisfied?

If you are not 100% satisfied with the courses, you can cancel your order at any time before the launch of the course. After launch, you still have 30 days to get 100% refund. No hard feelings!

I have other questions!

Feel free to email me, or tweet at me, anytime!
Linton Ye
Hi! I'm Linton Ye!

Super excited to create these courses to help you become a better designer!

I'm a full-stack developer who's learning design. I have 10+ years of experience in mobile, development/design tools and web development. I've been working on React Native since 2015, and building Android apps since 2007 before the first Android phone, HTC G1, was even available. I also contribute to React Navigation project, and write a blog about React.

I love teaching. I've authored a few courses at Treehouse and Lynda. My dark little secret: 😈 creating this course is also my special way to learn all things about design and React -- trying to explain things clearly has taken my understanding of the concepts to a whole new level.

Thrilled to be on this journey with you!

© 2018 jimu Labs, Inc.